如何为渲染组件数组的React组件编写类型安全的.d.ts声明文件

核心通过泛型搭配React内置的ComponentProps工具类型，自动提取传入组件的Props类型做options的校验依据，同时完全兼容两种layout传参格式。

直接替换原有声明文件内容即可：

import * as React from 'react';

// 配置对象形式的布局项：泛型约束组件类型，自动推导对应options结构
type LayoutConfigItem<C extends React.ElementType = React.ElementType> = {
  component: C;
  options?: React.ComponentProps<C>;
};

// 布局项联合类型：支持直接传入组件、传入配置对象两种形式
type LayoutItem = React.ElementType | LayoutConfigItem;

interface ColumnProps {
  className?: string;
  layout?: LayoutItem[];
}

// 组件声明，函数组件/类组件二选一即可
export declare const Column: React.FC<ColumnProps>;
// 类组件写法：
// export declare class Column extends React.Component<ColumnProps> {}

类型校验效果 #

• 直接在layout数组中传入组件（如示例中的Input、Date）时，类型校验完全正常，和原有使用行为一致
• 传入配置对象形式时，TS会自动匹配component字段对应组件的Props类型校验options：传入组件不支持的属性、属性值类型不匹配时，TS会直接抛出类型错误
• 无需手动为每个组件声明options类型，所有类型推导自动完成

额外修复了原有类型定义的漏洞：旧定义将component设为可选，会允许「只传options不传component」的非法传参，调整为联合类型后会自动拦截这类错误。

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