创建产品排序筛选器时遇到TypeScript报错问题求助

两个报错本质上都源于同一个基础问题：TypeScript 中 Object.keys() 方法的返回值类型固定为 string[]，不会自动窄化为传入对象的键的联合类型。这是 TypeScript 结构化类型系统的设计导致的：它默认假设对象可能存在额外的运行时属性，因此不会将返回的键限制为定义时的已知键。

• sortKey 报错：Object.keys(SORT_KEYS).find() 返回值类型为 string | undefined，无法直接赋值给声明为 SortKey | undefined 的变量，普通 string 类型不能自动匹配到你定义的枚举联合类型。此外你没有处理 queryKey 为数组的场景，直接拿字符串和数组比较运行时也会有逻辑问题。
• sortLinks 报错：map 遍历的 key 是 string 类型，用 string 索引没有声明索引签名的 SORT_KEYS 对象时，TypeScript 无法确认该键一定存在，因此抛出索引类型错误。

首先我们可以封装一个通用的工具函数，用来获取类型安全的对象键数组：

function getTypedKeys<T extends object>(obj: T): Array<keyof T> {
  return Object.keys(obj) as Array<keyof T>;
}

这个函数会直接返回类型为传入对象键联合类型的数组，无需每次单独写类型断言。

接下来修正两处报错的代码：

1. 先处理 queryKey 的合法性，再计算 sortKey：

// 先把queryKey处理为单个字符串或undefined，排除数组场景
const validQueryKey = typeof queryKey === 'string' ? queryKey : undefined;
// 用类型安全的方法获取键数组，find返回值自动推断为SortKey | undefined
const sortKey = getTypedKeys(SORT_KEYS).find(key => key === validQueryKey);

2. 修正 sortLinks 的生成逻辑：

interface SortLink {
  href: SortKey;
  label: SortLabel;
}
// 遍历的key自动为SortKey类型，索引SORT_KEYS不会报错
const sortLinks: Array<SortLink> = getTypedKeys(SORT_KEYS).map((key) => ({
  href: key,
  label: SORT_KEYS[key],
}));

如果不想封装工具函数，也可以直接对 Object.keys() 的返回值做单次类型断言，效果完全一致：

// 直接断言为SortKey数组
const sortKeys = Object.keys(SORT_KEYS) as Array<SortKey>;
const sortKey = sortKeys.find(key => key === validQueryKey);
const sortLinks: Array<SortLink> = sortKeys.map((key) => ({
  href: key,
  label: SORT_KEYS[key],
}));

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