如何在Typescript中正确访问自定义类型的属性值

错误原因 #

你遇到的报错是因为 Object.keys() 方法在Typescript的类型定义中返回值固定为string[]类型，而你定义的Notes类型只允许5、10、20三个字面量作为键，用宽泛的string类型去索引明确限定了键范围的类型，就会触发该类型错误。 #

解决方案 #

方案1：对Object.keys的返回值做类型断言（最常用） #

你可以直接告诉Typescript，你确认availableNotes的所有键都属于Notes类型的合法键，把返回值断言为Array<keyof Notes>即可：

// 把返回的string数组断言为Notes的键组成的数组
const noteTypes = Object.keys(availableNotes) as Array<keyof Notes>;

for(let i = 0; i < noteTypes.length; i++) {
  const value = availableNotes[noteTypes[i]]; 
  // 这里value会被自动推导为number类型，不会报错
}

方案2：用Object.entries直接遍历键值对 #

如果你的遍历场景需要同时拿到键和值，可以直接对Object.entries的返回值做类型断言，写法更简洁：

const entries = Object.entries(availableNotes) as Array<[keyof Notes, number]>;
for (const [key, value] of entries) {
  // 直接拿到类型正确的key和value，直接使用即可
}

方案3：自定义类型守卫（适合类型不确定的严谨场景） #

如果你不能完全保证Object.keys返回的键都是合法的，可以加一层类型判断做类型收窄，完全避免类型风险：

// 先定义类型守卫判断传入值是否是Notes的合法键
function isNoteKey(key: string): key is keyof Notes {
  return ['5', '10', '20'].includes(key);
}

const noteTypes = Object.keys(availableNotes);
for(let i = 0; i < noteTypes.length; i++) {
  const key = noteTypes[i];
  if (isNoteKey(key)) {
    const value = availableNotes[key];
    // 进入if分支后key的类型已经被收窄为keyof Notes，不会报错
  }
}

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