使用TypeScript对函数组件属性默认值作出反应

Question

我在React函数组件和默认所需道具方面遇到问题。

以下是组件：

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

我应该能够在不传递消息的情况下使用它道具：

<Greeting />

但是，TypeScript引发类型错误属性“message”在类型“{}”中丢失，但在类型“Props”中是必需的：

下面是代码沙盒中的问题：https://codesandbox.io/s/still-microservice-lp7b5?fontsize=14

我不确定我是做错了什么，还是这是打字稿中的一个小故障？任何帮助都将不胜感激。

Answer 1

您的Props类型定义有一个必需的参数message，但是您将其视为可选参数。这也会在您收到的错误消息中引用

>

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

将错误消息理解为-您的类型道具具有所需的消息属性，但是，您提供的类型{}缺少该属性（将{}读取为未提供属性）

将定义更改为以下方式：

type Props = {
   message?: string; //< note the '?' at the end of property
};

现在，如果返回的组件没有特定的消息道具，那么它将默认为“你好吗？”