13

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'.
Audwin Oyong
  • 2,247
  • 3
  • 15
  • 32
Knight Yoshi
  • 924
  • 3
  • 11
  • 32
  • because `this.props.children` is suppose to be automatically set by React. It's how you access what was passed to the component. {path} – 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 09:32
  • 1
    Nope. I gave up trying to use TypeScript with React. – Knight Yoshi Oct 20 '17 at 13:25

4 Answers4

18

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.

stilllife
  • 1,776
  • 1
  • 18
  • 38
12

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>);
    }
}
Jaap
  • 316
  • 2
  • 6
  • Thanks Jaap. Good work. Upgrading from typescript 2.3 to 3.2 and this fixed the VS compiler issues. – Benj Sanders Feb 05 '19 at 21:13
  • If you have "allowSyntheticDefaultImports" as true in your tsconfig, you do not need to change your import since this option allows ES6 module imports even if there is no default import. So either way of importing is fine. For reference, as of writing, React exports like this: module.exports = React.default || React; – Logan Cundiff Jan 20 '22 at 14:53
6

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

SteveKitakis
  • 162
  • 2
0

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>;

}
Leone
  • 3,258
  • 3
  • 22
  • 28
  • 1
    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 09:43