在TypeScript中导入json文件

Question

我有一个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;
}

而我正在这样导入它.

import colors = require('../colors.json')

该文件中,我使用的颜色primaryMain作为colors.primaryMain.但是我得到一个错误 - JSON

我究竟做错了什么？

Answer 1

使用TypeScript 2.9.+,您只需导入类型安全和智能感知的JSON文件,如下所示:

import colorsJson from '../colors.json';
console.log(colorsJson.primaryBright);

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

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

附注:

• Typescript 2.9.0有一个这个JSON功能的bug,我相信它已经修复了2.9.1或2.9.2
• esModuleInterop仅对colorsJson的默认导入是必需的.如果将其设置为false,则必须将其导入import * as colorsJson from '../colors.json'

Answer 2

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

当你写作

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

您声明所有具有结尾的说明符的模块都有一个.json名为defaulttype的导出any.

有几种方法可以使用这样的模块,包括

import a from "a.json";
a.primaryMain

和

import * as a from "a.json";
a.default.primaryMain

和

import {default as a} from "a.json";
a.primaryMain

和

import a = require("a.json");
a.default.primaryMain

第一种形式是最好的,它利用的语法糖是JavaScript default出口的原因.

但是我提到了其他形式,可以提供一些关于出了什么问题的提示.特别注意最后一个.require为您提供一个表示模块本身的对象,而不是其导出的绑定.

那么为什么会出错呢？因为你写了

import a = require("a.json");
a.primaryMain

然而,没有primaryMain你的名字声明的出口"*.json".

所有这些都假设您的模块加载器正在提供JSON作为default原始声明建议的导出.

Answer 3

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

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

这样，您可以避免在导入大文件时出现 tsc 速度减慢或内存不足的问题，这种情况在使用resolveJsonModule 时可能会发生。

Answer 4

就我而言，我需要更改tsconfig.node.json：

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

并像这样导入：

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

或者像这样：

import colors from './colors.json'

与“esModuleInterop”：true

Answer 5

在 Angular（打字稿）应用程序中，我需要.json在我的environment.ts. 为此，我必须在 tsconfig 中设置两个选项：

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

然后，我可以将 json 文件导入到environment.ts：

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

Answer 6

它很容易使用打字稿版本2.9+.因此,您可以轻松导入JSON文件,如@kentor所述.

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

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

如果您的tsconfig.json文件中没有包含属性.然后你的文件夹结构应该是这样的:

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

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

{
    "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;
}

在您的打字稿文件中导入很容易:

import * as Config from 'config.json';

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

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

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

Answer 7

您可以通过显式指定要导入 JSON 来导入 JSON 文件，而无需修改 tsconfig

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

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

Answer 8

另一种方式

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

这是您仍然可以定义 json 类型是您想要的并且不必使用通配符。

例如，自定义类型 json。

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

Answer 9

Often in Node.js applications a .json is needed. With TypeScript 2.9, --resolveJsonModule allows for importing, extracting types from and generating .json files.

Example #

// 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

Answer 10

在您的TS定义文件中，例如，types.d.ts`，您可以添加以下行：

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

然后将其添加到您的typescript（.ts）文件中：

import * as data from './colors.json';
const word = (<any>data).name;

Answer 11

你应该添加

"resolveJsonModule": true

作为 tsconfig.json 的 compilerOptions 的一部分。