如何在TypeScript中遍历嵌套对象并获取其键值对

针对你给出的嵌套对象结构，以下是几种在TypeScript中获取内层对象值（同时获取键）的实现方式：

1. 先定义类型（保障类型安全） #

先为嵌套对象明确类型，这是TypeScript的核心优势，能避免访问不存在的键：

interface InnerData {
  name: string;
  id: number;
  city: string;
}

interface ResponseData {
  data: InnerData;
}

// 带类型约束的目标对象
const res: ResponseData = {
  data: {name: 'name', id: 1, city: 'LA'}
};

2. 直接解构获取单个键值 #

如果只需要特定的几个键值，可以通过解构直接提取：

// 解构内层对象的指定属性
const { data: { name, id } } = res;
console.log(name); // 输出: 'name'
console.log(id); // 输出: 1

// 保留内层对象引用，后续按需访问
const innerData = res.data;
console.log(innerData.city); // 输出: 'LA'

3. 遍历内层对象同时获取键和值 #

如果需要处理所有键值对，使用Object.entries可以同时拿到键和值：

// 遍历内层对象的所有键值对
for (const [key, value] of Object.entries(res.data)) {
  console.log(`键: ${key}, 值: ${value}`);
}
// 输出结果：
// 键: name, 值: name
// 键: id, 值: 1
// 键: city, 值: LA

4. 封装工具函数（通用场景复用） #

如果需要在多个地方复用逻辑，可以封装一个类型安全的工具函数，返回内层对象的键值对数组：

function getInnerEntries<T>(obj: { data: T }): [keyof T, T[keyof T]][] {
  return Object.entries(obj.data) as [keyof T, T[keyof T]][];
}

// 使用示例
const entries = getInnerEntries(res);
entries.forEach(([key, value]) => {
  console.log(`键: ${key as string}, 值: ${value}`);
});

额外提示 #

TypeScript会自动校验属性访问，比如当你尝试访问res.data.age时，编辑器会直接报错，提示age不存在于InnerData类型中，有效避免运行时错误。

内容的提问来源于stack exchange，提问作者Cpt.Kitkat