TypeScript中如何将for...of遍历的键用作类型化对象的索引？

当使用Object.entries遍历像Composition这样的明确类型对象时，TypeScript会把遍历得到的键识别为string类型，但原类型并没有定义字符串索引签名，导致直接用该键赋值时触发类型错误。以下是几种实用的解决方法：

方法一：类型断言收缩键类型 #

直接将遍历得到的键断言为目标类型的键集合（keyof Composition），让TypeScript确认该键是对象的有效属性：

type Composition = {
  foo: number;
  bar: number;
};

const total = 4;
const composition: Composition = { foo: 3, bar: 1 };

for (const [key, value] of Object.entries(composition)) {
  composition[key as keyof Composition] = (value / total) * 100;
}

方法二：为类型添加字符串索引签名 #

如果允许对象存在其他数值类型的属性，可以给Composition类型添加字符串索引签名，这样任意字符串键都会被TypeScript认可：

type Composition = {
  foo: number;
  bar: number;
  [key: string]: number; // 新增字符串索引签名
};

const total = 4;
const composition: Composition = { foo: 3, bar: 1 };

for (const [key, value] of Object.entries(composition)) {
  composition[key] = (value / total) * 100;
}

注意：这种方式会放宽类型约束，允许对象添加foo和bar之外的其他数值属性。

方法三：用类型守卫验证键的有效性 #

通过自定义类型守卫函数，在运行时验证键是否属于目标类型的有效属性，TypeScript会在验证通过的代码块内自动收缩键的类型：

type Composition = {
  foo: number;
  bar: number;
};

const total = 4;
const composition: Composition = { foo: 3, bar: 1 };

// 自定义类型守卫函数
function isCompositionKey(key: string): key is keyof Composition {
  return ['foo', 'bar'].includes(key);
}

for (const [key, value] of Object.entries(composition)) {
  if (isCompositionKey(key)) {
    composition[key] = (value / total) * 100;
  }
}

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