遍历嵌套对象键时如何处理TypeScript隐式any类型？

问题场景 #

先看这个简化的测试用例：

const testCase = {a:{b:"result"}}

for (const i in testCase) {
    console.log("i", i)
    for (const j in testCase[i]){
        console.log("j", j)
    }
}

运行时会触发TypeScript的类型错误：

error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ a: { b: string; }; }'.
  No index signature with a parameter of type 'string' was found on type '{ a: { b: string; }; }'.

5     for (const j in testCase[i]){
                   

你已经知道可以把i断言为keyof typeof testCase来解决，但多层嵌套时这种手动断言会变得非常繁琐：

const testCase = {a:{b:"result"}}

for (const i in testCase) {
    let typedIndex = i as keyof typeof testCase
    console.log("i", i)
    for (const j in testCase[typedIndex]){
        console.log("j", j)
    }
}

下面给你几个更优的处理方法，顺便解答关于反模式的疑问：

更优解决方案 #

1. 预定义对象类型（最推荐） #

提前给嵌套对象定义明确的类型，让TypeScript自动推导索引类型，不用手动写断言：
如果你的对象结构是动态的（键名不固定），可以用索引签名定义：

interface NestedObject {
  [key: string]: {
    [key: string]: string;
  };
}

const testCase: NestedObject = {a:{b:"result"}, c:{d:"demo"}};

for (const i in testCase) {
    console.log("i", i);
    for (const j in testCase[i]){
        console.log("j", j);
    }
}

如果对象结构是固定的，就定义更具体的类型，TypeScript会自动帮你推导所有索引的合法值：

interface InnerData {
  b: string;
}

interface TestCase {
  a: InnerData;
}

const testCase: TestCase = {a:{b:"result"}};

for (const i in testCase) {
    console.log("i", i);
    // 这里i会被自动推导为"a"，testCase[i]的类型是InnerData
    for (const j in testCase[i]){
        console.log("j", j);
    }
}

2. 用通用工具函数复用断言 #

如果不想提前定义类型，可以写一个简单的工具函数来统一处理类型断言，避免重复写as keyof ...：

function getTypedKey<T>(obj: T, key: string): keyof T {
  return key as keyof T;
}

const testCase = {a:{b:"result"}, c:{d:"another"}};

for (const i in testCase) {
    const typedI = getTypedKey(testCase, i);
    console.log("i", i);
    const innerObj = testCase[typedI];
    for (const j in innerObj) {
        const typedJ = getTypedKey(innerObj, j);
        console.log("j", j);
        // 这里innerObj[typedJ]的类型是明确的string，不会有any警告
        console.log("value", innerObj[typedJ]);
    }
}

3. 直接添加索引签名（适合完全动态的结构） #

如果你的对象是完全动态的（比如从后端接口返回的不确定结构），可以直接给变量添加索引签名类型，允许用string索引：

const testCase: {[key: string]: {[key: string]: string}} = {a:{b:"result"}};

for (const i in testCase) {
    console.log("i", i);
    for (const j in testCase[i]){
        console.log("j", j);
    }
}

关于反模式的疑问 #

未预定义testCase的类型本身不算反模式，但TypeScript的核心就是类型安全——如果你的对象结构是固定的，却不定义类型，等于浪费了TypeScript的类型检查能力，后期修改代码容易出问题；但如果是完全动态的结构（比如不确定键名的接口返回数据），用索引签名或者类型断言就是合理的做法。

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