如何在Typescript元组中使用泛型实现支持动态类型的toTableGeneric函数

问题原因 #

你原有toTableGeneric的泛型约束Columns extends Column<MyItem, unknown>[]会强制把所有Column的第二个泛型参数统一为unknown，丢失了每个列独立的Value类型信息，导致setter的入参类型也会被抹成unknown，不符合预期。

正确实现 #

TS4.5已经支持元组映射类型和可变元组泛型，可以通过以下写法实现任意长度、每个元素第二个泛型独立的入参约束：

interface MyItem {
    stringValue: string;
    booleanValue: boolean;
}

interface Column<Item, Value> {
    getter: (row: Item) => Value;
    setter: (row: Item, value: Value) => void;
}

// 泛型实现
export const toTableGeneric = <T extends any[]>(
  items: [...{ [K in keyof T]: Column<MyItem, T[K]> }]
) => items;

// 测试调用
export const table = toTableGeneric([
    {
        getter: (row: MyItem) => row.stringValue,
        setter: (row, value) => {
            // 此时value会被自动推断为string类型
            row.stringValue = value;
        },
    },
    {
        getter: (row: MyItem) => row.booleanValue,
        setter: (row, value) => {
            // 此时value会被自动推断为boolean类型
            row.booleanValue = value;
        },
    },
    // 可任意追加更多列，每个列的Value类型都会独立推断
]);

效果验证 #

调用后返回的table是和入参数组长度完全匹配的元组类型：

• table[0].setter的入参value类型为string
• table[1].setter的入参value类型为boolean
  无需提前声明长度，支持任意数量的Column入参。

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