键入'字符串 | null' 不可分配给类型 'string | TypeScript 的未定义错误答案

【问题标题】：Type 'string | null' is not assignable to type 'string | undefined error with TypeScript键入'字符串 | null' 不可分配给类型 'string | TypeScript 的未定义错误
【发布时间】：2020-08-25 01:53:19
【问题描述】：

我有一个简单的标记代码，如下所示

<ListItemText title={details} />

我的应用程序正在使用打字稿，它在title={details} 上给出错误，就像

键入'字符串 | null' 不可分配给类型 'string | TypeScript 未定义错误

如何纠正？处理这个问题的正确方法是什么？

【问题讨论】：

我想在一个地方你设置了details = null或者你定义为const details: string | null？
确保details不能是null，只能是字符串或undefined。
@johannchopin 是的，正如你所说，正确的方法是什么？

标签： javascript typescript

【解决方案1】：

您必须简单地为空值提供一个占位符... 代码

<ListItemText title={details??""} />

它只会检查值是否为 null 而不会检查 falsy(null, undefined, NAN, "")，不要与 || 或运算符混合。如果details 为null，那么它会将空字符串（最终是字符串类型）传递给prop..

【讨论】：

这行得通，但编写这样的代码会使 TypeScript 毫无价值。
是的，但是您必须匹配输入和输出的类型，并且您没有提到您的类型。尝试在 TS 中避免这种方法。只需匹配这两种类型或通过在您的道具类型定义中执行 details?: string | null 将 null 类型添加到 details 道具，这样就可以了。

【解决方案2】：

您的问题是title 属性需要string | undefined 类型。所以（正如CherryDT 提到的）你需要确保details 将始终与title 来自同一类型。

你只需要声明它：

const details: string | undefined = ...

那么在您的情况下，您可能会遇到另一个错误，因为您将null 分配给details。如果是这种情况，只需分配 undefined 而不是 null。

【讨论】：