如何在TS中实现类型安全的React HOC并支持传入任意额外props？

在React开发实践中，我们经常会定义带有若干明确必填props的HOC，但同时希望HOC的使用者能够按需传入任意自定义额外props，这类需求的JavaScript基础实现十分简单。我们可以通过解构赋值结合剩余参数语法定义HOC的入参，写法如下：

const MyHOC = ({requiredBoolean, requiredCallback, ...restProps}) => {
  // 组件内部逻辑
}

在组件返回逻辑中，先传入所有必填props，再通过展开运算符透传全部剩余props即可：

return (
  <SomeOtherComponent
    requiredBoolean={requiredBoolean}
    requiredCallback={requiredCallback}
    {...restProps}
  />
)

当前待解决的核心问题是：如何基于TypeScript实现上述逻辑的类型安全，既能够校验所有必填props存在且类型正确，同时仍允许使用者传入任意其他自定义props？

具体实现 #

最稳妥的写法是通过交叉类型组合固定必填Props类型和通用索引类型，既保留必填项的严格校验，又放开任意额外属性的传入限制：

import React from 'react';

// 定义明确约束的必填Props类型
type MyHOCRequiredProps = {
  requiredBoolean: boolean;
  requiredCallback: () => void;
}

// 组合必填Props + 任意自定义额外Props
type MyHOCProps = MyHOCRequiredProps & Record<string, unknown>;

const MyHOC = ({ requiredBoolean, requiredCallback, ...restProps }: MyHOCProps) => {
  // 组件业务逻辑
  return (
    <SomeOtherComponent
      requiredBoolean={requiredBoolean}
      requiredCallback={requiredCallback}
      {...restProps}
    />
  );
};

类型校验效果 #

• 传入时缺失requiredBoolean或requiredCallback、或是这两个字段的类型不匹配时，TypeScript会直接抛出类型错误，完成必填项的强校验
• 除两个必填字段外，使用者可以传入任意合法属性（比如自定义业务字段customId、onCustomEvent，或是通用DOM属性className、style等），不会触发“属性不存在”的类型报错
• 如果透传的额外属性有明确的类型约束（比如透传原生DOM属性、第三方组件属性），可以将Record<string, unknown>替换为对应类型，获得更精准的类型提示，例如透传原生button属性时可替换为React.ButtonHTMLAttributes<HTMLButtonElement>

避坑提示：不要直接在必填Props类型内松散添加索引签名，这种写法会弱化必填字段的类型校验，出现必填字段传错类型也不报错的问题。

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