Typescript type definition: TS2604: JSX element type 'something' does not have any construct or call...
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have an abstract class in "File1":
// File1.tsx
import * as React from 'react';
export interface IProps {
prop1: string;
prop2: number;
}
export abstract class Something extends React.Component<IProps> {
public typeName: string;
}
then, in other file (File2) i define infinite classes extending from abstract class Something:
// File2.tsx
import { Something } from './File1';
export class Something1 extends Something {
public typeName: string = 'Type1';
public render() {
return <div>Something 1</div>
}
}
export class Something2 extends Something {
public typeName: string = 'Type2';
public render() {
return <div>Something 2</div>
}
}
Now, here is my problem:
In a 3rd File, i import the classes defined before (Something1 or Something2) and then i passing this class to 2 different components: ReadProperty and RenderComponent. In the first component i need accessing to the property typeName of the class and do some stuff and in the second file i need render that class:
// File3.tsx
import { Something } from './File1';
import { Something1, Something2 } from './File2';
interface IReadProperty {
something: Something;
};
const ReadProperty: React.SFC<IReadProperty> = ({ something }) => {
// here i can access to property typeName. No problem here.
something.typeName // Type1 | Type2 | ... Infinite
...do some stuff
}
interface IRenderComponent {
something: Something;
}
const RenderComponent: React.SFC<IRenderComponent> = ({ something }) => {
// i need do some stuff here before render "something" component
// here i get an error when i try render the component
return <something />;
}
const Main: React.SFC = () => {
return (
<div>
<ReadProperty something={Something1} />
<RenderComponent something={Something1} />
</div>
);
}
but when i try to render the component in RenderComponent, i get the follow error: TS2604: JSX element type 'something' does not have any construct or call signatures.
What is wrong here? i defined type 'something' as abstract Class Something because i can define infinite Classes that extend from Something, so i can't define using: something: Something1 | Something2 | Something50 ...;
here is an example that i trying to do: https://codesandbox.io/s/18yzvkx8jj
javascript reactjs typescript types
add a comment |
I have an abstract class in "File1":
// File1.tsx
import * as React from 'react';
export interface IProps {
prop1: string;
prop2: number;
}
export abstract class Something extends React.Component<IProps> {
public typeName: string;
}
then, in other file (File2) i define infinite classes extending from abstract class Something:
// File2.tsx
import { Something } from './File1';
export class Something1 extends Something {
public typeName: string = 'Type1';
public render() {
return <div>Something 1</div>
}
}
export class Something2 extends Something {
public typeName: string = 'Type2';
public render() {
return <div>Something 2</div>
}
}
Now, here is my problem:
In a 3rd File, i import the classes defined before (Something1 or Something2) and then i passing this class to 2 different components: ReadProperty and RenderComponent. In the first component i need accessing to the property typeName of the class and do some stuff and in the second file i need render that class:
// File3.tsx
import { Something } from './File1';
import { Something1, Something2 } from './File2';
interface IReadProperty {
something: Something;
};
const ReadProperty: React.SFC<IReadProperty> = ({ something }) => {
// here i can access to property typeName. No problem here.
something.typeName // Type1 | Type2 | ... Infinite
...do some stuff
}
interface IRenderComponent {
something: Something;
}
const RenderComponent: React.SFC<IRenderComponent> = ({ something }) => {
// i need do some stuff here before render "something" component
// here i get an error when i try render the component
return <something />;
}
const Main: React.SFC = () => {
return (
<div>
<ReadProperty something={Something1} />
<RenderComponent something={Something1} />
</div>
);
}
but when i try to render the component in RenderComponent, i get the follow error: TS2604: JSX element type 'something' does not have any construct or call signatures.
What is wrong here? i defined type 'something' as abstract Class Something because i can define infinite Classes that extend from Something, so i can't define using: something: Something1 | Something2 | Something50 ...;
here is an example that i trying to do: https://codesandbox.io/s/18yzvkx8jj
javascript reactjs typescript types
Welcome to StackOverflow - just wanted to say nice job on a great first question! Appreciate that you described the problem in detail and gave all of the code needed to reproduce the issue.
– ethan.roday
Nov 23 '18 at 15:48
add a comment |
I have an abstract class in "File1":
// File1.tsx
import * as React from 'react';
export interface IProps {
prop1: string;
prop2: number;
}
export abstract class Something extends React.Component<IProps> {
public typeName: string;
}
then, in other file (File2) i define infinite classes extending from abstract class Something:
// File2.tsx
import { Something } from './File1';
export class Something1 extends Something {
public typeName: string = 'Type1';
public render() {
return <div>Something 1</div>
}
}
export class Something2 extends Something {
public typeName: string = 'Type2';
public render() {
return <div>Something 2</div>
}
}
Now, here is my problem:
In a 3rd File, i import the classes defined before (Something1 or Something2) and then i passing this class to 2 different components: ReadProperty and RenderComponent. In the first component i need accessing to the property typeName of the class and do some stuff and in the second file i need render that class:
// File3.tsx
import { Something } from './File1';
import { Something1, Something2 } from './File2';
interface IReadProperty {
something: Something;
};
const ReadProperty: React.SFC<IReadProperty> = ({ something }) => {
// here i can access to property typeName. No problem here.
something.typeName // Type1 | Type2 | ... Infinite
...do some stuff
}
interface IRenderComponent {
something: Something;
}
const RenderComponent: React.SFC<IRenderComponent> = ({ something }) => {
// i need do some stuff here before render "something" component
// here i get an error when i try render the component
return <something />;
}
const Main: React.SFC = () => {
return (
<div>
<ReadProperty something={Something1} />
<RenderComponent something={Something1} />
</div>
);
}
but when i try to render the component in RenderComponent, i get the follow error: TS2604: JSX element type 'something' does not have any construct or call signatures.
What is wrong here? i defined type 'something' as abstract Class Something because i can define infinite Classes that extend from Something, so i can't define using: something: Something1 | Something2 | Something50 ...;
here is an example that i trying to do: https://codesandbox.io/s/18yzvkx8jj
javascript reactjs typescript types
I have an abstract class in "File1":
// File1.tsx
import * as React from 'react';
export interface IProps {
prop1: string;
prop2: number;
}
export abstract class Something extends React.Component<IProps> {
public typeName: string;
}
then, in other file (File2) i define infinite classes extending from abstract class Something:
// File2.tsx
import { Something } from './File1';
export class Something1 extends Something {
public typeName: string = 'Type1';
public render() {
return <div>Something 1</div>
}
}
export class Something2 extends Something {
public typeName: string = 'Type2';
public render() {
return <div>Something 2</div>
}
}
Now, here is my problem:
In a 3rd File, i import the classes defined before (Something1 or Something2) and then i passing this class to 2 different components: ReadProperty and RenderComponent. In the first component i need accessing to the property typeName of the class and do some stuff and in the second file i need render that class:
// File3.tsx
import { Something } from './File1';
import { Something1, Something2 } from './File2';
interface IReadProperty {
something: Something;
};
const ReadProperty: React.SFC<IReadProperty> = ({ something }) => {
// here i can access to property typeName. No problem here.
something.typeName // Type1 | Type2 | ... Infinite
...do some stuff
}
interface IRenderComponent {
something: Something;
}
const RenderComponent: React.SFC<IRenderComponent> = ({ something }) => {
// i need do some stuff here before render "something" component
// here i get an error when i try render the component
return <something />;
}
const Main: React.SFC = () => {
return (
<div>
<ReadProperty something={Something1} />
<RenderComponent something={Something1} />
</div>
);
}
but when i try to render the component in RenderComponent, i get the follow error: TS2604: JSX element type 'something' does not have any construct or call signatures.
What is wrong here? i defined type 'something' as abstract Class Something because i can define infinite Classes that extend from Something, so i can't define using: something: Something1 | Something2 | Something50 ...;
here is an example that i trying to do: https://codesandbox.io/s/18yzvkx8jj
javascript reactjs typescript types
javascript reactjs typescript types
edited Nov 23 '18 at 16:48
Guillermo Puente Sandoval
asked Nov 23 '18 at 15:12
Guillermo Puente SandovalGuillermo Puente Sandoval
32
32
Welcome to StackOverflow - just wanted to say nice job on a great first question! Appreciate that you described the problem in detail and gave all of the code needed to reproduce the issue.
– ethan.roday
Nov 23 '18 at 15:48
add a comment |
Welcome to StackOverflow - just wanted to say nice job on a great first question! Appreciate that you described the problem in detail and gave all of the code needed to reproduce the issue.
– ethan.roday
Nov 23 '18 at 15:48
Welcome to StackOverflow - just wanted to say nice job on a great first question! Appreciate that you described the problem in detail and gave all of the code needed to reproduce the issue.
– ethan.roday
Nov 23 '18 at 15:48
Welcome to StackOverflow - just wanted to say nice job on a great first question! Appreciate that you described the problem in detail and gave all of the code needed to reproduce the issue.
– ethan.roday
Nov 23 '18 at 15:48
add a comment |
2 Answers
2
active
oldest
votes
The issue is that in your definition of IRenderComponent
, you're saying that something
is an instance of Something
, whereas what you want is a constructor type. One other thing is that React generally complains when you try to instantiate components with lowercase names. Try this:
interface IRenderComponent {
Something: new (props: IProps) => Something1;
};
const RenderComponent: React.SFC<IRenderComponent> = ({ Something }) => {
return <Something prop1="foo" prop2={3} />;
}
For IReadProperty
, it looks like you do want an instance of Something
(since you want to access typeName
, which is an instance property). However, you can't actually pass an instantiated component:
<ReadProperty something={<Something1 prop1="" prop2={3} />;} /> //Error
This is because <Something1 ... />
isn't actually an instance of Something1
- it's an instance of JSX.Element
. You could pass an instance of Something1
, like this:
<ReadProperty something={new Something1({prop1: "", prop2: 3})} />
But I imagine that's not what you want, since you can't actually use the resulting instance in rendering.
The best way to address the IReadProperty
issue depends on what you're actually trying to accomplish. In general, React favors composition over inheritance and reflection, so it might be easier to consider how to achieve your goal by starting with base components and composing them, or using higher-order components.
I'm still getting errors, here is an example: codesandbox.io/s/18yzvkx8jj
– Guillermo Puente Sandoval
Nov 23 '18 at 16:47
It looks like you changed the casing on the prop name, but didn't change theIRenderComponent
definition. Try changing line 19 toSomething: new (props: IProps) => Something;
.
– ethan.roday
Nov 23 '18 at 23:15
I also added more details aboutIReadProperty
as well. Hope it helps!
– ethan.roday
Nov 23 '18 at 23:27
thanks for the help friend!
– Guillermo Puente Sandoval
Nov 26 '18 at 13:55
add a comment |
- Make sure that you have
jsx:react
intsconfig.json
- Make sure that you have consistent version of
react
react-dom
@types/react
and@types/react-dom
package versions.
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%2f53449101%2ftypescript-type-definition-ts2604-jsx-element-type-something-does-not-have-a%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The issue is that in your definition of IRenderComponent
, you're saying that something
is an instance of Something
, whereas what you want is a constructor type. One other thing is that React generally complains when you try to instantiate components with lowercase names. Try this:
interface IRenderComponent {
Something: new (props: IProps) => Something1;
};
const RenderComponent: React.SFC<IRenderComponent> = ({ Something }) => {
return <Something prop1="foo" prop2={3} />;
}
For IReadProperty
, it looks like you do want an instance of Something
(since you want to access typeName
, which is an instance property). However, you can't actually pass an instantiated component:
<ReadProperty something={<Something1 prop1="" prop2={3} />;} /> //Error
This is because <Something1 ... />
isn't actually an instance of Something1
- it's an instance of JSX.Element
. You could pass an instance of Something1
, like this:
<ReadProperty something={new Something1({prop1: "", prop2: 3})} />
But I imagine that's not what you want, since you can't actually use the resulting instance in rendering.
The best way to address the IReadProperty
issue depends on what you're actually trying to accomplish. In general, React favors composition over inheritance and reflection, so it might be easier to consider how to achieve your goal by starting with base components and composing them, or using higher-order components.
I'm still getting errors, here is an example: codesandbox.io/s/18yzvkx8jj
– Guillermo Puente Sandoval
Nov 23 '18 at 16:47
It looks like you changed the casing on the prop name, but didn't change theIRenderComponent
definition. Try changing line 19 toSomething: new (props: IProps) => Something;
.
– ethan.roday
Nov 23 '18 at 23:15
I also added more details aboutIReadProperty
as well. Hope it helps!
– ethan.roday
Nov 23 '18 at 23:27
thanks for the help friend!
– Guillermo Puente Sandoval
Nov 26 '18 at 13:55
add a comment |
The issue is that in your definition of IRenderComponent
, you're saying that something
is an instance of Something
, whereas what you want is a constructor type. One other thing is that React generally complains when you try to instantiate components with lowercase names. Try this:
interface IRenderComponent {
Something: new (props: IProps) => Something1;
};
const RenderComponent: React.SFC<IRenderComponent> = ({ Something }) => {
return <Something prop1="foo" prop2={3} />;
}
For IReadProperty
, it looks like you do want an instance of Something
(since you want to access typeName
, which is an instance property). However, you can't actually pass an instantiated component:
<ReadProperty something={<Something1 prop1="" prop2={3} />;} /> //Error
This is because <Something1 ... />
isn't actually an instance of Something1
- it's an instance of JSX.Element
. You could pass an instance of Something1
, like this:
<ReadProperty something={new Something1({prop1: "", prop2: 3})} />
But I imagine that's not what you want, since you can't actually use the resulting instance in rendering.
The best way to address the IReadProperty
issue depends on what you're actually trying to accomplish. In general, React favors composition over inheritance and reflection, so it might be easier to consider how to achieve your goal by starting with base components and composing them, or using higher-order components.
I'm still getting errors, here is an example: codesandbox.io/s/18yzvkx8jj
– Guillermo Puente Sandoval
Nov 23 '18 at 16:47
It looks like you changed the casing on the prop name, but didn't change theIRenderComponent
definition. Try changing line 19 toSomething: new (props: IProps) => Something;
.
– ethan.roday
Nov 23 '18 at 23:15
I also added more details aboutIReadProperty
as well. Hope it helps!
– ethan.roday
Nov 23 '18 at 23:27
thanks for the help friend!
– Guillermo Puente Sandoval
Nov 26 '18 at 13:55
add a comment |
The issue is that in your definition of IRenderComponent
, you're saying that something
is an instance of Something
, whereas what you want is a constructor type. One other thing is that React generally complains when you try to instantiate components with lowercase names. Try this:
interface IRenderComponent {
Something: new (props: IProps) => Something1;
};
const RenderComponent: React.SFC<IRenderComponent> = ({ Something }) => {
return <Something prop1="foo" prop2={3} />;
}
For IReadProperty
, it looks like you do want an instance of Something
(since you want to access typeName
, which is an instance property). However, you can't actually pass an instantiated component:
<ReadProperty something={<Something1 prop1="" prop2={3} />;} /> //Error
This is because <Something1 ... />
isn't actually an instance of Something1
- it's an instance of JSX.Element
. You could pass an instance of Something1
, like this:
<ReadProperty something={new Something1({prop1: "", prop2: 3})} />
But I imagine that's not what you want, since you can't actually use the resulting instance in rendering.
The best way to address the IReadProperty
issue depends on what you're actually trying to accomplish. In general, React favors composition over inheritance and reflection, so it might be easier to consider how to achieve your goal by starting with base components and composing them, or using higher-order components.
The issue is that in your definition of IRenderComponent
, you're saying that something
is an instance of Something
, whereas what you want is a constructor type. One other thing is that React generally complains when you try to instantiate components with lowercase names. Try this:
interface IRenderComponent {
Something: new (props: IProps) => Something1;
};
const RenderComponent: React.SFC<IRenderComponent> = ({ Something }) => {
return <Something prop1="foo" prop2={3} />;
}
For IReadProperty
, it looks like you do want an instance of Something
(since you want to access typeName
, which is an instance property). However, you can't actually pass an instantiated component:
<ReadProperty something={<Something1 prop1="" prop2={3} />;} /> //Error
This is because <Something1 ... />
isn't actually an instance of Something1
- it's an instance of JSX.Element
. You could pass an instance of Something1
, like this:
<ReadProperty something={new Something1({prop1: "", prop2: 3})} />
But I imagine that's not what you want, since you can't actually use the resulting instance in rendering.
The best way to address the IReadProperty
issue depends on what you're actually trying to accomplish. In general, React favors composition over inheritance and reflection, so it might be easier to consider how to achieve your goal by starting with base components and composing them, or using higher-order components.
edited Nov 23 '18 at 23:26
answered Nov 23 '18 at 15:46
ethan.rodayethan.roday
1,150720
1,150720
I'm still getting errors, here is an example: codesandbox.io/s/18yzvkx8jj
– Guillermo Puente Sandoval
Nov 23 '18 at 16:47
It looks like you changed the casing on the prop name, but didn't change theIRenderComponent
definition. Try changing line 19 toSomething: new (props: IProps) => Something;
.
– ethan.roday
Nov 23 '18 at 23:15
I also added more details aboutIReadProperty
as well. Hope it helps!
– ethan.roday
Nov 23 '18 at 23:27
thanks for the help friend!
– Guillermo Puente Sandoval
Nov 26 '18 at 13:55
add a comment |
I'm still getting errors, here is an example: codesandbox.io/s/18yzvkx8jj
– Guillermo Puente Sandoval
Nov 23 '18 at 16:47
It looks like you changed the casing on the prop name, but didn't change theIRenderComponent
definition. Try changing line 19 toSomething: new (props: IProps) => Something;
.
– ethan.roday
Nov 23 '18 at 23:15
I also added more details aboutIReadProperty
as well. Hope it helps!
– ethan.roday
Nov 23 '18 at 23:27
thanks for the help friend!
– Guillermo Puente Sandoval
Nov 26 '18 at 13:55
I'm still getting errors, here is an example: codesandbox.io/s/18yzvkx8jj
– Guillermo Puente Sandoval
Nov 23 '18 at 16:47
I'm still getting errors, here is an example: codesandbox.io/s/18yzvkx8jj
– Guillermo Puente Sandoval
Nov 23 '18 at 16:47
It looks like you changed the casing on the prop name, but didn't change the
IRenderComponent
definition. Try changing line 19 to Something: new (props: IProps) => Something;
.– ethan.roday
Nov 23 '18 at 23:15
It looks like you changed the casing on the prop name, but didn't change the
IRenderComponent
definition. Try changing line 19 to Something: new (props: IProps) => Something;
.– ethan.roday
Nov 23 '18 at 23:15
I also added more details about
IReadProperty
as well. Hope it helps!– ethan.roday
Nov 23 '18 at 23:27
I also added more details about
IReadProperty
as well. Hope it helps!– ethan.roday
Nov 23 '18 at 23:27
thanks for the help friend!
– Guillermo Puente Sandoval
Nov 26 '18 at 13:55
thanks for the help friend!
– Guillermo Puente Sandoval
Nov 26 '18 at 13:55
add a comment |
- Make sure that you have
jsx:react
intsconfig.json
- Make sure that you have consistent version of
react
react-dom
@types/react
and@types/react-dom
package versions.
add a comment |
- Make sure that you have
jsx:react
intsconfig.json
- Make sure that you have consistent version of
react
react-dom
@types/react
and@types/react-dom
package versions.
add a comment |
- Make sure that you have
jsx:react
intsconfig.json
- Make sure that you have consistent version of
react
react-dom
@types/react
and@types/react-dom
package versions.
- Make sure that you have
jsx:react
intsconfig.json
- Make sure that you have consistent version of
react
react-dom
@types/react
and@types/react-dom
package versions.
answered Nov 23 '18 at 15:18
Dmitriy KovalenkoDmitriy Kovalenko
1,269622
1,269622
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%2f53449101%2ftypescript-type-definition-ts2604-jsx-element-type-something-does-not-have-a%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
Welcome to StackOverflow - just wanted to say nice job on a great first question! Appreciate that you described the problem in detail and gave all of the code needed to reproduce the issue.
– ethan.roday
Nov 23 '18 at 15:48