面试题：TypeScript实现React组件Props的复杂类型约束及类型推断

Question

假设有一个表格组件，其`data`属性是一个数组，数组中的每个元素是一个对象，对象的键是动态的，但值都是字符串类型。同时，组件接收一个`transform`属性，它是一个函数，该函数接收`data`数组中的单个对象，并返回一个新的对象，新对象的属性类型也是动态推断的。请使用TypeScript实现对这个表格组件Props的精确类型约束，并详细说明你是如何利用类型推断来处理动态属性和函数返回值的。

Answer 1

// 定义一个泛型来处理动态属性的对象
type DynamicObject = {
    [key: string]: string;
};

// 定义transform函数的类型，它接收一个DynamicObject并返回一个新的动态属性对象
type TransformFunction = (obj: DynamicObject) => {
    [key: string]: unknown;
};

// 定义表格组件Props的类型
interface TableComponentProps {
    data: DynamicObject[];
    transform: TransformFunction;
}

类型推断说明

1. 动态属性对象 DynamicObject：使用 [key: string]: string 这种索引签名的方式，表明该对象的属性名是字符串类型，属性值也是字符串类型，以此来处理 data 数组中每个对象的动态属性。
2. transform 函数类型 TransformFunction：定义该函数接收一个 DynamicObject 类型的参数，并返回一个新的对象，新对象同样使用索引签名 [key: string]: unknown，因为其属性类型是动态推断的，这里先用 unknown 来表示不确定类型。
3. 表格组件Props类型 TableComponentProps：通过接口定义 data 为 DynamicObject 数组，transform 为 TransformFunction 类型，从而精确约束了表格组件Props的类型。