TypeScript导入JSON数据时的类型推断异常问题

核心差异：类型赋值 vs 类型断言 #

你遇到的问题本质是严格类型赋值检查和**类型断言（Type Assertion）**的行为差异：

• 直接在App中写const data: Readonly<Node[]> = DataFamily时，TypeScript会执行严格的类型兼容性校验：它会先根据JSON内容自动推断DataFamily的类型，再对比是否完全匹配Readonly<Node[]>。如果JSON的推断类型（比如你报错里的{}）和目标类型结构不匹配，就会抛出错误。
• 而中间文件里的data as readonly Readonly<Node>[]是类型断言，相当于强制告诉TypeScript“忽略类型检查，认定这个值就是该类型”，这会直接跳过所有兼容性校验，所以即使JSON数据不符合Node类型（比如id是数字而非字符串），代码也能通过编译并运行。

JSON导入的类型推断问题 #

TypeScript导入JSON时，会自动根据文件内容生成类型，但如果你的tsconfig.json配置缺失（比如未开启resolveJsonModule），或者JSON结构复杂/不符合预期，可能会导致推断出的类型不准确（比如推断成{}而非数组），进而触发赋值时的类型错误。

正确的处理方式 #

1. 保留严格类型检查（推荐） #

使用TypeScript 4.9+新增的satisfies关键字，既能确保JSON数据符合目标类型，又不会丢失原有推断的类型信息：

import { Node } from "relatives-tree/lib/types";
import DataFamily from "../data.json";

// 确保DataFamily符合Node[]类型，同时保留其推断类型
const data = DataFamily satisfies Node[];
// 如需只读包装
const readonlyData: Readonly<Node[]> = data;

如果你的TS版本低于4.9，可以自定义类型守卫函数来校验JSON结构：

function isNodeArray(value: unknown): value is Node[] {
  if (!Array.isArray(value)) return false;
  return value.every(item => 
    typeof item.id === 'string' &&
    typeof item.name === 'string' &&
    typeof item.isAffected === 'boolean' &&
    // 此处补充其他Node属性的校验逻辑
    true
  );
}

import DataFamily from "../data.json";
if (isNodeArray(DataFamily)) {
  const data: Readonly<Node[]> = DataFamily;
  // 后续正常使用data
} else {
  // 处理数据不符合类型的情况
}

2. 安全的类型断言（仅在确认数据绝对正确时使用） #

如果必须用断言，避免直接强制转换，先转为unknown再转换，减少类型不安全的风险：

import { Node } from "relatives-tree/lib/types";
import DataFamily from "../data.json";

const data: Readonly<Node[]> = DataFamily as unknown as Readonly<Node[]>;

3. 检查TS配置 #

确保你的tsconfig.json中开启了以下配置，保证JSON导入的类型推断正常：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

内容的提问来源于stack exchange，提问作者Jan Svatoň