Typescript React HOC Woes
0
I'm having a ton of trouble getting typescript to cooperate with my HOC. After many iterations, here's the best I've got:
export interface IRequiresLoginProps
loggedIn: boolean;
type GetProps<C> = C extends ComponentType<infer P> ? P : never;
function requiresLogin<C extends ComponentType<GetProps<C>>>(Component: C)
For some reason, the only way to make typescript happy is by using the MakeTSHappy variable. If I try to skip it and use Component directly like <Component ...props />, TS errors with: "JSX element type 'Component' does not have any construct or call signatures."
Since the type of Component extends ComponentType<>, I would expect it to work just like a ComponentType<>; why does it give me an error? The fact that I can assign it to a variable of type ComponentType<> without explicitly casting it seems to back up my understanding.
reactjs typescript
asked Nov 15 '18 at 5:27
bmatcukbmatcuk
14510
add a comment |
0
I'm having a ton of trouble getting typescript to cooperate with my HOC. After many iterations, here's the best I've got:
export interface IRequiresLoginProps
loggedIn: boolean;
type GetProps<C> = C extends ComponentType<infer P> ? P : never;
function requiresLogin<C extends ComponentType<GetProps<C>>>(Component: C)
For some reason, the only way to make typescript happy is by using the MakeTSHappy variable. If I try to skip it and use Component directly like <Component ...props />, TS errors with: "JSX element type 'Component' does not have any construct or call signatures."
Since the type of Component extends ComponentType<>, I would expect it to work just like a ComponentType<>; why does it give me an error? The fact that I can assign it to a variable of type ComponentType<> without explicitly casting it seems to back up my understanding.
reactjs typescript
asked Nov 15 '18 at 5:27
bmatcukbmatcuk
14510
JSX element type 'Component' does not have any construct or call signatures - there should also be an explanation why the type doesn't match in this message.
– estus
Nov 15 '18 at 7:25
sadly, no =( That's all I get.
– bmatcuk
Nov 16 '18 at 0:34
add a comment |
0
0
0
1
I'm having a ton of trouble getting typescript to cooperate with my HOC. After many iterations, here's the best I've got:
export interface IRequiresLoginProps
loggedIn: boolean;
type GetProps<C> = C extends ComponentType<infer P> ? P : never;
function requiresLogin<C extends ComponentType<GetProps<C>>>(Component: C)
For some reason, the only way to make typescript happy is by using the MakeTSHappy variable. If I try to skip it and use Component directly like <Component ...props />, TS errors with: "JSX element type 'Component' does not have any construct or call signatures."
Since the type of Component extends ComponentType<>, I would expect it to work just like a ComponentType<>; why does it give me an error? The fact that I can assign it to a variable of type ComponentType<> without explicitly casting it seems to back up my understanding.
reactjs typescript
asked Nov 15 '18 at 5:27
bmatcukbmatcuk
14510
I'm having a ton of trouble getting typescript to cooperate with my HOC. After many iterations, here's the best I've got:
export interface IRequiresLoginProps
loggedIn: boolean;
type GetProps<C> = C extends ComponentType<infer P> ? P : never;
function requiresLogin<C extends ComponentType<GetProps<C>>>(Component: C)
For some reason, the only way to make typescript happy is by using the MakeTSHappy variable. If I try to skip it and use Component directly like <Component ...props />, TS errors with: "JSX element type 'Component' does not have any construct or call signatures."
Since the type of Component extends ComponentType<>, I would expect it to work just like a ComponentType<>; why does it give me an error? The fact that I can assign it to a variable of type ComponentType<> without explicitly casting it seems to back up my understanding.
reactjs typescript
reactjs typescript
asked Nov 15 '18 at 5:27
bmatcukbmatcuk
14510
asked Nov 15 '18 at 5:27
bmatcukbmatcuk
14510
asked Nov 15 '18 at 5:27
bmatcukbmatcuk
14510
asked Nov 15 '18 at 5:27
bmatcukbmatcuk
14510
asked Nov 15 '18 at 5:27
bmatcukbmatcuk
14510
14510
JSX element type 'Component' does not have any construct or call signatures - there should also be an explanation why the type doesn't match in this message.
– estus
Nov 15 '18 at 7:25
sadly, no =( That's all I get.
– bmatcuk
Nov 16 '18 at 0:34
add a comment |
JSX element type 'Component' does not have any construct or call signatures - there should also be an explanation why the type doesn't match in this message.
– estus
Nov 15 '18 at 7:25
sadly, no =( That's all I get.
– bmatcuk
Nov 16 '18 at 0:34
JSX element type 'Component' does not have any construct or call signatures - there should also be an explanation why the type doesn't match in this message.
– estus
Nov 15 '18 at 7:25
JSX element type 'Component' does not have any construct or call signatures - there should also be an explanation why the type doesn't match in this message.
– estus
Nov 15 '18 at 7:25
sadly, no =( That's all I get.
– bmatcuk
Nov 16 '18 at 0:34
sadly, no =( That's all I get.
– bmatcuk
Nov 16 '18 at 0:34
add a comment |
1 Answer
1
active
oldest
votes
0
I think you are just overcomplicating it a bit, as HOCs existed before conditional types appeared.. this works fine:
function requiresLogin<P extends , C extends ComponentType<P> = ComponentType<P>>(
Component: ComponentType<P>
)
const displayName = Component.displayName
answered Nov 15 '18 at 8:12
Daniel KhoroshkoDaniel Khoroshko
1,416516
This is similar to what I started with, but you aren't using type parameterCanywhere. If you replaceComponent: ComponentType<P>withComponent: Cyou'll run into the same error I was getting: JSX element type 'Component' does not have any construct or call signatures.
– bmatcuk
Nov 16 '18 at 0:39
If you remove type parameterC(since you aren't using it anyway), it works fine, but the return value of the HOC isn't quite right: becauseComponentis declared asComponentType<P>, the return type ofhoistNonReactStaticsdoesn't contain any of the statics on Component.
– bmatcuk
Nov 16 '18 at 0:42
but why would you need to replace ComponenType<P> with C if it works fine already? :-) At least as far as types are concerned.
– Daniel Khoroshko
Nov 16 '18 at 9:18
unfortunately I don't know about hoistNOnReactStatics thing, so it might not work then
– Daniel Khoroshko
Nov 16 '18 at 9:23
static properties and methods don't belong to class interface anyway, so maybe it should be done somehow differently, however here I am not sure, sorry
– Daniel Khoroshko
Nov 16 '18 at 9:25
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
);
);
draft saved
draft discarded
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%2f53312968%2ftypescript-react-hoc-woes%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
0
I think you are just overcomplicating it a bit, as HOCs existed before conditional types appeared.. this works fine:
function requiresLogin<P extends , C extends ComponentType<P> = ComponentType<P>>(
Component: ComponentType<P>
)
const displayName = Component.displayName
answered Nov 15 '18 at 8:12
Daniel KhoroshkoDaniel Khoroshko
1,416516
This is similar to what I started with, but you aren't using type parameterCanywhere. If you replaceComponent: ComponentType<P>withComponent: Cyou'll run into the same error I was getting: JSX element type 'Component' does not have any construct or call signatures.
– bmatcuk
Nov 16 '18 at 0:39
If you remove type parameterC(since you aren't using it anyway), it works fine, but the return value of the HOC isn't quite right: becauseComponentis declared asComponentType<P>, the return type ofhoistNonReactStaticsdoesn't contain any of the statics on Component.
– bmatcuk
Nov 16 '18 at 0:42
but why would you need to replace ComponenType<P> with C if it works fine already? :-) At least as far as types are concerned.
– Daniel Khoroshko
Nov 16 '18 at 9:18
unfortunately I don't know about hoistNOnReactStatics thing, so it might not work then
– Daniel Khoroshko
Nov 16 '18 at 9:23
static properties and methods don't belong to class interface anyway, so maybe it should be done somehow differently, however here I am not sure, sorry
– Daniel Khoroshko
Nov 16 '18 at 9:25
add a comment |
0
I think you are just overcomplicating it a bit, as HOCs existed before conditional types appeared.. this works fine:
function requiresLogin<P extends , C extends ComponentType<P> = ComponentType<P>>(
Component: ComponentType<P>
)
const displayName = Component.displayName
answered Nov 15 '18 at 8:12
Daniel KhoroshkoDaniel Khoroshko
1,416516
This is similar to what I started with, but you aren't using type parameterCanywhere. If you replaceComponent: ComponentType<P>withComponent: Cyou'll run into the same error I was getting: JSX element type 'Component' does not have any construct or call signatures.
– bmatcuk
Nov 16 '18 at 0:39
If you remove type parameterC(since you aren't using it anyway), it works fine, but the return value of the HOC isn't quite right: becauseComponentis declared asComponentType<P>, the return type ofhoistNonReactStaticsdoesn't contain any of the statics on Component.
– bmatcuk
Nov 16 '18 at 0:42
but why would you need to replace ComponenType<P> with C if it works fine already? :-) At least as far as types are concerned.
– Daniel Khoroshko
Nov 16 '18 at 9:18
unfortunately I don't know about hoistNOnReactStatics thing, so it might not work then
– Daniel Khoroshko
Nov 16 '18 at 9:23
static properties and methods don't belong to class interface anyway, so maybe it should be done somehow differently, however here I am not sure, sorry
– Daniel Khoroshko
Nov 16 '18 at 9:25
add a comment |
0
0
0
I think you are just overcomplicating it a bit, as HOCs existed before conditional types appeared.. this works fine:
function requiresLogin<P extends , C extends ComponentType<P> = ComponentType<P>>(
Component: ComponentType<P>
)
const displayName = Component.displayName
answered Nov 15 '18 at 8:12
Daniel KhoroshkoDaniel Khoroshko
1,416516
I think you are just overcomplicating it a bit, as HOCs existed before conditional types appeared.. this works fine:
function requiresLogin<P extends , C extends ComponentType<P> = ComponentType<P>>(
Component: ComponentType<P>
)
const displayName = Component.displayName
answered Nov 15 '18 at 8:12
Daniel KhoroshkoDaniel Khoroshko
1,416516
answered Nov 15 '18 at 8:12
Daniel KhoroshkoDaniel Khoroshko
1,416516
answered Nov 15 '18 at 8:12
Daniel KhoroshkoDaniel Khoroshko
1,416516
answered Nov 15 '18 at 8:12
Daniel KhoroshkoDaniel Khoroshko
1,416516
1,416516
This is similar to what I started with, but you aren't using type parameterCanywhere. If you replaceComponent: ComponentType<P>withComponent: Cyou'll run into the same error I was getting: JSX element type 'Component' does not have any construct or call signatures.
– bmatcuk
Nov 16 '18 at 0:39
If you remove type parameterC(since you aren't using it anyway), it works fine, but the return value of the HOC isn't quite right: becauseComponentis declared asComponentType<P>, the return type ofhoistNonReactStaticsdoesn't contain any of the statics on Component.
– bmatcuk
Nov 16 '18 at 0:42
but why would you need to replace ComponenType<P> with C if it works fine already? :-) At least as far as types are concerned.
– Daniel Khoroshko
Nov 16 '18 at 9:18
unfortunately I don't know about hoistNOnReactStatics thing, so it might not work then
– Daniel Khoroshko
Nov 16 '18 at 9:23
static properties and methods don't belong to class interface anyway, so maybe it should be done somehow differently, however here I am not sure, sorry
– Daniel Khoroshko
Nov 16 '18 at 9:25
add a comment |
This is similar to what I started with, but you aren't using type parameterCanywhere. If you replaceComponent: ComponentType<P>withComponent: Cyou'll run into the same error I was getting: JSX element type 'Component' does not have any construct or call signatures.
– bmatcuk
Nov 16 '18 at 0:39
If you remove type parameterC(since you aren't using it anyway), it works fine, but the return value of the HOC isn't quite right: becauseComponentis declared asComponentType<P>, the return type ofhoistNonReactStaticsdoesn't contain any of the statics on Component.
– bmatcuk
Nov 16 '18 at 0:42
but why would you need to replace ComponenType<P> with C if it works fine already? :-) At least as far as types are concerned.
– Daniel Khoroshko
Nov 16 '18 at 9:18
unfortunately I don't know about hoistNOnReactStatics thing, so it might not work then
– Daniel Khoroshko
Nov 16 '18 at 9:23
static properties and methods don't belong to class interface anyway, so maybe it should be done somehow differently, however here I am not sure, sorry
– Daniel Khoroshko
Nov 16 '18 at 9:25
This is similar to what I started with, but you aren't using type parameter
C anywhere. If you replace Component: ComponentType<P> with Component: C you'll run into the same error I was getting: JSX element type 'Component' does not have any construct or call signatures.– bmatcuk
Nov 16 '18 at 0:39
This is similar to what I started with, but you aren't using type parameter
C anywhere. If you replace Component: ComponentType<P> with Component: C you'll run into the same error I was getting: JSX element type 'Component' does not have any construct or call signatures.– bmatcuk
Nov 16 '18 at 0:39
If you remove type parameter
C (since you aren't using it anyway), it works fine, but the return value of the HOC isn't quite right: because Component is declared as ComponentType<P>, the return type of hoistNonReactStatics doesn't contain any of the statics on Component.– bmatcuk
Nov 16 '18 at 0:42
If you remove type parameter
C (since you aren't using it anyway), it works fine, but the return value of the HOC isn't quite right: because Component is declared as ComponentType<P>, the return type of hoistNonReactStatics doesn't contain any of the statics on Component.– bmatcuk
Nov 16 '18 at 0:42
but why would you need to replace ComponenType<P> with C if it works fine already? :-) At least as far as types are concerned.
– Daniel Khoroshko
Nov 16 '18 at 9:18
but why would you need to replace ComponenType<P> with C if it works fine already? :-) At least as far as types are concerned.
– Daniel Khoroshko
Nov 16 '18 at 9:18
unfortunately I don't know about hoistNOnReactStatics thing, so it might not work then
– Daniel Khoroshko
Nov 16 '18 at 9:23
unfortunately I don't know about hoistNOnReactStatics thing, so it might not work then
– Daniel Khoroshko
Nov 16 '18 at 9:23
static properties and methods don't belong to class interface anyway, so maybe it should be done somehow differently, however here I am not sure, sorry
– Daniel Khoroshko
Nov 16 '18 at 9:25
static properties and methods don't belong to class interface anyway, so maybe it should be done somehow differently, however here I am not sure, sorry
– Daniel Khoroshko
Nov 16 '18 at 9:25
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53312968%2ftypescript-react-hoc-woes%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
JSX element type 'Component' does not have any construct or call signatures - there should also be an explanation why the type doesn't match in this message.
– estus
Nov 15 '18 at 7:25
sadly, no =( That's all I get.
– bmatcuk
Nov 16 '18 at 0:34