'Element' 类型的参数不能分配给 'ReactElement<any> 类型的参数答案

【问题标题】：Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'Element' 类型的参数不能分配给 'ReactElement<any> 类型的参数
【发布时间】：2017-06-21 13:51:07
【问题描述】：

这段代码：

import * as React from 'react';                                                                                              

const Component = () => <div/>;                                                  

function culprit<P>(node: React.ReactElement<P>) {
  console.log(node);
}

culprit(<Component/>);

...使用 TypeScript 编译时会产生此编译错误：

error TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'.
  Type 'null' is not assignable to type 'ReactElement<any>

仅当 strictNullChecks TypeScript 编译标志设置为 true 时才会发生这种情况。

是的，我可以禁用该标志，但我希望启用它以增加编译时检查/安全性。

如果我把最后一行改成这样：

culprit( (<Component/> as React.ReactElement<any>) );

...它适用于设置为 true 的标志。

我最近尝试在一个 React 项目中从“普通”JavaScript 迁移到 TypeScript，这会导致我的所有测试出错，因此将所有 TypeScript 类型断言添加到测试代码中的所有这些事件中会很痛苦。

这是一个错误，还是我别无选择？

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

如果你的组件中有 JSX 或者组件测试文件必须有 .tsx 作为您的文件扩展名。我的代码没有编译，因为我有 .ts 文件扩展名。当我将其重命名为 .tsx/jsx 时，它开始运行良好！

还请注意，我使用的是 Typescript，因此我将其重命名为 .tsx。如果您使用的是 ES6，请将其重命名为 .jsx。

【讨论】：

哦，天哪，我真的对此视而不见，如此简单。谢谢你，国王。

【解决方案2】：

这显然是在 15.0.5 React 类型定义中引入的问题。如果换成 15.0.4 应该没问题。

看到这个问题：https://github.com/DefinitelyTyped/DefinitelyTyped/pull/14284

【讨论】：

我已经尝试了@types/react 15.0.6、15.0.4、15.0.0 版本，但不幸的是，它们仍然对我产生了问题。
版本 0.14.57 有效，但那是在引入 | null 的联合类型之前（这就是你似乎一直试图让我接受的）。然而 React 应该允许渲染函数返回 null，所以我认为 React 类型定义没有错，我认为所有不允许 null 的类型定义都需要更新。我从 Enzyme.js 得到了这个 culprit 函数签名，所以它的类型定义需要更新。
15.0.4 解决了我的问题，但我想你一定是在做一些不同的事情（或者在你的设置中有不同的事情）。