TypeScript函数组件Props类型可否解构？如何解决传参属性缺失报错

问题根因澄清 #

你的编译报错和函数参数是否解构没有任何关系，报错是因为你调用<ShowA />时仅传入了a属性，没有传入类型DataType要求的必填属性b。哪怕你用你最后提到的非解构写法定义组件，调用时只传a依然会触发完全相同的报错。

解决方案 #

方案1：直接展开完整数据传参（最推荐） #

既然你确认实际场景下data一定包含完整的DataType字段，直接把整个对象展开传给组件即可，既不用逐个写属性，也完全符合你的单行组件写法要求：

// 组件定义保持你想要的解构单行写法
const ShowA = ({ a }: DataType) => <p>{a}</p>;

// 调用时直接展开完整data，不会缺属性
const Component = () => {
  const data = { a: "foo", b: "bar" };
  return <ShowA {...data} />;
};

方案2：用Pick提取组件实际用到的属性 #

如果你确实不想在调用时传没用的b，又不想修改原DataType的定义，可以用TS内置工具类型Pick筛选出组件实际用到的字段作为props类型，依然可以保持单行解构写法：

// 仅从DataType中Pick出用到的a属性作为props类型
const ShowA = ({ a }: Pick<DataType, 'a'>) => <p>{a}</p>;

// 调用时只传a也不会报错
const Component = () => {
  const data = { a: "foo", b: "bar" };
  return <ShowA a={data.a} />;
};

方案3：类型断言兜底 #

如果以上两种都不符合你的场景，也可以在调用时用类型断言告诉TS你传入的内容符合DataType要求，不过这种方式会跳过类型校验，不优先推荐：

<ShowA a={data.a} b={data.b} as DataType />

内容的提问来源于stack exchange，提问作者jhenhapl