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

this的类型为props，因此props.value可以是字符串，也可以是正确的对象

any

这里的孩子道具总是不确定的

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

注意：Typescript仅执行编译时类型检查，如果您在Typescript的字符串类型中获取数字，则在运行时它将通过。

Answer 2

您需要使用React.FC键入组件并传递interface以与react道具合并

interface ChildProps {
  value: string;
}

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

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

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

2 个答案: