如何在TypeScript中从给定JSON结构获取多维数组？

原始数据结构 #

车辆数据JSON #

var cars = {
    "cars": {
        "john": [],
        "alex": [
            "ford"
        ],
        "hilton": [],
        "martin": [
            "ford",
            "ferrari"
        ],
        "david": [
            "Lamborghini"
        ],
        ...
    }
}

名称列表JSON #

var names = { 
    "names": [
        "john",
        "alex",
        "hilton",
        "martin",
        "david",
        ...
    ]
}

错误代码及问题 #

尝试的TypeScript代码：

let aryCars: string[][] = [];
names.map((name: string) => {
    cars[name].map((car: string) => {
        aryCars[name].push(car);
    });
});

出现错误：

Element implicitly has an 'any' type because index expression is not of type 'number'.

错误原因 #

1. 对象结构访问错误：names是包含names数组的对象，直接调用names.map无效，需访问names.names数组。
2. 数组索引类型错误：aryCars是数组，仅支持数字索引，用字符串name作为索引访问aryCars[name]不符合TypeScript规则。
3. 类型推断缺失：未明确cars和names的类型，导致TypeScript无法正确推断cars[name]的类型，触发any类型警告。

正确实现 #

步骤1：定义类型（可选但推荐，提升类型安全性） #

// 定义数据类型，让TypeScript准确推断结构
interface CarsData {
  cars: Record<string, string[]>;
}

interface NamesData {
  names: string[];
}

// 绑定原始数据到类型化变量
const cars: CarsData = {
  "cars": {
    "john": [],
    "alex": ["ford"],
    "hilton": [],
    "martin": ["ford", "ferrari"],
    "david": ["Lamborghini"],
    // ...其他数据
  }
};

const names: NamesData = { 
  "names": ["john", "alex", "hilton", "martin", "david", /* ...其他名字 */]
};

步骤2：生成目标多维数组 #

// 直接通过map生成符合要求的string[][]类型数组
const aryCars: string[][] = names.names.map(name => {
  // 若名字无对应车辆，返回空数组避免undefined
  return cars.cars[name] || [];
});

可选：保留名称与车辆的对应关系 #

如果需要同时保留名称和对应的车辆列表，可以生成对象数组：

const namedCarList = names.names.map(name => ({
  name,
  cars: cars.cars[name] || []
}));

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