使用TypeScript反应功能组件prop默认

Question

我在使用React函数组件时遇到麻烦，并且默认需要的道具。

以下是组件：

type Props = { message: string };
function Greeting({ message = "How are you?" }: Props) {
  return <p>{message}</p>;
}

我应该能够使用它而无需通过message道具：

<Greeting />

但是，TypeScript会引发类型错误类型“ {}”中缺少属性“消息”，但类型为“道具”中是必需的：

这是CodeSandbox中的问题：https://codesandbox.io/s/still-microservice-lp7b5?fontsize=14&hidenavigation=1&theme=dark

我不确定我做错了什么还是TypeScript中的小故障？任何帮助将不胜感激。

Answer 1

您的Props类型定义的必需自变量为message，但是您将其视为可选参数。您收到的错误消息中也引用了此信息

• 类型“ message”中缺少属性“ {}”，但类型“ Props”中必需

• 将错误消息理解为-您的type Props具有必填属性message，但是您提供的类型{}却丢失了它（读{{ 1}}（没有提供的属性）

---

将定义更改为以下方式：

{}

现在，如果返回的组件没有特定的type Props = { message?: string; //< note the '?' at the end of property }; 道具，它将默认为message