TypeScript限定函数接收类型字符串属性时报TS2339错误如何解决

你定义的KeysAssignableToType工具类型虽然约束了入参field必须是泛型对象T中类型为string | undefined的属性名，但TypeScript对未实例化的泛型索引访问类型不会做控制流层面的自动类型收窄：当你通过if (a[field])做真值判断时，TS无法确认过滤掉undefined后a[field]的类型就是string，仍然认为它的类型是string | undefined，因此会抛出不存在localeCompare方法的编译错误。
另外你的原有判断逻辑存在隐性bug：空字符串""是合法的字符串值，但会被真值判断判定为falsy，会导致排序结果不符合预期。

有两种常用的修复方案，都可以完全解决编译错误，同时保证类型安全：

• 方案1：提取属性值后做明确的类型标注，配合typeof做类型收窄，这是改动最小的方案

type KeysAssignableToType<O, T> = {
    [K in keyof O]-?: O[K] extends T ? K : never;
}[keyof O];

export const sortString = <T>(field: KeysAssignableToType<T, string | undefined>) => (a: T, b: T): number => {
    // 提前提取属性值，明确标注类型
    const aVal: string | undefined = a[field];
    const bVal: string | undefined = b[field];
    // 用typeof判断替换真值判断，兼容空字符串场景
    if (typeof aVal === 'string') {
        return typeof bVal === 'string' ? aVal.localeCompare(bVal) : 1
    }
    return typeof bVal === 'string' ? -1 : 0
}

• 方案2：调整泛型定义，直接约束属性键对应的属性值类型，让TS自动推导属性值类型，不需要额外断言

// 不需要额外定义KeysAssignableToType工具类型，直接在泛型约束里做类型过滤
export const sortString = <T extends object, K extends keyof T>(
  field: T[K] extends string | undefined ? K : never
) => (a: T, b: T): number => {
    const aVal = a[field]; // 自动推导为string | undefined
    const bVal = b[field]; // 自动推导为string | undefined
    if (typeof aVal === 'string') {
        return typeof bVal === 'string' ? aVal.localeCompare(bVal) : 1
    }
    return typeof bVal === 'string' ? -1 : 0
}

两种方案都可以支持你预期的调用方式sortString<User>('name')，如果传入的属性名不是string | undefined类型，TS会直接抛出编译错误。

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