VS Code中JSON无法新增属性并调用的TypeScript问题

问题根源 #

TypeScript是静态类型检查语言，若你未给JSON文件显式声明类型，或之前的类型缓存未更新，新增属性后就会触发类型不匹配错误。另外你提供的JSON存在语法错误（开头多了一个}），这会先导致JSON解析失败，也间接影响类型推断。

解决步骤 #

1. 修复JSON语法错误 #

先修正JSON的格式问题，正确内容如下：

{
    "firmware": "2.0",
    "expiry": "'1year'",
    "test": "ts"
}

2. 给JSON文件添加显式类型声明 #

创建一个类型声明文件（比如data.d.ts），定义JSON的结构：

interface DataConfig {
  firmware: string;
  expiry: string;
  test: string;
}

declare module './你的JSON文件路径.json' {
  const value: DataConfig;
  export default value;
}

将./你的JSON文件路径.json替换为实际的文件路径。

3. 确保TypeScript能正确解析JSON #

检查项目根目录的tsconfig.json，确认开启了resolveJsonModule选项：

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

4. 清除缓存并重启服务 #

如果是在开发环境中，重启你的开发服务器，或者执行tsc --clearCache清除TypeScript的类型缓存，确保新的类型定义生效。

5. 重新导入使用 #

在代码中正常导入JSON即可，TypeScript会自动识别新的类型：

import data from './你的JSON文件路径.json';

const example = new EPage(page, data.firmware, data.expiry, data.test);

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