打字稿没有捕捉到类型不匹配（反应 TSX）

Question

这里是 TypeScript 和 React 新手。为什么 TypeScript 不会因为 constructor(foo: string) 输入类型与 {foo: string} 不匹配而对我大喊大叫？（注意：其中一个是字符串，另一个是对象。）

TypeScript 会很乐意编译它，当然生成的代码会崩溃。我试图打开 tsconfig.json 必须提供的所有选项。我正在使用打字稿 2.5.3.

是否有任何方法（例如 typescript 配置、代码更改或其他任何方法）来强化代码以避免这种情况？任何想法表示赞赏，我的目标是编写稳定的代码。

从 'react' 导入 * 作为 React；从 'react-dom';

导入 * 作为 ReactDOM

class App extends React.Component<{ foo: string }, { foo: string }> {
    // expects string
    constructor(foo: string) {
        super();
        this.state = {
            foo: foo
        }
    }
    render() {
        return <div>{this.state.foo}</div>
    }
}

// Passes object { foo: string }
ReactDOM.render(<App foo="foo" />, document.getElementById('root'))

编辑：简化问题

Answer 1

您的问题：

// WRONG, to work, it should be:
//   constructor(props Props) {
constructor(foo: string, bar: string) {
  super();
}

无效，因为您始终可以继承 class 并提供自己的构造函数：

class A {
  constructor(a: number) { }
}

class B extends A {
  // ALLOWED
  constructor(b: string) {
    super(123)
  }
}

Answer 2

如果您记得将 props 传递给 super()，就会收到您正在寻找的编译器投诉。这只是扩展 React.Component 和 should always be done.

的一部分

打字稿没有捕捉到类型不匹配（反应 TSX）

typescript not catching type mismatch (react TSX)

typescript

reactjs

react-tsx