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'.

回答1:

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.

回答2:

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

回答3:

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

回答4:

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

}

来源：https://stackoverflow.com/questions/44748286/typescript-property-props-does-not-exist

标签

typescript

react-jsx