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


当前回答

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

const config = require('./config.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

使用typescript 2.9+版本很容易。因此,您可以轻松地导入JSON文件@kentor描述。

但如果你需要使用旧版本:

你可以用更多的TypeScript方式访问JSON文件。首先,确保新的typings.d.ts位置与tsconfig中的include属性相同。json文件。

如果在tsconfig中没有include属性。json文件。然后你的文件夹结构应该是这样的:

- app.ts
+ node_modules/
- package.json
- tsconfig.json
- typings.d.ts

但是如果你在tsconfig.json中有一个include属性:

{
    "compilerOptions": {
    },
    "exclude"        : [
        "node_modules",
        "**/*spec.ts"
    ], "include"        : [
        "src/**/*"
    ]
}

然后你的typings.d.ts应该在src目录中,如include属性所述

+ node_modules/
- package.json
- tsconfig.json
- src/
    - app.ts
    - typings.d.ts

在许多响应中,您可以为所有JSON文件定义一个全局声明。

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

但我更喜欢打字的版本。例如,假设您有配置文件config。这样的Json:

{
    "address": "127.0.0.1",
    "port"   : 8080
}

然后我们可以为它声明一个特定的类型:

declare module 'config.json' {
    export const address: string;
    export const port: number;
}

它很容易在你的typescript文件中导入:

import * as Config from 'config.json';

export class SomeClass {
    public someMethod: void {
        console.log(Config.address);
        console.log(Config.port);
    }
}

但是在编译阶段,您应该手动将JSON文件复制到dist文件夹。我只是向我的包添加了一个脚本属性。json配置:

{
    "name"   : "some project",
    "scripts": {
        "build": "rm -rf dist && tsc && cp src/config.json dist/"
    }
}

在一个Angular (typescript)应用中,我需要在我的environment.ts中包含一个.json文件。要做到这一点,我必须在tsconfig中设置两个选项:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "resolveJsonModule": true
  }
}

然后,我可以将我的json文件导入到environment.ts:

import { default as someObjectName } from "../some-json-file.json";

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

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

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