TypeScript如何定义含至少一个字符串值键、其余字段任意类型的类型

这类类型定义完全在TypeScript的能力范围内，之前的方案问题在于试图脱离动态传入的displaytextKeyname单独定义通用Option类型，思路走偏了。核心解法是将显示字段的键名也纳入泛型约束，和选项对象类型做绑定。

不需要单独定义通用的ComboboxOption类型，直接改造组件Props的泛型约束即可：

// 约束：T必须包含类型为string的K键，K为传入的显示字段键名
type ComboboxProps<T extends Record<K, string>, K extends string = string> = {
    options: T[];
    displaytextKeyname: K;
}

// 组件使用泛型推导，不需要写死unknown
const Combobox = <T extends Record<K, string>, K extends string = string>({
    options,
    displaytextKeyname
}: ComboboxProps<T, K>) => {
    options.forEach(o => {
        // 此处o[displaytextKeyname]自动推导为string类型，无类型安全问题
        console.log(o[displaytextKeyname])
    })
}

合法用例（无类型报错） #

• 允许任意名称的显示字段，其他字段支持任意类型

// 用name作为显示字段，携带id、对象类型的额外业务字段
Combobox({
    options: [
        { name: "选项1", id: 1, extra: { disabled: false } },
        { name: "选项2", id: 2, extra: { disabled: true } }
    ],
    displaytextKeyname: "name"
})

// 用description作为显示字段，携带number类型的value字段
Combobox({
    options: [
        { description: "测试选项", value: 100 },
    ],
    displaytextKeyname: "description"
})

非法用例（精准报错） #

• 自动拦截不符合要求的传参

// 报错：显示字段label对应的值是number，不符合string要求
Combobox({
    options: [
        { id: 1, label: 123 }
    ],
    displaytextKeyname: "label"
})

// 报错：选项对象中不存在传入的显示字段label
Combobox({
    options: [
        { value: 1, name: "选项" }
    ],
    displaytextKeyname: "label"
})

• 方案1：全局string索引签名强制所有字段值必须为string，完全禁止option携带number、对象等常用的业务字段，没有实用性
• 方案2：全局unknown索引签名完全放弃类型校验，既不检查显示字段是否存在，也不检查显示字段值的类型，等于没有类型保护
• 方案3：TypeScript中同一类型的多个索引签名必须满足类型兼容规则，string索引签名的返回值类型必须是其他索引签名返回值的父类型，不可能同时实现“任意键支持任意类型值”+“任意键必须是string值”的兼容索引签名，这条路本身走不通。

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