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


当前回答

通常在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

其他回答

通常在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

另一种方法

const data: {[key: string]: any} = require('./data.json');

你仍然可以定义json类型,不需要使用通配符。

例如,自定义类型json。

interface User {
  firstName: string;
  lastName: string;
  birthday: Date;
}
const user: User = require('./user.json');

您可以导入JSON文件,而不需要显式地修改tsconfig,即您正在导入JSON

import mydata  from './mydataonfile.json' assert { type: "json" };

我知道这并不能完全回答问题,但是很多人来这里是想知道如何直接从文件加载JSON。

在tsconfig中启用"resolveJsonModule": true。Json文件和实现如下代码,这是我的工作:

const config = require('./config.json');

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

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

像这样导入:

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

或者像这样:

import colors from './colors.json'

with "esModuleInterop": true