TypeScript中如何实现对象多类型属性的泛型索引赋值

定义了如下TypeScript接口及对象：

export interface ICaser {
    consulter: string;
    associater: string;
    typologies: string[];
    id: number;
}

const caser: ICaser = {
    consulter: "john",
    associater: "Huns",
    typologies: ['starter', 'beginner','intermediary','advanced']
};

尝试通过索引方式给对象属性赋值：

_caser[fieldName as keyof ICaser] = value.key as string;

但该方式仅支持string类型属性，无法处理typologies这类string[]类型的属性。当前实现的handleOnFieldChange函数如下：

const handleOnFieldChange = (fieldName: string, value: IDropdownOption, index?: number | undefined) => {
        let _caser = Object.assign({}, caser);
        var vls;
        if (fieldName === "typologies") {
            vls = value.selected ?
                [..._caser.typologies!, value.key as string] : _caser.typologies.filter(key => key !== value?.key);
            _caser['typologies'] = vls;
        } else {
            _caser[fieldName as keyof ICaser] = value.key as string;
        }
        setCaser(_caser);
    }

运行时出现类型错误：

Type 'string' is not assignable to type 'string & string[]'.
  Type 'string' is not assignable to type 'string[]'.

直接使用_caser[fieldName]会报错：

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ICaser'.

需要实现支持多类型属性（string、number、数组）的泛型赋值逻辑，解决上述类型错误。

1. 约束字段名类型，消除索引any错误 #

把fieldName的参数类型从string改为keyof ICaser，让TypeScript明确知道字段名属于ICaser接口的键，避免隐式any类型问题。

2. 针对不同属性类型做类型安全的赋值 #

通过泛型推断和条件判断，对不同类型的属性分别处理，确保赋值的类型匹配：

修改后的函数代码（先补充IDropdownOption的类型定义，可根据实际结构调整）：

interface IDropdownOption {
    key: string;
    selected?: boolean;
}

const handleOnFieldChange = <K extends keyof ICaser>(
    fieldName: K,
    value: IDropdownOption,
    index?: number
) => {
    const _caser = { ...caser }; // 用扩展运算符克隆对象，更简洁直观

    if (fieldName === "typologies") {
        // 单独处理数组类型：根据selected状态添加/移除元素
        _caser.typologies = value.selected
            ? [..._caser.typologies, value.key]
            : _caser.typologies.filter(item => item !== value.key);
    } else {
        // 处理string/number基础类型：根据目标属性类型转换value.key
        type FieldType = ICaser[K];
        _caser[fieldName] = (typeof _caser[fieldName] === 'number' 
            ? Number(value.key) 
            : value.key) as FieldType;
    }

    setCaser(_caser);
};

关键说明 #

• 泛型<K extends keyof ICaser>让TypeScript自动推断当前字段对应的属性类型，从根源上避免类型不匹配问题。
• 对typologies单独处理数组的增删逻辑，保持数组操作的类型安全。
• 针对id这类number类型属性，将value.key转换为number类型后再赋值，解决基础类型间的赋值冲突。
• 用扩展运算符{ ...caser }替代Object.assign，克隆对象的写法更简洁易读。

可选优化：用类型守卫细化逻辑 #

如果需要支持更多复杂类型，可以自定义类型守卫来区分字段类型，让代码逻辑更清晰：

// 类型守卫：判断字段是否为数组类型
function isArrayField<K extends keyof ICaser>(fieldName: K): fieldName is 'typologies' {
    return fieldName === 'typologies';
}

// 在函数中使用类型守卫
const handleOnFieldChange = <K extends keyof ICaser>(
    fieldName: K,
    value: IDropdownOption,
    index?: number
) => {
    const _caser = { ...caser };

    if (isArrayField(fieldName)) {
        _caser[fieldName] = value.selected
            ? [..._caser[fieldName], value.key]
            : _caser[fieldName].filter(item => item !== value.key);
    } else {
        type FieldType = ICaser[K];
        _caser[fieldName] = (typeof _caser[fieldName] === 'number' 
            ? Number(value.key) 
            : value.key) as FieldType;
    }

    setCaser(_caser);
};

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