在TypeScript中导入.json文件为数组无法正确取值如何解决？

你遇到的问题是模块导入规则导致的：使用import * as导入JSON文件时，JSON内容会被作为模块的default导出项挂载到导入对象上，因此直接用导入对象取下标无法获取到数组元素。

有两种常用的修复方案：

• 方案1：使用默认导入（更推荐）
  直接导入JSON的default导出项，代码如下：

// 直接默认导入JSON内容
import array from './list.json';
// 可直接通过下标访问数组元素
console.log(array[0]); // 输出 Element 1

• 方案2：保留import * as写法时手动取default属性
  如果你需要保留现有导入写法，从导入对象的default属性取值即可：

import * as data from './list.json';
const array = data.default;
console.log(array[0]); // 输出 Element 1

在TypeScript项目中导入JSON文件，需要先在tsconfig.json中开启对应配置：

{
  "compilerOptions": {
    // 允许TypeScript识别并导入JSON文件
    "resolveJsonModule": true,
    // 处理ES模块与CommonJS模块的导入兼容性，确保默认导入正常生效
    "esModuleInterop": true
  }
}

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