为何可用的TypeScript多维关联数组仍触发类型警告？

问题场景 #

你定义了如下人员数据结构，代码能正常运行返回预期值，但VS Code会标记类型错误：

原始代码 #

interface AssociativeArray {
    [key: string]: Array<object> | string | number | object;
}

export var mapDB: AssociativeArray[] = [
    {
        timeZone: "HST",
        places: [
            {
                place: "Oahu",
                members: ["Frank", "Jerry", "Pearl"],
            },
            {
                place: "Maui",
                members: ["Susan", "Liana", "Bertha"],
            },
        ],
    },
    {
        timeZone: "PST",
        places: [
            {
                place: "Tahiti",
                members: ["Fido", "Snowy", "Butch"],
            },
        ],
    },
];

// 访问元素时触发类型错误
console.log("The name: ", mapDB[0]["places"][1]["members"][2]);

错误提示 #

Element implicitly has an 'any' type because expression of type '1' can't be used to index type 'string | number | object | object[]'.
  Property '1' does not exist on type 'string | number | object | object[]'

错误原因 #

你定义的AssociativeArray接口过于宽泛，它声明所有键对应的类型是string | number | object | object[]的联合类型。TypeScript无法确定places属性具体是数组类型，因此当你用数字索引（比如[1]）访问时，会认为该操作可能不合法，从而抛出错误。

解决方案 #

为数据结构定义精确的类型接口，替代通用的关联数组定义：

// 成员类型：字符串
type Member = string;

// 地点类型：包含名称和成员数组
interface Place {
    place: string;
    members: Member[];
}

// 时区组类型：包含时区标识和地点数组
interface TimeZoneGroup {
    timeZone: string;
    places: Place[];
}

// 指定mapDB为TimeZoneGroup类型的数组
export var mapDB: TimeZoneGroup[] = [
    {
        timeZone: "HST",
        places: [
            {
                place: "Oahu",
                members: ["Frank", "Jerry", "Pearl"],
            },
            {
                place: "Maui",
                members: ["Susan", "Liana", "Bertha"],
            },
        ],
    },
    {
        timeZone: "PST",
        places: [
            {
                place: "Tahiti",
                members: ["Fido", "Snowy", "Butch"],
            },
        ],
    },
];

// 现在访问不会再报错
console.log("The name: ", mapDB[0]["places"][1]["members"][2]); // 输出"Bertha"

说明 #

通过分层定义精确接口，TypeScript能明确推断每个属性的类型：

• mapDB是TimeZoneGroup类型数组
• 每个TimeZoneGroup的places是Place类型数组
• 每个Place的members是字符串数组

这样使用数字索引访问数组元素时，TypeScript能确认操作的合法性，彻底消除类型错误。

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