如何在TypeScript中导入JSON文件并实现静态类型？

1. 能否像Node.js那样导入JSON并获得静态类型？ #

当然可以！不过得先确保你的TypeScript配置（tsconfig.json）里开对了关键选项：

• 把compilerOptions中的resolveJsonModule设为true，这是让TS支持JSON导入的核心开关；
• 建议同时开启esModuleInterop为true，这样导入语法会更贴近Node.js的require风格，减少模块兼容问题。

举个实际例子，假设你的JSON文件是data.json：

{ "foo": 1, "bar": true, "baz": "yes" }

你可以直接用ES模块语法导入，TS会自动推导完整的静态类型：

import data from './data.json';

console.log(data.foo); // 编辑器会提示这是number类型
console.log(data.bar); // 类型是boolean，写错属性名会直接报错

要是你习惯require的写法，也完全没问题：

const data = require('./data.json');

同样能获得完整的类型提示，TS会自动解析JSON结构生成对应类型。

2. 能否用typeof 'path/to/json/file.json'定义类型？ #

不行哦，这种写法TS是不支持的。typeof操作符只能作用于值（比如变量、表达式），没法直接跟文件路径字符串。不过有个完美的替代方案：先导入JSON文件，再用typeof获取它的类型：

import data from './data.json';

// 基于导入的JSON值自动生成类型
export type MyInterface = typeof data;

这样MyInterface就会被自动推导成和JSON结构完全匹配的类型：

type MyInterface = {
    foo: number;
    bar: boolean;
    baz: string;
};

之后你就可以用这个类型约束其他变量了，比如：

const validObj: MyInterface = { foo: 2, bar: false, baz: "no" }; // 类型检查通过
const invalidObj: MyInterface = { foo: "oops" }; // 直接触发类型错误提示

额外小提醒 #

• 要是你用的TS版本低于2.9，resolveJsonModule选项还不存在，得先升级到2.9及以上版本才能用这个功能；
• 注意JSON文件的路径要正确，TS会像处理普通模块一样解析它的位置，相对路径要和当前文件对应。

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