能否定义可迭代的TypeScript接口？如何用其声明对象并遍历？

步骤1：定义TypeScript接口 #

通过interface关键字定义匹配对象结构的接口，明确每个属性的类型：

interface MyObject {
  a: string;
  b: number;
}

步骤2：用接口声明对象 #

使用定义好的接口约束对象类型，确保对象结构符合预期：

const object1: MyObject = {
  a: 'somestring',
  b: 42,
};

步骤3：使用Object.entries遍历对象 #

和JavaScript的写法一致，直接通过Object.entries遍历即可，默认执行结果和JS完全相同：

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// 输出：
// "a: somestring"
// "b: 42"

优化类型精度（可选） #

默认情况下TypeScript会把遍历得到的value类型推断为unknown，如果需要更精确的类型提示，可以通过以下两种方式处理：

方式1：类型断言

直接对Object.entries的返回值做类型断言，指定键值对的精确类型：

for (const [key, value] of Object.entries(object1) as Array<[keyof MyObject, MyObject[keyof MyObject]]>) {
  console.log(`${key}: ${value}`);
  // 此时key类型为"a" | "b"，value类型为string | number
}

方式2：泛型工具函数

封装一个泛型函数，复用精确类型的断言逻辑：

function typedEntries<T extends object>(obj: T): Array<[keyof T, T[keyof T]]> {
  return Object.entries(obj) as Array<[keyof T, T[keyof T]]>;
}

// 使用封装后的函数遍历
for (const [key, value] of typedEntries(object1)) {
  console.log(`${key}: ${value}`);
  // 同样能获得精确的类型提示
}

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