TypeScript导入JSON时string类型无法匹配字面量联合类型如何解决

解决方案 #

你可以选择以下任意一种方案解决类型不兼容问题： #

方案1：使用as const收窄JSON导入的类型

这是最简便的方案，导入JSON文件时添加as const断言，TS会自动将JSON内的所有字段收窄为精确的字面量类型，不会自动把type字段拓宽为通用string类型：

// 导入JSON时添加断言
import states from './你的JSON文件路径.json' assert { type: 'json' } as const;

// 后续直接赋值即可通过类型校验
export const constructStatesTreeStructure = (
  data: StatesRootData = states,
) => ...

如果你的TS版本低于4.7不支持assert { type: 'json' }语法，用require写法也可以：

const states = require('./你的JSON文件路径.json') as const;

方案2：直接做类型断言

如果你确定JSON文件的结构完全符合类型定义，可以直接把导入的JSON断言为你定义的根类型StatesRootData：
首先补全你缺失的根类型定义：

export type StateStructure = {
  type: 'user' | 'machine' | 'abstract';
};
// 补全根数据类型
export type StatesRootData = {
  elements: StateStructure[]
};

然后导入时做断言：

import states from './你的JSON文件路径.json' assert { type: 'json' } as StatesRootData;

方案3：添加运行时类型守卫（最严谨）

如果JSON数据可能来自外部输入、存在结构不符合的风险，可以写类型守卫做运行时校验，兼顾类型安全和运行时安全：

const ALLOWED_TYPES = new Set(['user', 'machine', 'abstract'] as const);
type AllowedType = typeof ALLOWED_TYPES extends Set<infer T> ? T : never;

// 类型守卫函数
function isStateStructure(obj: unknown): obj is StateStructure {
  return typeof obj === 'object' 
    && obj !== null 
    && 'type' in obj 
    && ALLOWED_TYPES.has((obj as {type: unknown}).type as AllowedType);
}

function isStatesRootData(obj: unknown): obj is StatesRootData {
  return typeof obj === 'object'
    && obj !== null
    && 'elements' in obj
    && Array.isArray((obj as {elements: unknown}).elements)
    && (obj as {elements: unknown[]}).elements.every(isStateStructure);
}

// 使用时先校验
const rawStates = require('./你的JSON文件路径.json');
if (!isStatesRootData(rawStates)) {
  throw new Error('JSON数据结构不符合要求');
}
const states = rawStates; // 此时TS已经自动识别states的类型为StatesRootData

你之前写的type: string & ('user' | 'machine' | 'abstract')写法本身等价于'user' | 'machine' | 'abstract'，不会生效的原因是JSON导入的默认类型里type已经被TS推断为string，没有做收窄，和你定义的联合类型不兼容，所以需要通过以上几种方式手动给TS提供类型信息。

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