Mixing
Typesafe react decorator not recognizing the ReturnType of the passed function
I'm trying to extend the redux connect so it can be used with particular reducer/state as a decorator, it's probably not necessary because redux connect can be used as a decorator, but I am curious why I can't make it work the way I want.
This is the HOC that I am using as a decorator:
interface InjectedProps { userId: string; }
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type StateToProps = (setting: ApplicationState) => InjectedProps;
export function withUserSetting(
stateToProps?: StateToProps
): <P extends InjectedProps>(WrappedComponent: ComponentType<P>) => void {
return <P extends InjectedProps>(Comp: ComponentType<P>) => {
class NewComponent extends (Component || PureComponent)<P> {
render() {
return <Comp {...this.props} />;
}
}
return connect(stateToProps)(NewComponent as any);
};
}
It works fine and it will alert me if the Props is missing, that's because it expecting return type of 'InjectedProps':
however, I would like to modify hoc so it can alert me based on the return type of the 'stateToProps':
type AnyFunction = (...args: any) => any;
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type StateToProps = (setting: ApplicationState) => { [key: string]: any };
export function withUserSetting<T extends AnyFunction>(
stateToProps?: StateToProps
): <P extends ReturnType<T>>(WrappedComponent: ComponentType<P>) => void {
return <P extends ReturnType<T>>(Comp: ComponentType<P>) => {
class NewComponent extends (Component || PureComponent)<P> {
render() {
return <Comp {...this.props} />;
}
}
return connect(stateToProps)(NewComponent as any);
};
}
as you can see the 'InjectedProps' is not required anymore so it can have any prop name, and I am assuming because of the 'ReturnType' decorator should recognize props automatically and alert me if it's not declared for the component, but it doesn't have any effect:
decorator works fine, however, I don't have a type safety I am looking for!
any idea why it's not working?
reactjs typescript decorator
asked Jan 2 at 15:43
cyrus-dcyrus-d
164418
add a comment |
I'm trying to extend the redux connect so it can be used with particular reducer/state as a decorator, it's probably not necessary because redux connect can be used as a decorator, but I am curious why I can't make it work the way I want.
This is the HOC that I am using as a decorator:
interface InjectedProps { userId: string; }
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type StateToProps = (setting: ApplicationState) => InjectedProps;
export function withUserSetting(
stateToProps?: StateToProps
): <P extends InjectedProps>(WrappedComponent: ComponentType<P>) => void {
return <P extends InjectedProps>(Comp: ComponentType<P>) => {
class NewComponent extends (Component || PureComponent)<P> {
render() {
return <Comp {...this.props} />;
}
}
return connect(stateToProps)(NewComponent as any);
};
}
It works fine and it will alert me if the Props is missing, that's because it expecting return type of 'InjectedProps':
however, I would like to modify hoc so it can alert me based on the return type of the 'stateToProps':
type AnyFunction = (...args: any) => any;
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type StateToProps = (setting: ApplicationState) => { [key: string]: any };
export function withUserSetting<T extends AnyFunction>(
stateToProps?: StateToProps
): <P extends ReturnType<T>>(WrappedComponent: ComponentType<P>) => void {
return <P extends ReturnType<T>>(Comp: ComponentType<P>) => {
class NewComponent extends (Component || PureComponent)<P> {
render() {
return <Comp {...this.props} />;
}
}
return connect(stateToProps)(NewComponent as any);
};
}
as you can see the 'InjectedProps' is not required anymore so it can have any prop name, and I am assuming because of the 'ReturnType' decorator should recognize props automatically and alert me if it's not declared for the component, but it doesn't have any effect:
decorator works fine, however, I don't have a type safety I am looking for!
any idea why it's not working?
reactjs typescript decorator
asked Jan 2 at 15:43
cyrus-dcyrus-d
164418
add a comment |
I'm trying to extend the redux connect so it can be used with particular reducer/state as a decorator, it's probably not necessary because redux connect can be used as a decorator, but I am curious why I can't make it work the way I want.
This is the HOC that I am using as a decorator:
interface InjectedProps { userId: string; }
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type StateToProps = (setting: ApplicationState) => InjectedProps;
export function withUserSetting(
stateToProps?: StateToProps
): <P extends InjectedProps>(WrappedComponent: ComponentType<P>) => void {
return <P extends InjectedProps>(Comp: ComponentType<P>) => {
class NewComponent extends (Component || PureComponent)<P> {
render() {
return <Comp {...this.props} />;
}
}
return connect(stateToProps)(NewComponent as any);
};
}
It works fine and it will alert me if the Props is missing, that's because it expecting return type of 'InjectedProps':
however, I would like to modify hoc so it can alert me based on the return type of the 'stateToProps':
type AnyFunction = (...args: any) => any;
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type StateToProps = (setting: ApplicationState) => { [key: string]: any };
export function withUserSetting<T extends AnyFunction>(
stateToProps?: StateToProps
): <P extends ReturnType<T>>(WrappedComponent: ComponentType<P>) => void {
return <P extends ReturnType<T>>(Comp: ComponentType<P>) => {
class NewComponent extends (Component || PureComponent)<P> {
render() {
return <Comp {...this.props} />;
}
}
return connect(stateToProps)(NewComponent as any);
};
}
as you can see the 'InjectedProps' is not required anymore so it can have any prop name, and I am assuming because of the 'ReturnType' decorator should recognize props automatically and alert me if it's not declared for the component, but it doesn't have any effect:
decorator works fine, however, I don't have a type safety I am looking for!
any idea why it's not working?
reactjs typescript decorator
asked Jan 2 at 15:43
cyrus-dcyrus-d
164418
I'm trying to extend the redux connect so it can be used with particular reducer/state as a decorator, it's probably not necessary because redux connect can be used as a decorator, but I am curious why I can't make it work the way I want.
This is the HOC that I am using as a decorator:
interface InjectedProps { userId: string; }
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type StateToProps = (setting: ApplicationState) => InjectedProps;
export function withUserSetting(
stateToProps?: StateToProps
): <P extends InjectedProps>(WrappedComponent: ComponentType<P>) => void {
return <P extends InjectedProps>(Comp: ComponentType<P>) => {
class NewComponent extends (Component || PureComponent)<P> {
render() {
return <Comp {...this.props} />;
}
}
return connect(stateToProps)(NewComponent as any);
};
}
It works fine and it will alert me if the Props is missing, that's because it expecting return type of 'InjectedProps':
however, I would like to modify hoc so it can alert me based on the return type of the 'stateToProps':
type AnyFunction = (...args: any) => any;
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type StateToProps = (setting: ApplicationState) => { [key: string]: any };
export function withUserSetting<T extends AnyFunction>(
stateToProps?: StateToProps
): <P extends ReturnType<T>>(WrappedComponent: ComponentType<P>) => void {
return <P extends ReturnType<T>>(Comp: ComponentType<P>) => {
class NewComponent extends (Component || PureComponent)<P> {
render() {
return <Comp {...this.props} />;
}
}
return connect(stateToProps)(NewComponent as any);
};
}
as you can see the 'InjectedProps' is not required anymore so it can have any prop name, and I am assuming because of the 'ReturnType' decorator should recognize props automatically and alert me if it's not declared for the component, but it doesn't have any effect:
decorator works fine, however, I don't have a type safety I am looking for!
any idea why it's not working?
reactjs typescript decorator
reactjs typescript decorator
asked Jan 2 at 15:43
cyrus-dcyrus-d
164418
asked Jan 2 at 15:43
cyrus-dcyrus-d
164418
asked Jan 2 at 15:43
cyrus-dcyrus-d
164418
asked Jan 2 at 15:43
cyrus-dcyrus-d
164418
asked Jan 2 at 15:43
cyrus-dcyrus-d
164418
164418
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
After simplifying the code, and understand it better, I have managed to make it work, this is the working version:
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type MapStateToProps<T> = (setting: ApplicationState) => T;
export function withUserSetting<T>(mapStateToProps?: MapStateToProps<T>):
<P extends T>(WrappedComponent: ComponentType<P>) => void {
return <P extends T>(WrappedComponent: ComponentType<P>) => {
return connect(mapStateToProps)(WrappedComponent as any);
};
}
Now it can be used like this:
@withUserSetting((state) => ({ userId: state.userSetting.userId }))
Or like this:
@withUserSetting<UserProps>((state) => ({ userId: state.userSetting.userId }))
In both ways, it will raise an error if a property is missing in the declaration.
answered Jan 3 at 8:57
cyrus-dcyrus-d
164418
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009189%2ftypesafe-react-decorator-not-recognizing-the-returntype-of-the-passed-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
After simplifying the code, and understand it better, I have managed to make it work, this is the working version:
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type MapStateToProps<T> = (setting: ApplicationState) => T;
export function withUserSetting<T>(mapStateToProps?: MapStateToProps<T>):
<P extends T>(WrappedComponent: ComponentType<P>) => void {
return <P extends T>(WrappedComponent: ComponentType<P>) => {
return connect(mapStateToProps)(WrappedComponent as any);
};
}
Now it can be used like this:
@withUserSetting((state) => ({ userId: state.userSetting.userId }))
Or like this:
@withUserSetting<UserProps>((state) => ({ userId: state.userSetting.userId }))
In both ways, it will raise an error if a property is missing in the declaration.
answered Jan 3 at 8:57
cyrus-dcyrus-d
164418
add a comment |
After simplifying the code, and understand it better, I have managed to make it work, this is the working version:
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type MapStateToProps<T> = (setting: ApplicationState) => T;
export function withUserSetting<T>(mapStateToProps?: MapStateToProps<T>):
<P extends T>(WrappedComponent: ComponentType<P>) => void {
return <P extends T>(WrappedComponent: ComponentType<P>) => {
return connect(mapStateToProps)(WrappedComponent as any);
};
}
Now it can be used like this:
@withUserSetting((state) => ({ userId: state.userSetting.userId }))
Or like this:
@withUserSetting<UserProps>((state) => ({ userId: state.userSetting.userId }))
In both ways, it will raise an error if a property is missing in the declaration.
answered Jan 3 at 8:57
cyrus-dcyrus-d
164418
add a comment |
After simplifying the code, and understand it better, I have managed to make it work, this is the working version:
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type MapStateToProps<T> = (setting: ApplicationState) => T;
export function withUserSetting<T>(mapStateToProps?: MapStateToProps<T>):
<P extends T>(WrappedComponent: ComponentType<P>) => void {
return <P extends T>(WrappedComponent: ComponentType<P>) => {
return connect(mapStateToProps)(WrappedComponent as any);
};
}
Now it can be used like this:
@withUserSetting((state) => ({ userId: state.userSetting.userId }))
Or like this:
@withUserSetting<UserProps>((state) => ({ userId: state.userSetting.userId }))
In both ways, it will raise an error if a property is missing in the declaration.
answered Jan 3 at 8:57
cyrus-dcyrus-d
164418
After simplifying the code, and understand it better, I have managed to make it work, this is the working version:
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type MapStateToProps<T> = (setting: ApplicationState) => T;
export function withUserSetting<T>(mapStateToProps?: MapStateToProps<T>):
<P extends T>(WrappedComponent: ComponentType<P>) => void {
return <P extends T>(WrappedComponent: ComponentType<P>) => {
return connect(mapStateToProps)(WrappedComponent as any);
};
}
Now it can be used like this:
@withUserSetting((state) => ({ userId: state.userSetting.userId }))
Or like this:
@withUserSetting<UserProps>((state) => ({ userId: state.userSetting.userId }))
In both ways, it will raise an error if a property is missing in the declaration.
answered Jan 3 at 8:57
cyrus-dcyrus-d
164418
edited Jan 3 at 10:27
answered Jan 3 at 8:57
cyrus-dcyrus-d
164418
answered Jan 3 at 8:57
cyrus-dcyrus-d
164418
answered Jan 3 at 8:57
cyrus-dcyrus-d
164418
164418
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009189%2ftypesafe-react-decorator-not-recognizing-the-returntype-of-the-passed-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
