时间戳

首页 > 解决方案 > React Typescript - ReactNode 类型切割字符串文字

javascript - React Typescript - ReactNode 类型切割字符串文字

问题描述

假设我有一个带有接受字符串文字的 prop 的接口，如下所示：

interface IProps {
  icon?: "success" | "warning" | "error" | "info";
  ...
}

然后从字典中挑选图标。假设我也想接受一个自定义图标，我会将React.ReactNode类型添加到联合中：

interface IProps {
  icon?: "success" | "warning" | "error" | "info" | React.ReactNode;
  ...
}

添加后，图标道具的类型仅被剪切为 React.ReactNode 并且我失去了编辑器的所有帮助（例如，将图标道具传递给组件时）。

有没有办法更好地输入它，所以输入也保留了字符串文字？

标签： javascriptreactjstypescript

解决方案

发生这种情况的原因是这React.ReactNode是一个包含string. 因此，任何字符串现在都是合法的，就类型信息而言"success"，"warning", 等没有什么特别之处。

我确实知道一个技巧，它会使打字稿感到困惑，以至于它继续为各个字符串提供编辑器提示。string与其创建联合，不如创建联合(string & {})。每个字符串都将与 匹配(string & {})，但打字稿不会注意到 types "success"、"warning"等已被它淘汰。

例如：

type Example = "foo" | (string & {});
const test: Example = // when i type here, vscode gives me a hint for "foo", but any string is legal

所以要在你的情况下做同样的事情，你需要创建一个包含所有东西的联合React.ReactNode，减号string和加号(string & {})。以下应该可以解决问题：

interface IProps {
  icon?: "success" | "warning" | "error" | "info" | Exclude<React.ReactNode, string> | (string & {})
  ...
}

推荐阅读