我有一个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”中不存在


当前回答

使用TypeScript 2.9。+你可以简单地导入JSON文件,这样做有类型安全和智能感知的好处:

import colorsJson from '../colors.json'; // This import style requires "esModuleInterop", see "side notes"
console.log(colorsJson.primaryBright);

确保在tsconfig的compilerOptions部分添加这些设置。json(文档):

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

边注:

Typescript 2.9.0在这个JSON特性上有一个bug,它在2.9.2被修复了 esModuleInterop只对colorsJson的默认导入是必需的。如果你将其设置为false,那么你必须使用import * as colorsJson从'../colors.json'导入它

其他回答

在我的情况下,我需要改变tsconfig.node.json:

{
  "compilerOptions": {
    ...
    "resolveJsonModule": true
  },
  "include": [..., "colors.json"]
}

像这样导入:

import * as colors from './colors.json'

或者像这样:

import colors from './colors.json'

with "esModuleInterop": true

导入表单和模块声明需要就模块的形状以及它导出的内容达成一致。

当你编写(导入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文件,并提供关于其形状的正确信息,从而避免了通配符模块声明和验证文件的存在。某些目标模块格式不支持这一点。

下面是如何在运行时导入json文件

import fs from 'fs'
var dataArray = JSON.parse(fs.readFileSync('data.json', 'utf-8'))

这样就避免了在导入大文件时tsc变慢或内存不足的问题,这些问题都可能发生在使用resolveJsonModule时。

在我的情况下,我必须改变:"include": ["src"]到"include":["。除了“resolveJsonModule”:true,因为我试图导入manifest。Json来自项目的根目录,而不是来自。/src

通常在Node.js应用程序中需要一个.json。在TypeScript 2.9中,——resolveJsonModule允许从.json文件中导入、提取类型并生成。

例#

// tsconfig.json { "compilerOptions": { "module": "commonjs", "resolveJsonModule": true, "esModuleInterop": true } } // .ts import settings from "./settings.json"; settings.debug === true; // OK settings.dry === 2; // Error: Operator '===' cannot be applied boolean and number // settings.json { "repo": "TypeScript", "dry": false, "debug": false } by: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html