打字脚本"TS2339：属性'X'在类型'Y'"错误中不存在，即使定义了类型

Question

在我的代码中，我试图访问React.ReactElement数组元素的type属性。即使我已经定义了包含React.ReactElement子数组，我得到一个错误，试图访问数组元素的type属性，除非我将数组元素转换为类型React.ReactElement。

下面是我的代码:

const getChildren = (
children: (React.ReactChild | React.ReactElement)[]
) => {
console.log((children[0] as React.ReactElement).type)  // this line works
console.log(children[0].type)  // this line breaks
}

这里是我得到的错误:

Property 'type' does not exist on type 'ReactChild | ReactElement<any, string | JSXElementConstructor<any>>'.
Property 'type' does not exist on type 'string'.  TS2339

如何解决这个问题?

Answer 1

我不熟悉React，但我假设React.ReactChild没有名为type的属性，这就是你得到错误的原因。

Typescript编译器不知道你的项目是哪一种类型(React.ReactChild或React.ReactElement)，除非你显式地告诉编译器是哪一种。这就是为什么函数中的第一行可以工作，因为您显式地告诉编译器函数中传递的参数是React.ReactElement[]，或者至少数组中的第一个元素是React.ReactElement类型的参数。

如果您知道数组中的元素将始终是React.ReactElement类型，那么我建议您将函数参数类型更改为

const getChildren = (children: React.ReactElement[]) => {/* ... */}

否则，您应该检查它是哪个类型，以避免运行时错误:

const getChildren = (children: (React.ReactChild | React.ReactElement)[]) => {
if (children[0] instanceof React.ReactChild) {
console.log(children[0].type);
}
}