面试题：TypeScript接口与泛型结合在复杂组件库设计中的应用

Question

假设你正在设计一个可复用的前端组件库，其中有一个表格组件，该组件需要支持不同类型的数据展示（如用户列表、订单列表等），并且每列的渲染方式也可能不同。请使用TypeScript的接口与泛型来设计这个表格组件的类型定义，使得组件具有高度的可复用性和类型安全性。描述你的设计思路，并给出关键的类型定义代码。

Answer 1

设计思路

1. 定义列配置接口：用于描述表格每一列的信息，包括列标题、数据字段、渲染函数等。
2. 定义数据项接口：作为泛型参数，让表格可以适配不同类型的数据。
3. 定义表格组件的整体接口：将列配置和数据项结合起来，确保类型安全。

关键类型定义代码

// 列配置接口
interface TableColumn<T> {
    title: string;
    dataIndex: keyof T;
    render?: (value: T[keyof T], record: T, index: number) => React.ReactNode;
}

// 表格组件接口
interface TableProps<T> {
    columns: TableColumn<T>[];
    dataSource: T[];
}

在使用时，可以这样定义具体类型：

// 用户数据类型
interface User {
    name: string;
    age: number;
}

// 定义用户表格的列配置
const userColumns: TableColumn<User>[] = [
    {
        title: '姓名',
        dataIndex: 'name'
    },
    {
        title: '年龄',
        dataIndex: 'age'
    }
];

// 假设这是用户数据
const userDataSource: User[] = [
    { name: '张三', age: 20 },
    { name: '李四', age: 22 }
];

// 使用表格组件，确保类型安全
const tableProps: TableProps<User> = {
    columns: userColumns,
    dataSource: userDataSource
};