Vue+TypeScript中如何使用对象解构导入JSON模块？

你遇到的问题根源在于：当前自定义的declare module '*.json'声明只导出了一个默认的any类型对象，TypeScript没办法识别JSON内部的属性作为命名导出成员——所以当你尝试用import { logo }这种解构语法时，TS会提示找不到这个导出项。而且就算你开了resolveJsonModule，自定义的模块声明也覆盖了TS自动生成的JSON类型推断。

下面给你两种实用的解决方案：

方案一：导入后解构（最简单，推荐） #

JSON模块在ES规范里就是默认导出整个对象，所以最稳妥的写法是先导入完整对象，再解构出需要的属性，完全不用改任何类型声明：

import branding from '@src/config/branding.json';
const { logo } = branding; // 直接用这个logo变量就行

方案二：修改模块声明，支持直接解构导入 #

如果你一定要在import语句里直接解构，可以针对这个特定的JSON文件调整类型声明，让TS把内部属性识别为命名导出：

1. 在项目的src/types目录（没有的话新建一个）里创建json-modules.d.ts文件，写入：

// 先导入branding.json的类型，让TS自动推断结构
import type Branding from '@src/config/branding.json';

// 扩展这个JSON文件的模块声明
declare module '@src/config/branding.json' {
  // 把logo作为命名导出成员暴露出来，类型和原JSON里的一致
  export const logo: Branding['logo'];
  // 保留默认导出，不影响原来的用法
  export default Branding;
}

2. 确保tsconfig.json里已经配置了类型声明目录：

{
  "compilerOptions": {
    // 其他配置...
    "typeRoots": ["./src/types", "./node_modules/@types"]
  }
}

现在你就能直接这样写了：

import { logo } from '@src/config/branding.json';

提醒一下：这个方案是针对单个JSON文件的，如果有很多JSON都要这么用，逐个写声明会比较麻烦，这种情况下更推荐用方案一。另外，如果你不需要那个自定义的*.json模块声明，直接删掉它就行——开启resolveJsonModule后，TS会自动给JSON文件生成精准的类型，此时用方案一的写法还能获得完整的类型提示（不再是any）。

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