Angular 4项目中导入JSON并匹配TypeScript接口的问题求助

我帮你梳理下问题根源和解决办法：你现在的typings.d.ts把所有.json模块都声明成了any类型，TypeScript没法识别它和IDictionary接口的匹配关系，所以会抛出类型不兼容的报错。下面是几个靠谱的解决方案：

方案一：给目标JSON文件添加精确类型声明 #

修改你的typings.d.ts，针对dictionary.json单独做类型绑定，替换掉通用的any声明：

/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule { id: string; }

// 替换成你实际存放IDictionary接口的文件路径
import { IDictionary } from './path-to-your-interface';

// 为dictionary.json指定精确的接口类型
declare module './dictionary.json' {
  const value: IDictionary;
  export default value;
}

之后导入时直接使用就不会报错了：

import dictionary from './dictionary.json';
export const Dictionary: IDictionary = dictionary;

方案二：用类型断言快速解决（轻量化方案） #

如果不想改动全局类型文件，可以在导入时用类型断言明确告诉TypeScript这个JSON的类型：

import * as dictionary from './dictionary.json';
export const Dictionary = dictionary as IDictionary;

这种方式适合单个文件的场景，能快速解决类型不匹配的问题。

方案三：启用TypeScript官方的JSON模块解析（推荐） #

从TypeScript 2.9版本开始，官方支持直接解析JSON文件，不需要手动写类型声明。只需要在tsconfig.json里开启两个配置：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true // 配合使用，避免导入语法冲突
  }
}

开启后，TypeScript会自动解析JSON的结构，你可以直接导入并指定IDictionary类型：

import dictionary from './dictionary.json';
export const Dictionary: IDictionary = dictionary;

而且如果JSON的结构和IDictionary不匹配，TypeScript会直接给出错误提示，完美保留类型校验的优势。

补充：为什么用any能运行？ #

因为any类型会完全跳过TypeScript的类型校验，不管JSON内容是什么都能赋值，但这样就失去了TypeScript类型系统的意义，所以不建议长期使用。

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