如何利用TypeScript强类型移除any并约束Table类的data参数

要在编译阶段确保传递给Table类的data参数满足要求，核心是通过泛型捕获列字段的联合类型，以此约束data的结构。具体实现如下：

实现思路 #

1. 将Table类改为泛型类，用泛型参数捕获columnInfo中所有name字段的具体值，形成联合类型。
2. 约束columnInfo参数的类型，让TypeScript能准确推断出字段名的联合类型。
3. 用Record工具类型约束data数组的元素，确保每个对象都包含所有列字段。

修改后的完整代码 #

interface ColumnInfo {
    name: string;
    displayed: boolean;
}

// 泛型类，T为列字段名的联合类型
class Table<T extends string> {
    constructor(
        columnInfo: Array<{ name: T; displayed: boolean }>,
        data: Array<Record<T, unknown>>
    ) {
        // 业务逻辑实现
    }
}

// 无需显式指定ColumnInfo[]，让TypeScript自动推断字段名
const columns = [
    { name: "id", displayed: true },
    { name: "age", displayed: true },
];

const data = [
    { id: 1, age: 56 },
    { id: 2, age: 112 },
    { id: 3, age: 33 },
];

const badData = [
    { id: 1, name: "john" },
    { id: 2, name: "marie" },
    { id: 3, name: "james" },
];

const demo1 = new Table(columns, data); // 编译正常
const demo2 = new Table(columns, badData); // 编译报错：缺少"age"属性

代码说明 #

• 泛型参数T：TypeScript会自动从传入的columns数组中提取name字段的具体值，生成联合类型（比如这里的'id' | 'age'）。
• Record<T, unknown>：该工具类型要求对象必须包含所有T中的键，值类型设为unknown是为了兼容任意类型的字段值，若需要更严格的类型约束，可替换为具体类型或额外泛型参数。
• 编译期检查：当badData缺少age字段时，TypeScript会直接在编译阶段抛出错误，无需运行时校验。

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