我有一个JSON文件,看起来如下:
{
"primaryBright": "#2DC6FB",
"primaryMain": "#05B4F0",
"primaryDarker": "#04A1D7",
"primaryDarkest": "#048FBE",
"secondaryBright": "#4CD2C0",
"secondaryMain": "#00BFA5",
"secondaryDarker": "#009884",
"secondaryDarkest": "#007F6E",
"tertiaryMain": "#FA555A",
"tertiaryDarker": "#F93C42",
"tertiaryDarkest": "#F9232A",
"darkGrey": "#333333",
"lightGrey": "#777777"
}
我正试图将其导入到。tsx文件中。为此,我在类型定义中添加了如下内容:
declare module "*.json" {
const value: any;
export default value;
}
我像这样导入它。
导入颜色= require('../colors.json')
在文件中,我使用颜色primaryMain作为colors。primaryMain。但是我得到一个错误:
属性“primaryMain”在类型“*.json”中不存在
导入表单和模块声明需要就模块的形状以及它导出的内容达成一致。
当你编写(导入JSON的次优做法,因为TypeScript 2.9在目标兼容模块格式时,请参阅注释)
declare module "*.json" {
const value: any;
export default value;
}
您正在声明所有以.json结尾的说明符的模块都有一个名为default的导出。
有几种方法可以正确地使用这样的模块,包括
import a from "a.json";
a.primaryMain
and
import * as a from "a.json";
a.default.primaryMain
and
import {default as a} from "a.json";
a.primaryMain
and
import a = require("a.json");
a.default.primaryMain
第一种形式是最好的,它所利用的语法糖正是JavaScript拥有默认导出的原因。
不过,我提到了其他表单,以提示您哪里出了问题。特别注意最后一个。Require为您提供了一个表示模块本身的对象,而不是它导出的绑定。
那么为什么会出现错误呢?因为你写了
import a = require("a.json");
a.primaryMain
但是你的“*.json”并没有声明名为primaryMain的导出。
所有这些都假设您的模块加载器按照原始声明的建议提供JSON作为默认导出。
注意:从TypeScript 2.9开始,你可以使用——resolveJsonModule编译器标志来让TypeScript分析导入的.json文件,并提供关于其形状的正确信息,从而避免了通配符模块声明和验证文件的存在。某些目标模块格式不支持这一点。