在TypeScript中导入json文件

我有一个如下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。但是我得到一个错误：

属性'primaryMain'在类型'typeof“ * .json”上不存在

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

编写时（自TypeScript 2.9导入JSON时，针对兼容模块格式的次佳实践^{请参见note}）

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

您要说明所有以指定符结尾的模块都有一个名为的.json导出。 default

有几种方法可以正确使用此类模块，包括

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"。

所有这些都假定您的模块加载器default按照原始声明的建议将JSON作为导出提供。

注意：从TypeScript 2.9开始，您可以使用--resolveJsonModule编译器标志来让TypeScript分析导入的.json文件，并提供有关其形状的正确信息，从而避免了通配符模块声明的需要并验证了文件的存在。某些目标模块格式不支持此功能。

使用TypeScript 2.9。+，您可以像这样简单地导入具有类型安全性和智能感知的JSON文件：

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

确保在（文档）的compilerOptions部分中添加以下设置：tsconfig.json

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

旁注：

• Typescript 2.9.0具有此JSON功能的错误，已在2.9.2中修复。
• esModuleInterop仅对于默认导入colorsJson是必需的。如果将其设置为false，则必须使用import * as colorsJson from '../colors.json'

使用2.9版以上的打字稿很容易。因此，您可以轻松地将@kentor描述为JSON文件导入。

但是，如果您需要使用旧版本：

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

如果您的tsconfig.json文件中没有include属性。然后，您的文件夹结构应如下所示：

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

在您的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;

另一种方式

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

这是您仍然可以定义所需的json类型，而不必使用通配符。

例如，自定义类型json。

interface User {
  firstName: string;
  lastName: string;
  birthday: Date;
}
const user: User = require('./user.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
}