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。但是我收到错误 - Property 'primaryMain' does not exist on type 'typeof "*.json"

我做错了什么？

Answer 1

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

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

请务必在compilerOptions（documentation）的tsconfig.json部分添加这些设置：

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

旁注：

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

Answer 2

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

撰写时（自TypeScript 2.9 ^参见注释以来JSON文件的错误做法）

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

您声明所有具有以.json结尾的说明符的模块都有一个名为default的导出，其类型为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导出。

注意：从TypeScript 2.9开始，您可以使用--resolveJsonModule compiler flag让TypeScript分析导入的.json文件，并提供有关其形状的正确信息，从而无需使用通配符模块声明并验证文件的存在。

Answer 3

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

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

您可以使用更多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/"
    }
}

Answer 4

在您的TS定义文件中，例如typings.d.ts`，你可以添加这一行：

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

然后在打字稿（.ts）文件中添加：

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

Answer 5

你应该添加

"resolveJsonModule": true

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

Answer 6

在使用 resolveJsonModule 直接导入大文件时，我遇到了 tsc 变慢或内存不足的问题。在运行时读取文件没有这些问题。

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

Answer 7

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

创建者：https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

Answer 8

在"resolveJsonModule": true文件中启用tsconfig.json并按以下代码实施，对我来说是有用的：

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

Answer 9

请注意，如果您使用 @kentor ways

<块引用>

确保在 tsconfig.json (documentation) 的 compilerOptions 部分中添加这些设置：

您需要在 sys.path 命令后面添加 --resolveJsonModule 和--esModuleInterop 才能编译您的 TypeScript 文件。

示例： tsc

Answer 10

另一种方式

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

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

例如，自定义类型json。

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

在TypeScript中导入json文件

10 个答案: