如何导入在外部json文件中定义的地图?

时间:2019-04-08 17:30:22

标签: json reactjs typescript

我有以下包含配置的json文件:

{
   "config1": { //this would be a map
      "a": [ "string1", "string2"],
      "b": [ "string1", "string2"]
   }
}

在迁移到打字稿之前,需要进行以下工作:

import * as myConfig from './config.json';
...
myConfig.config1[this.state.section]; //section would be either "a" or "b"

现在代码给了我

  

元素隐式地具有“ any”类型,因为blablabla没有索引签名

请注意,我确保在tsconfig文件中设置了以下内容:

"esModuleInterop": true,
"resolveJsonModule": true,

但是它仍然不起作用。 我想念什么?

编辑:

似乎与运行时验证有关,以下似乎很好:

myConfig.config1["a"]; //alright!

但这不是:

const name:string = "a";
myConfig.config1[name]; //NOT!

不管我需要传递一个变量..我该怎么做? :(

1 个答案:

答案 0 :(得分:0)

您不再需要星号。从Typescript 2.9开始(我可能对特定版本感到不满),您只需import myConfig from './config.json';

如果您仍然遇到此问题,我想您的配置文件中没有typedef,因此Typescript Transpiler无法获得导入对象的结构。

  • 在项目的@types文件夹中创建src目录
  • myConfig.d.ts内创建@types
  • myConfig.d.ts中定义配置文件的结构,例如:
declare module "myConfig.json" {
   const config: object;
   export default config;
}

为了使“括号符号”起作用,您的配置类型应定义一个索引签名,例如:

interface IConfig {
    [ key: string ]: object;
}

您可以详细了解https://www.typescriptlang.org/docs/handbook/interfaces.html#indexable-types