TypeScript Property 'props' does not exist
I have this .tsx file
import React, { Component } from 'react';
export class SidebarItem extends Component {
constructor (props) {
super(props);
}
render () {
return (<li>{this.props.children}</li>);
}
}
However, TypeScript throws this error:
error TS2339: Property 'props' does not exist on type 'SidebarItem'.
typescript react-jsx
asked Jun 25 '17 at 16:22
Knight YoshiKnight Yoshi
506921
add a comment |
I have this .tsx file
import React, { Component } from 'react';
export class SidebarItem extends Component {
constructor (props) {
super(props);
}
render () {
return (<li>{this.props.children}</li>);
}
}
However, TypeScript throws this error:
error TS2339: Property 'props' does not exist on type 'SidebarItem'.
typescript react-jsx
asked Jun 25 '17 at 16:22
Knight YoshiKnight Yoshi
506921
becausethis.props.childrenis suppose to be automatically set by React. It's how you access what was passed to the component. <SidebarItem> <Link to={path}> {path} </Link> </SidebarItem>
– Knight Yoshi
Jun 25 '17 at 16:42
Alsoconstructor (props) { super(props); this.props = props; }throws the error that 'props' doesn't exist on the SidebarItem
– Knight Yoshi
Jun 25 '17 at 16:42
3
Did you find an answer yet? I have the same problem on tsc v2.3.4. Do you have a good link for writing React Class Component with TypeScript?'
– olefrank
Oct 20 '17 at 9:32
1
Nope. I gave up trying to use TypeScript with React.
– Knight Yoshi
Oct 20 '17 at 13:25
add a comment |
I have this .tsx file
import React, { Component } from 'react';
export class SidebarItem extends Component {
constructor (props) {
super(props);
}
render () {
return (<li>{this.props.children}</li>);
}
}
However, TypeScript throws this error:
error TS2339: Property 'props' does not exist on type 'SidebarItem'.
typescript react-jsx
asked Jun 25 '17 at 16:22
Knight YoshiKnight Yoshi
506921
I have this .tsx file
import React, { Component } from 'react';
export class SidebarItem extends Component {
constructor (props) {
super(props);
}
render () {
return (<li>{this.props.children}</li>);
}
}
However, TypeScript throws this error:
error TS2339: Property 'props' does not exist on type 'SidebarItem'.
typescript react-jsx
typescript react-jsx
asked Jun 25 '17 at 16:22
Knight YoshiKnight Yoshi
506921
asked Jun 25 '17 at 16:22
Knight YoshiKnight Yoshi
506921
asked Jun 25 '17 at 16:22
Knight YoshiKnight Yoshi
506921
asked Jun 25 '17 at 16:22
Knight YoshiKnight Yoshi
506921
asked Jun 25 '17 at 16:22
Knight YoshiKnight Yoshi
506921
506921
becausethis.props.childrenis suppose to be automatically set by React. It's how you access what was passed to the component. <SidebarItem> <Link to={path}> {path} </Link> </SidebarItem>
– Knight Yoshi
Jun 25 '17 at 16:42
Alsoconstructor (props) { super(props); this.props = props; }throws the error that 'props' doesn't exist on the SidebarItem
– Knight Yoshi
Jun 25 '17 at 16:42
3
Did you find an answer yet? I have the same problem on tsc v2.3.4. Do you have a good link for writing React Class Component with TypeScript?'
– olefrank
Oct 20 '17 at 9:32
1
Nope. I gave up trying to use TypeScript with React.
– Knight Yoshi
Oct 20 '17 at 13:25
add a comment |
becausethis.props.childrenis suppose to be automatically set by React. It's how you access what was passed to the component. <SidebarItem> <Link to={path}> {path} </Link> </SidebarItem>
– Knight Yoshi
Jun 25 '17 at 16:42
Alsoconstructor (props) { super(props); this.props = props; }throws the error that 'props' doesn't exist on the SidebarItem
– Knight Yoshi
Jun 25 '17 at 16:42
3
Did you find an answer yet? I have the same problem on tsc v2.3.4. Do you have a good link for writing React Class Component with TypeScript?'
– olefrank
Oct 20 '17 at 9:32
1
Nope. I gave up trying to use TypeScript with React.
– Knight Yoshi
Oct 20 '17 at 13:25
because
this.props.children is suppose to be automatically set by React. It's how you access what was passed to the component. <SidebarItem> <Link to={path}> {path} </Link> </SidebarItem>– Knight Yoshi
Jun 25 '17 at 16:42
because
this.props.children is suppose to be automatically set by React. It's how you access what was passed to the component. <SidebarItem> <Link to={path}> {path} </Link> </SidebarItem>– Knight Yoshi
Jun 25 '17 at 16:42
Also
constructor (props) { super(props); this.props = props; } throws the error that 'props' doesn't exist on the SidebarItem– Knight Yoshi
Jun 25 '17 at 16:42
Also
constructor (props) { super(props); this.props = props; } throws the error that 'props' doesn't exist on the SidebarItem– Knight Yoshi
Jun 25 '17 at 16:42
3
3
Did you find an answer yet? I have the same problem on tsc v2.3.4. Do you have a good link for writing React Class Component with TypeScript?'
– olefrank
Oct 20 '17 at 9:32
Did you find an answer yet? I have the same problem on tsc v2.3.4. Do you have a good link for writing React Class Component with TypeScript?'
– olefrank
Oct 20 '17 at 9:32
1
1
Nope. I gave up trying to use TypeScript with React.
– Knight Yoshi
Oct 20 '17 at 13:25
Nope. I gave up trying to use TypeScript with React.
– Knight Yoshi
Oct 20 '17 at 13:25
add a comment |
4 Answers
4
active
oldest
votes
The solution is to install the React Types defintions
yarn add -DE @types/react
More details from the typescript docs and from the types repo
On a side note I had to restart vscode for the linting to kick in properly.
answered Jan 15 '18 at 9:30
stilllifestilllife
7311926
add a comment |
You can try the following way of writing a React Comp.
interface SidebarItemProps
{
children: any
}
class SidebarItem extends React.Component<SidebarItemProps, any> {
//your class methods
}
More about using React in TypeScript
answered Jun 25 '17 at 17:38
SteveKitakisSteveKitakis
822
add a comment |
TypeScript follows the ES-module specification but React follows CommonJS.
This article touches on that among other things.
Importing React like this will fix this problem:
import * as React from 'react';
export class SidebarItem extends React.Component {
constructor (props) {
super(props);
}
render () {
return (<li>{this.props.children}</li>);
}
}
answered Nov 23 '18 at 18:43
JaapJaap
865
Thanks Jaap. Good work. Upgrading from typescript 2.3 to 3.2 and this fixed the VS compiler issues.
– Benj Sanders
Feb 5 at 21:13
add a comment |
If your component has no state, you don't have to use a class at all. You can also use a stateless react component (SFC) as answered for this question.
const MyStatelessComponent : React.StatelessComponent<{}> = props =>
<li>{props.children}</li>;
Or if your markup is getting huge:
const MyStatelessComponent : React.StatelessComponent<{}> = props => {
return <li>{props.children}</li>;
}
answered Jun 26 '17 at 7:11
LeoneLeone
731813
Although this is valid, and certainly not a bad piece of advise, it doesn't really answer the question. This solution just avoids the problem, instead of solving it.
– Stephan Bijzitter
Jan 15 '18 at 9:43
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%2f44748286%2ftypescript-property-props-does-not-exist%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
The solution is to install the React Types defintions
yarn add -DE @types/react
More details from the typescript docs and from the types repo
On a side note I had to restart vscode for the linting to kick in properly.
answered Jan 15 '18 at 9:30
stilllifestilllife
7311926
add a comment |
The solution is to install the React Types defintions
yarn add -DE @types/react
More details from the typescript docs and from the types repo
On a side note I had to restart vscode for the linting to kick in properly.
answered Jan 15 '18 at 9:30
stilllifestilllife
7311926
add a comment |
The solution is to install the React Types defintions
yarn add -DE @types/react
More details from the typescript docs and from the types repo
On a side note I had to restart vscode for the linting to kick in properly.
answered Jan 15 '18 at 9:30
stilllifestilllife
7311926
The solution is to install the React Types defintions
yarn add -DE @types/react
More details from the typescript docs and from the types repo
On a side note I had to restart vscode for the linting to kick in properly.
answered Jan 15 '18 at 9:30
stilllifestilllife
7311926
edited Jan 15 '18 at 9:38
answered Jan 15 '18 at 9:30
stilllifestilllife
7311926
answered Jan 15 '18 at 9:30
stilllifestilllife
7311926
answered Jan 15 '18 at 9:30
stilllifestilllife
7311926
7311926
add a comment |
add a comment |
You can try the following way of writing a React Comp.
interface SidebarItemProps
{
children: any
}
class SidebarItem extends React.Component<SidebarItemProps, any> {
//your class methods
}
More about using React in TypeScript
answered Jun 25 '17 at 17:38
SteveKitakisSteveKitakis
822
add a comment |
You can try the following way of writing a React Comp.
interface SidebarItemProps
{
children: any
}
class SidebarItem extends React.Component<SidebarItemProps, any> {
//your class methods
}
More about using React in TypeScript
answered Jun 25 '17 at 17:38
SteveKitakisSteveKitakis
822
add a comment |
You can try the following way of writing a React Comp.
interface SidebarItemProps
{
children: any
}
class SidebarItem extends React.Component<SidebarItemProps, any> {
//your class methods
}
More about using React in TypeScript
answered Jun 25 '17 at 17:38
SteveKitakisSteveKitakis
822
You can try the following way of writing a React Comp.
interface SidebarItemProps
{
children: any
}
class SidebarItem extends React.Component<SidebarItemProps, any> {
//your class methods
}
More about using React in TypeScript
answered Jun 25 '17 at 17:38
SteveKitakisSteveKitakis
822
answered Jun 25 '17 at 17:38
SteveKitakisSteveKitakis
822
answered Jun 25 '17 at 17:38
SteveKitakisSteveKitakis
822
answered Jun 25 '17 at 17:38
SteveKitakisSteveKitakis
822
822
add a comment |
add a comment |
TypeScript follows the ES-module specification but React follows CommonJS.
This article touches on that among other things.
Importing React like this will fix this problem:
import * as React from 'react';
export class SidebarItem extends React.Component {
constructor (props) {
super(props);
}
render () {
return (<li>{this.props.children}</li>);
}
}
answered Nov 23 '18 at 18:43
JaapJaap
865
Thanks Jaap. Good work. Upgrading from typescript 2.3 to 3.2 and this fixed the VS compiler issues.
– Benj Sanders
Feb 5 at 21:13
add a comment |
TypeScript follows the ES-module specification but React follows CommonJS.
This article touches on that among other things.
Importing React like this will fix this problem:
import * as React from 'react';
export class SidebarItem extends React.Component {
constructor (props) {
super(props);
}
render () {
return (<li>{this.props.children}</li>);
}
}
answered Nov 23 '18 at 18:43
JaapJaap
865
Thanks Jaap. Good work. Upgrading from typescript 2.3 to 3.2 and this fixed the VS compiler issues.
– Benj Sanders
Feb 5 at 21:13
add a comment |
TypeScript follows the ES-module specification but React follows CommonJS.
This article touches on that among other things.
Importing React like this will fix this problem:
import * as React from 'react';
export class SidebarItem extends React.Component {
constructor (props) {
super(props);
}
render () {
return (<li>{this.props.children}</li>);
}
}
answered Nov 23 '18 at 18:43
JaapJaap
865
TypeScript follows the ES-module specification but React follows CommonJS.
This article touches on that among other things.
Importing React like this will fix this problem:
import * as React from 'react';
export class SidebarItem extends React.Component {
constructor (props) {
super(props);
}
render () {
return (<li>{this.props.children}</li>);
}
}
answered Nov 23 '18 at 18:43
JaapJaap
865
edited Nov 23 '18 at 19:49
answered Nov 23 '18 at 18:43
JaapJaap
865
answered Nov 23 '18 at 18:43
JaapJaap
865
answered Nov 23 '18 at 18:43
JaapJaap
865
865
Thanks Jaap. Good work. Upgrading from typescript 2.3 to 3.2 and this fixed the VS compiler issues.
– Benj Sanders
Feb 5 at 21:13
add a comment |
Thanks Jaap. Good work. Upgrading from typescript 2.3 to 3.2 and this fixed the VS compiler issues.
– Benj Sanders
Feb 5 at 21:13
Thanks Jaap. Good work. Upgrading from typescript 2.3 to 3.2 and this fixed the VS compiler issues.
– Benj Sanders
Feb 5 at 21:13
Thanks Jaap. Good work. Upgrading from typescript 2.3 to 3.2 and this fixed the VS compiler issues.
– Benj Sanders
Feb 5 at 21:13
add a comment |
If your component has no state, you don't have to use a class at all. You can also use a stateless react component (SFC) as answered for this question.
const MyStatelessComponent : React.StatelessComponent<{}> = props =>
<li>{props.children}</li>;
Or if your markup is getting huge:
const MyStatelessComponent : React.StatelessComponent<{}> = props => {
return <li>{props.children}</li>;
}
answered Jun 26 '17 at 7:11
LeoneLeone
731813
Although this is valid, and certainly not a bad piece of advise, it doesn't really answer the question. This solution just avoids the problem, instead of solving it.
– Stephan Bijzitter
Jan 15 '18 at 9:43
add a comment |
If your component has no state, you don't have to use a class at all. You can also use a stateless react component (SFC) as answered for this question.
const MyStatelessComponent : React.StatelessComponent<{}> = props =>
<li>{props.children}</li>;
Or if your markup is getting huge:
const MyStatelessComponent : React.StatelessComponent<{}> = props => {
return <li>{props.children}</li>;
}
answered Jun 26 '17 at 7:11
LeoneLeone
731813
Although this is valid, and certainly not a bad piece of advise, it doesn't really answer the question. This solution just avoids the problem, instead of solving it.
– Stephan Bijzitter
Jan 15 '18 at 9:43
add a comment |
If your component has no state, you don't have to use a class at all. You can also use a stateless react component (SFC) as answered for this question.
const MyStatelessComponent : React.StatelessComponent<{}> = props =>
<li>{props.children}</li>;
Or if your markup is getting huge:
const MyStatelessComponent : React.StatelessComponent<{}> = props => {
return <li>{props.children}</li>;
}
answered Jun 26 '17 at 7:11
LeoneLeone
731813
If your component has no state, you don't have to use a class at all. You can also use a stateless react component (SFC) as answered for this question.
const MyStatelessComponent : React.StatelessComponent<{}> = props =>
<li>{props.children}</li>;
Or if your markup is getting huge:
const MyStatelessComponent : React.StatelessComponent<{}> = props => {
return <li>{props.children}</li>;
}
answered Jun 26 '17 at 7:11
LeoneLeone
731813
answered Jun 26 '17 at 7:11
LeoneLeone
731813
answered Jun 26 '17 at 7:11
LeoneLeone
731813
answered Jun 26 '17 at 7:11
LeoneLeone
731813
731813
Although this is valid, and certainly not a bad piece of advise, it doesn't really answer the question. This solution just avoids the problem, instead of solving it.
– Stephan Bijzitter
Jan 15 '18 at 9:43
add a comment |
Although this is valid, and certainly not a bad piece of advise, it doesn't really answer the question. This solution just avoids the problem, instead of solving it.
– Stephan Bijzitter
Jan 15 '18 at 9:43
Although this is valid, and certainly not a bad piece of advise, it doesn't really answer the question. This solution just avoids the problem, instead of solving it.
– Stephan Bijzitter
Jan 15 '18 at 9:43
Although this is valid, and certainly not a bad piece of advise, it doesn't really answer the question. This solution just avoids the problem, instead of solving it.
– Stephan Bijzitter
Jan 15 '18 at 9:43
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%2f44748286%2ftypescript-property-props-does-not-exist%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
because
this.props.childrenis suppose to be automatically set by React. It's how you access what was passed to the component. <SidebarItem> <Link to={path}> {path} </Link> </SidebarItem>– Knight Yoshi
Jun 25 '17 at 16:42
Also
constructor (props) { super(props); this.props = props; }throws the error that 'props' doesn't exist on the SidebarItem– Knight Yoshi
Jun 25 '17 at 16:42
3
Did you find an answer yet? I have the same problem on tsc v2.3.4. Do you have a good link for writing React Class Component with TypeScript?'
– olefrank
Oct 20 '17 at 9:32
1
Nope. I gave up trying to use TypeScript with React.
– Knight Yoshi
Oct 20 '17 at 13:25