Question

我对TypeScript和React非常陌生，所以对任何不正确或令人困惑的术语表示歉意。基本上这就是我所看到的：

<MyComponent someNumber="40" />

someNumber是定义为number的属性，但我注意到以下行为：

如果我传递非数字值，例如<MyComponent someNumber="foo" />这仍然可以编译但在运行时爆炸
如果我没有传递任何价值，例如<MyComponent />即使someNumber

理想情况下，这两种情况应该无法编译，但我没有看到这样做的方法。如果有帮助的话，我会使用TypeScript 2.0.6。

这是我的tsconfig.json：

{
  "compilerOptions": {
    "outDir": "./dist",
    "allowJs": false,
    "target": "es6",
    "module": "commonjs",
    "jsx": "react"
  },
  "include": [
    "./src/**/*"
  ],
  "files": [
    "typings/index.d.ts"
  ]
}

Answer 1

如果您为组件道具定义了一个接口，那么编译器会为您检查所有这些：

interface MyProps {
    someNumber: number;
}
interface MyState {}
class MyComponent extends React.Component<MyProps, MyState> {}

let a1 = <MyComponent someNumber={ 40 } />; // fine
let a2 = <MyComponent />; // Error: Property 'someNumber' is missing in type ...
let a3 = <MyComponent someNumber="40" />; // Error: Type 'string' is not assignable to type 'number'

修改

该问题与OP正在使用的反应定义文件有关使用以下方法安装定义：

npm install @types/react

解决了这个问题。

TypeScript可以使React组件实例化类型安全吗？

1 个答案:

修改