TypeScript使用keyof动态访问对象属性报TS2532可能为undefined错误

• searchParams.get('sortBy')原生返回类型是string | null，直接用as keyof EmployeeModel属于强制类型断言，没有做任何运行时空值校验，TS会识别到sortBy可能为null，此时取对象属性得到的是undefined。
• EmployeeModel构造函数用{} as EmployeeModel做默认参数是不安全的强制断言：当传入空对象时，id、first_name等标记为必填的属性实际值都是undefined，因此任意动态键的取值结果都被TS判定为可能是undefined。
• 现有空值判断仅覆盖了a/b两个对象同时为undefined的极端场景，既没覆盖单个对象为undefined的情况，也没覆盖属性取值为undefined的情况，而比较运算符无法直接对undefined值做大小判断，因此抛出TS2532错误。
• 原有比较函数本身存在逻辑bug：第二个if (a[sortBy] > b[sortBy])后直接跟else return sortResult，会导致属性值相等时直接返回0，不会走到后面的升降序判断分支。

1. 先对sortBy做合法性校验和兜底 #

不要直接用未校验的查询参数做对象键，加白名单校验+默认值，避免非法参数和null值：

// 定义允许排序的字段白名单
const ALLOW_SORT_FIELDS: (keyof EmployeeModel)[] = ['id', 'first_name', 'last_name', 'birthdate', 'email', 'gender', 'department', 'age'];
const rawSortBy = searchParams.get('sortBy');
// 校验通过就用传入值，否则默认按id排序
const sortBy: keyof EmployeeModel = ALLOW_SORT_FIELDS.includes(rawSortBy as keyof EmployeeModel)
  ? rawSortBy as keyof EmployeeModel
  : 'id';

2. 修复EmployeeModel类的类型安全问题 #

去掉不安全的类型断言，用Partial做构造函数参数类型，给所有属性加空值兜底，同时去掉age属性不必要的可选标记：

import {calculateAge} from "../helpers/ageCalculator";

export class EmployeeModel {
    id: number;
    first_name: string;
    last_name: string;
    birthdate: string;
    email: string;
    gender: string;
    department: string;
    age: number; // 构造函数一定会赋值，不需要可选标记

    constructor(employee: Partial<EmployeeModel> = {}) {
        // 每个属性做空值兜底，避免出现undefined
        this.id = employee.id ?? 0;
        this.first_name = employee.first_name ?? '';
        this.last_name = employee.last_name ?? '';
        this.birthdate = employee.birthdate ?? '';
        this.email = employee.email ?? '';
        this.gender = employee.gender ?? '';
        this.department = employee.department ?? '';
        // birthdate不存在时给age兜底，避免传入非法值给calculateAge
        this.age = employee.birthdate ? calculateAge(employee.birthdate) : 0;
    }
}

3. 重写比较函数，补全空值判断，修复原有逻辑bug #

把对象空值、属性值空值的场景都覆盖完，再做值比较，同时修正升降序判断的逻辑：

const compareFunc = (a: EmployeeModel, b: EmployeeModel) => {
    // 处理对象本身为空的场景
    if (a == null && b == null) return 0;
    if (a == null) return -1;
    if (b == null) return 1;

    const valA = a[sortBy];
    const valB = b[sortBy];
    // 处理排序字段值为空的场景
    if (valA == null && valB == null) return 0;
    if (valA == null) return -1;
    if (valB == null) return 1;

    // 到此处valA、valB均为非空值，可以安全比较
    if (valA < valB) return direction === SortDirection.Desc ? 1 : -1;
    if (valA > valB) return direction === SortDirection.Desc ? -1 : 1;
    return 0;
};

改完之后TS2532报错会完全消失，排序逻辑也能正常按升降序返回结果。

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