React + Typescript错误

Question

我刚开始学习React并认为与TS一起学习它可能是一个好主意，但我一直在收到这个错误，并且无法找到解决方法。

[ts] Property 'todos' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ToDoList> & Readonly<{ children?: ReactNode; }> & ...'.

这是我的代码：

const TODOS: object[] =  [
    {
        id: 1,
        name: 'Todo 1'
    },
    {
        id: 2,
        name: 'Todo 2'
    }
]

const App: React.SFC = (): JSX.Element => {
    return (
        <ToDoList todos={TODOS}/>
    )
}

interface IProps {
    readonly todos: object[]
}

class ToDoList extends React.Component<{},IProps> {
    static props: IProps

    render() {
      return (
        <div>{this.props.todos.map((item: any) => {
            return <h1>item.name</h1>
        })}</div>
    )
}

}

export default App;

有什么我想念的吗？

Answer 1

你的通用参数到React.Component的顺序是错误的，第一个参数应该是道具。改成

class ToDoList extends React.Component<IProps> { }

如果不使用第二个参数，则不必指定它。

Answer 2

第一个通用参数是props，第二个是state。更改：

class ToDoList extends React.Component<{},IProps> {

至

class ToDoList extends React.Component<IProps,{}> {