如何提取Typescript导入的JSON模块嵌套字段的字面量联合类型

问题原因 #

你遇到的不是TypeScript对JSON模块仅支持一层类型推断的限制，而是默认配置下，通过resolveJsonModule导入的JSON内容会被自动类型拓宽：所有字符串字段会被推断为string基础类型，不会保留原始的字面量值类型，和嵌套层级没有关系。

解决方案 #

这里提供两种可直接落地的实现方案：

方案1：导入时添加const断言（TS 4.9及以上版本推荐）

借助ES模块导入断言+TypeScript的const断言，直接让编译器完整保留JSON所有层级的字面量类型，无需修改原JSON文件：

// 导入时添加as const即可
import lookup from './data.json' assert { type: 'json' } as const;

type LookupType = typeof lookup;
// 现在可以直接提取到嵌套字段的字面量联合
type MarketIds = LookupType[keyof LookupType]['market_id'];
// 类型为 "111172" | "526970" | "3240" | "4" | ...

方案2：将JSON转为TS常量文件（兼容所有TS 3.4及以上版本）

如果你的项目TS版本较低，不支持导入时加const断言，可以把data.json重命名为data.ts，导出时加上as const断言：

// data.ts
export default {
  "au": {
    "name": "Australia",
    "market_id": "111172",
    "language_code": "en_AU"
  },
  "br": {
    "name": "Brazil",
    "market_id": "526970",
    "language_code": "pt_BR"
  },
  "ch": {
    "name": "China",
    "market_id": "3240",
    "language_code": "zh_CN"
  },
  "de": {
    "name": "Germany",
    "market_id": "4",
    "language_code": "de_DE"
  },
  // 剩余内容保持不变
} as const

导入后使用逻辑和之前完全一致：

import lookup from './data'

type LookupType = typeof lookup;
type MarketIds = LookupType[keyof LookupType]['market_id'];
// 同样能得到正确的字面量联合类型

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