TypeScript泛型参数类型收窄问题：关联参数未正确推导

问题场景 #

以下代码期望在method函数内，当判断payload.fieldName === 'strings'时，TypeScript能自动将payload.fieldValue的类型收窄为string[]，从而无错误调用workOnStrings，但实际出现了类型不匹配的编译错误：

type ObjectType = {
    strings: string[],
    numbers: number[]
};

const state = {
    storedObject: {
        strings: [],
        numbers: []
    } as ObjectType
}

function method<
    TKey extends keyof ObjectType,
    TValue extends ObjectType[TKey]
>(payload: {
    fieldName: TKey,
    fieldValue: TValue
}) {
    if (payload.fieldName === 'strings') {
        workOnStrings(payload.fieldValue); 
        // 预期：TS收窄fieldValue为string[]，无错误
        // 实际错误：Argument of type 'string[] | number[]' is not assignable to parameter of type 'string[]'
    }

    state.storedObject[payload.fieldName] = payload.fieldValue;
}

method({
    fieldName: 'strings',
    fieldValue: ['abc']
});

function workOnStrings(arg1: string[]) {
    
}

错误信息：

Argument of type 'string[] | number[]' is not assignable to parameter of type 'string[]'.
  Type 'number[]' is not assignable to type 'string[]'.
    Type 'number' is not assignable to type 'string'.(2345)
(property) fieldValue: string[] | number[]

问题原因 #

TypeScript无法在函数内部通过payload.fieldName === 'strings'来收窄payload.fieldValue的类型，核心原因是泛型参数的约束关系无法在条件分支中被反向推导：

• 虽然定义了TValue extends ObjectType[TKey]，但这只是对泛型参数的约束，函数内部TypeScript仅知道TKey是keyof ObjectType的子类型，TValue是对应属性类型的子类型，但无法将fieldName的具体值与fieldValue的类型建立实时关联。
• 对于TypeScript来说，泛型参数TKey和TValue是独立的类型变量，条件判断只能收窄fieldName的类型，但无法同步更新fieldValue的类型。

修复方案 #

方案1：使用可辨识联合类型（推荐） #

将payload的类型定义为可辨识联合类型，通过fieldName作为辨识符，让TypeScript能自动根据fieldName的值收窄fieldValue的类型：

type ObjectType = {
    strings: string[],
    numbers: number[]
};

const state = {
    storedObject: {
        strings: [],
        numbers: []
    } as ObjectType
}

// 定义可辨识联合类型的payload
type Payload = {
    [K in keyof ObjectType]: {
        fieldName: K,
        fieldValue: ObjectType[K]
    }
}[keyof ObjectType];

function method(payload: Payload) {
    if (payload.fieldName === 'strings') {
        workOnStrings(payload.fieldValue); // 此时fieldValue类型已被正确收窄为string[]，无错误
    }

    state.storedObject[payload.fieldName] = payload.fieldValue;
}

method({
    fieldName: 'strings',
    fieldValue: ['abc']
});

function workOnStrings(arg1: string[]) {
    
}

方案2：保留泛型并使用类型断言 #

如果需要保留泛型结构，可以使用类型断言强制指定fieldValue的类型，但这种方式需要手动保证类型安全：

function method<
    TKey extends keyof ObjectType,
    TValue extends ObjectType[TKey]
>(payload: {
    fieldName: TKey,
    fieldValue: TValue
}) {
    if (payload.fieldName === 'strings') {
        workOnStrings(payload.fieldValue as string[]); // 使用类型断言
    }

    state.storedObject[payload.fieldName] = payload.fieldValue;
}

补充说明 #

方案1的可辨识联合类型是更符合TypeScript类型系统设计的方案，它能让类型推导更准确，同时避免手动类型断言带来的潜在风险。

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