Question

在这里：https://hackernoon.com/import-json-into-typescript-8d465beded79，我读到可以将JSON对象导入到我的TypeScript项目中。我用以下JSON做到了：

{
  "defaultLanguage": "en",
  "languageMap": {
    "en": "English",
    "pl": "Polish",
    "de": "German"
  }
}

我现在想确保此文件的任何未来更改都不会破坏我的应用程序，因此我向导入的对象引入了以下接口：

export default interface IConfig {
  defaultLanguage: string;
  languageMap: ILanguage
}

interface ILanguage {
  [language: string]: string
}

我更改了typings.d.ts文件：

declare module "*.json" {
  const value: any;
  export default value;
}

导入我的Angular组件：

import IConfig from './IConfig';          // Tried to put IConfig 
                                          // as a type in multiple places.
import * as config from './config.json';
(...)
private languageMap = config.languageMap; // in this line my Visual Studio Code 
                                          // underlines languageMap and shows
                                          // the following error:

[ts] Property＆＃39; languageMap＆＃39;在类型＆＃34; typeof＆＃34; * .json＆＃34;＆＃39;。
上不存在

以下：

任何

我想知道是否有办法不使用(<any>config).languageMap，而是包含我的IConfig界面，如上面的链接所示。

Answer 1

模块*.json模块定义一个通配符模块，该模块将匹配以json结尾的任何文件，并将json值键入any。您可以为config.json定义更具体的模块。

您可以在描述json的config.json.d.ts文件旁放置config.json：

//config.json.d.ts
interface IConfig {
    defaultLanguage: string;
    languageMap: ILanguage
}

interface ILanguage {
    [language: string]: string
}
declare const value: IConfig;
export = value;

// usage.ts
import * as config from './config.json';

var languageMap = config.defaultLanguage; // All ok

或者，如果您使用模块系统taht不支持export=value，您可以使用此定义：

//config.json.d.ts
export let defaultLanguage: string;
export let languageMap: ILanguage

interface ILanguage {
    [language: string]: string
}

彻底编写JSON对象类型的正确方法

1 个答案: