为什么 TypeScript 不能对 React props 进行类型检查？

Question

为什么 TypeScript 不能对 React 属性进行类型检查？以下示例通过了 Typescript，即使它不正确：

import * as React from 'react';

type ChildProps = {
  value: string
}

const Child = (props:ChildProps) => (
  <div>{props.value}</div>
)

const Parent = props => (
  <Child {... props} />
)

const BadParent = <Parent />; // incorrect behavior: passes type check even though value is missing

虽然这段代码可以正常运行：

import * as React from 'react';

type ChildProps = {
  value: string
}

const Child = (props:ChildProps) => (
  <div>{props.value}</div>
)

const Parent = props => (
  <Child />         // correct behavior: throws type error
)

因此，Typescript 似乎知道应该将哪些类型传递给 Child 组件，但不知道如何从传入的 props 中解释类型。

我知道我可以更改 Parent 的函数签名以包含 ChildProps 参数类型，但我正在寻找一种方法来避免这样做，因为我需要在几个不同的模块中定义不同的 Parent，这意味着我每次都要导入 ChildProps 类型。

Answer 1

您需要使用React.FC 输入组件并传递interface 以与react props 合并

interface ChildProps {
  value: string;
}

const Child: React.FC<ChildProps> = props => (
  <div>{props.value}</div>
)

const Parent: React.FC = props => (
  <Child value="val" />
)

Answer 2

这里props 的类型是any 所以，props.value 可以是字符串，也可以是正确的对象

const Parent = props => (
  <Child value={props.value} />
)

这里的子道具总是未定义的，这是不正确的

const Parent = props => (
  <Child />
)

注意：Typescript 只做编译时类型检查，如果你在 typescript 的字符串类型中得到一个数字，在运行时它会通过。