-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[V6] Anyone created a typescript definition file for v6 yet ? #1211
Comments
Not to my knowledge. Maybe @vslinko has created one . |
I just started but I switched to v5 for some reasons. So I have no typings for v6. |
@ooflorent It's because of two reasons:
|
I have created a starting type definition I am using now. Disclaimer 1. I am new to creating type definitions. It may contain errors and not be as strict as it could be. But figured i put it here in case it helps someone else. https://gist.github.com/rluiten/a41fb5845fae11a5484bad954d97b3a8 |
I'm finishing up one. I'll gist it so yall can get any idea. I can PR it in as well if we want to keep it here, which I think would be great. https://gist.github.com/CarsonF/5b9d0d9d8c37c0da5a17bf4ddccd2887 It uses Redux's built-in definition so it's a bit different from @rluiten's |
Well that's a big 👍 from me for @CarsonF Dang just tried, I am using the redux definition form typings which are different to the one in the npm module. I have definitions for other modules that depend on the typings redux definition to. Dang. I don't believe I can switch away from the redux defintions in typings easilly at moment. :( |
Yeah...those have been deprecated since redux has them builtin now. https://github.com/andrew-w-ross/typings-redux I'm still tweaking it, but overall I think it's pretty close. @erikras What do you think about having the typescript definition live in this repo? |
I decided I may as well move to off the old redux definition I was using from definitley typed via typings. Ended up copying about 3 definitions out of typings and tweaking them for use with the the redux node modules definitions that all took a bit of time but wasnt to hard and so far things seem to be all ok. So then I grabbed your module definition. @CarsonF I ran into a hiccup it apperas you don't actually create a module. As a test I wrapped your file in a 'declare "redux-form" {}' and removed the declare on the namespace "ReduxForm" and it seems mostly ok. Though some of my code has type errors now I am pretty sure its my fault as my definition was very minimal and loose. |
Ran into another problem, InputFieldProps does not allow me to pass type="checkbox" into my input field. I had a look around alpha 15 added a props parameter to to pass through props. , and switched to using props for the extra parameters. I don't know if the type can be made tighter or not.
|
@rluiten Thanks for testing this out. Always helps to have a second pair of eyes!
Yeah it's not an ambient definition. If you look at all the definitions in the npm folder in
Do you mean for the <Field component="input" type="checkbox" />
I remember that now. I'll need to look into that. I would rather declare that type through a generic, that way we get code completion and validation. |
@CarsonF thank you your type system is way tighter than I would likely have gotten to. Thanks for the clarification. Looked at your example in the gist, great idea to add it. I had not really used static either in typescript, i was just using functions in the vicinity Learning lots, thanks.
I mean the Field component, that takes component properties yes. IMO it would be great if we could type limit the arbitrary extra props on Field by the component specified by the 'component' property, I don't see how this is possible but I am new to what can be done with typescript types. A complication factor is that component is a union of 5 types including 3 strings so I think it gets complex. Given we have props maybe its not a bad fall back to have the Field props checked and the 'props' prop as a bucket for pass through though if we can type the 'props' property that would be good. |
I don't see how adding The type could be declared as a generic on the I've gotten around both these problems by wrapping the /**
* A redux-form Field for Material UI's `TextField` component.
*/
export class TextField extends React.Component<__MaterialUI.TextFieldProps & {ref?: React.Ref<TextField>}, {}> {
render() {
return <Field component={MappedTextField} {...this.props} />;
}
}
/**
* Maps the `error` property to the `errorText` property.
*/
export class MappedTextField extends React.Component<__MaterialUI.TextFieldProps & FieldProps, {}> {
render() {
return <Mui.TextField errorText={this.props.touched && this.props.error ? this.props.error : ''} {...this.props} />;
}
} Usage: <TextField
id='username'
name='username'
floatingLabelText='Username or email'
onKeyDown={this.handleTextFieldSubmit}
fullWidth={true}
/> TextField should have the This would be something to think about though, maybe |
@CarsonF I notice your examples are all not Stateless components, is there some reason for that ? As an aside are you using the React type definition from definitely typed v0.14 is latest i believe ? I have been on this project for a few months with react/redux/typescript and I still feel like i have a lot to learn dealing with typescript. |
Yeah IntelliJ/WebStorm/etc. doesn't provide completion for the stateless components. I also don't think that this way is that much more verbose.
From DT yeah. 15.1.0 now I believe.
Haha same here, this is all new to me too :) I just update the gist with the |
I am trying out how you set things up but I appear to have hit a hiccup I am stuck on. import React = require('react');
import { Field, FieldProps } from 'redux-form';
interface MyFieldProps {
message: string;
name: string;
}
export class TestField extends React.Component<MyFieldProps, {}> {
render() {
return <Field component={MyField} {...this.props} />; // <<< line 11
}
}
export class MyField extends React.Component<MyFieldProps & FieldProps, any> {
render() {
return (
<div {...this.props} >
{this.props.message}
<div>{this.props.touched && this.props.error
? 'Error: ' + this.props.error
: ''}</div>
</div>
);
}
} I get the the following error.
Which has me at a loss at the moment. Extra Info. If I switch to Switch to |
Yeahhhhh I was just ran into that too. I had those mapped components as stateless until I commented above. I guess this way provides enough info to fail it haha. Try changing that type to component?: typeof Component | typeof StatelessComponent | ... |
This fails. component?: typeof Component | typeof StatelessComponent | ... But component?: typeof Component | StatelessComponent<P> | ... Spoke to soon, id forgot id set my props to any in my state component. Hmm it worked in one case not another. Summary. using component?: typeof Component | StatelessComponent<P> | ... I can create classes fine and set actual types for props it works right. |
This appears to be relevant, coming in typescript 2.0. |
Just noticed. validate?(values: FormData, props: P): FormErrors<FormData>; |
@rluiten Updated the gist with a fix for the Updated version above example: export class TextField extends React.Component<InputFieldProps<__MaterialUI.TextFieldProps> & __MaterialUI.TextFieldProps & {ref?: React.Ref<TextField>}, {}> {
render() {
return <Field component={MappedTextField} {...this.props} />;
}
} notice the
I know that's the definition in the docs, but it's incorrect. Maybe it's a bug, either way I didn't find it useful, so I left it out. It's actually the properties of the redux connected form component which wraps the form. Basically something like this: export interface Config<FormData extends DataShape, P, S> {
validate?(values: FormData, props: Config<FormData, P, S>): FormErrors<FormData>;
} |
Good point on the type of validate() second parameter. Is there a type for the properties passed to a FieldArray render component ?
Maybe something like this, i could not find any interfaces with a field interface FieldArrayRenderProps<T> {
fields: FieldArrayProps<T>;
name: string;
} I am using it this way at the moment interface RenderServicesProps extends FieldArrayRenderProps<VM.ISupportServicesViewModel> {
}
class RenderServices extends React.Component<RenderServicesProps, {}> { /* stuff */ } Which is working fine at the moment. |
Just got bitten by this in my checkbox field. Referring back to example above with I have modified my helper component to. export class CheckboxField extends React.Component<CheckboxFieldProps, {}> {
render() {
return <Field component={CoreCheckboxField} {...this.props} props={{type : "checkbox"}} />;
}
} I am re-considering adding Just discovered that I can not pass in property value on the props field. |
I updated my gist its mainl CarsonF's version with some updates I have applied since. https://gist.github.com/rluiten/a41fb5845fae11a5484bad954d97b3a8 |
I know this is the wrong place for this, when I get time I'll make a pull https://gist.github.com/kristian-puccio/65d32833306ba8b697b1b3db041aeb44 On 8 July 2016 at 08:32, Robin [email protected] wrote:
|
I updated the redux-form.d.ts for 6.0.0-rc3 - which so far works with my code and the split properties for Field. |
@rluiten It's probably not good to have two copies of the definition floating around. If you've just copied mine and modified it a bit, can you just send me that patch instead? Still haven't heard about whether they will accept a PR for this or not. I guess I'll start with a PR but move it to a separate repo if they don't want it here. |
where is the 'master' of redux-form.d.ts? |
@UweWindt Well currently there are two versions. Both of the gists will have the latest code though. I'm updating mine right now for |
what does PR mean? |
Ok I updated the gist. I renamed Need to fork and make commits, then I'll PR since @erikras gave me the thumbs up :) |
PR's up! #1318 |
If you have a reasonably working definition for v6, can't you just PR it directly to Definitely Typed? It will also make contributions easier. I think Erik has too much to deal with right now... |
The same problem could happen there as well. |
Folks - in light of proposals to 'fix' typings with TS 2.x (See here) are there any updates on typings for V6? Will they be incorporated directly into the redux-form repo, or into the @types eco-system? Do we know when? Thanks for your great work. |
Based on typing by @CarsonF I rewrote some part, added missing things and here are the (mostly) working typings for https://gist.github.com/LKay/73a2eb2e706c54e856390a69b5993e8a I could use it pretty fine for couple of my projects and haven't encountered any major problems. Due to TypeScript limitation of extending interface with generics (discussed in Issue #2225 there is still need to explicitly define custom props type for The Can you, folks test it in your projects and report any problems? I'd like to have it tested quite thoughtfully before adding to DefinitelyTyped. |
Thank you LKay. I gave it a quick try. I'm using 'redux-form/immutable'. Some remarks :
And this to the Immutable definition file:
There might be another way, especially without changing the Immutable definition, but I had no better idea and not much time.
Couldn't find the right syntax to type them properly (without the any).
|
@Strato About the first two. I was using The |
There's not even a v5 up yet. Latest definition is |
I'm working on getting my definition there and finishing it. However, currently there's a problem with the redux definition. I built my definition of off the new redux one, but DT still has the old one. DefinitelyTyped/DefinitelyTyped#11551 |
@CarsonF looks like the DT PR got merged |
Yes it did. Working on this tonight. |
@CarsonF You aren't declaring a module in your ts definition. Can you please tell me how to modify it to declare a module in my copy, or tell me how to use yours without a module? I'm really new to react, redux, and typescript. |
@sawatsky: Just declare the module name in the top, like the example shown in the other thread: https://gist.github.com/bbenezech/8ebbced86c0f357d09e4000635eea275 |
@CarsonF It seems you have missed a few things in the FormProps interface... I have noticed that |
@nzjoel1234 Are those passed into the form component? I don't remember. They are specified on the form config: |
All: New issues should be opened on DefinitelyTyped since the definition lives there. @erikras Can you close / lock this? |
Sorry should have raised it there... |
Is there any movement on this? I think definitely typed still has v4 typings. |
@tugberkugurlu DefinitelyTyped has typings for version 6.3 for a while now. Also PR to update to version 6.6 is waiting to be merged here. |
Thanks @CarsonF, closing this issue as TS type definitions are now stored on DefinitelyTyped |
Just read through the state and I think v6 shows lots of promise over starting this project with v5 at moment.
I can start with a super basic one and fill out bits as I go but I have little experience yet with creating definitions and I'd probably leave things loser than they could be.
The text was updated successfully, but these errors were encountered: