Nhập tệp json trong TypeScript

Tôi có một JSONtập tin trông như sau:

{

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

Tôi đang cố gắng nhập nó vào một .tsxtập tin. Đối với điều này, tôi đã thêm điều này vào định nghĩa loại:

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

Và tôi đang nhập nó như thế này.

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

Và trong tập tin, tôi sử dụng màu primaryMainnhư colors.primaryMain. Tuy nhiên tôi gặp lỗi:

Thuộc tính 'chínhMain' không tồn tại trên loại 'typeof "* .json"

Biểu mẫu nhập khẩu và khai báo mô-đun cần thống nhất về hình dạng của mô-đun, về những gì nó xuất khẩu.

Khi bạn viết (một cách thực hành tối ưu để nhập JSON kể từ TypeScript 2.9 khi nhắm mục tiêu các định dạng mô-đun tương thích, ^{hãy xem ghi chú} )

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

Bạn đang nói rằng tất cả các mô-đun có một bộ xác định kết thúc bằng .jsonmột lần xuất có tên duy nhất default.

Có một số cách bạn có thể tiêu thụ chính xác một mô-đun như vậy bao gồm

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

và

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

và

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

và

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

Hình thức đầu tiên là tốt nhất và đường cú pháp mà nó tận dụng là lý do JavaScript defaultxuất khẩu.

Tuy nhiên tôi đã đề cập đến các hình thức khác để cho bạn một gợi ý về những gì đang xảy ra. Đặc biệt chú ý đến cái cuối cùng. requirecung cấp cho bạn một đối tượng đại diện cho chính mô-đun chứ không phải các ràng buộc xuất khẩu của nó.

Vậy tại sao lại có lỗi? Bởi vì bạn đã viết

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

Nhưng chưa có xuất khẩu được đặt tên primaryMaincủa bạn "*.json".

Tất cả điều này giả định rằng trình tải mô-đun của bạn đang cung cấp JSON dưới dạng defaultxuất theo đề xuất của khai báo ban đầu của bạn.

Lưu ý: Kể từ TypeScript 2.9, bạn có thể sử dụng --resolveJsonModulecờ trình biên dịch để TypeScript phân tích .jsoncác tệp đã nhập và cung cấp thông tin chính xác về hình dạng của chúng mà không cần phải khai báo mô-đun ký tự đại diện và xác thực sự hiện diện của tệp. Điều này không được hỗ trợ cho các định dạng mô-đun đích nhất định.

Với TypeScript 2.9. + Bạn chỉ có thể nhập các tệp JSON với loại an toàn và intellisense như thế này:

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

Đảm bảo thêm các cài đặt này trong compilerOptionsphần tsconfig.json( tài liệu ) của bạn :

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

Ghi chú bên:

• Bản đánh máy 2.9.0 có lỗi với tính năng JSON này, nó đã được sửa với 2.9.2
• EsModuleInterop chỉ cần thiết cho việc nhập mặc định của colorsJson. Nếu bạn đặt nó thành false thì bạn phải nhập nó vớiimport * as colorsJson from '../colors.json'

Thật dễ dàng để sử dụng phiên bản 2.9+. Vì vậy, bạn có thể dễ dàng nhập các tệp JSON khi @bestor giải mã .

Nhưng nếu bạn cần sử dụng các phiên bản cũ hơn:

Bạn có thể truy cập các tệp JSON theo cách TypeScript hơn. Trước tiên, hãy đảm bảo typings.d.tsvị trí mới của bạn giống với includetài sản trong tsconfig.jsontệp của bạn .

Nếu bạn không có tài sản bao gồm trong tsconfig.jsontập tin của bạn . Sau đó, cấu trúc thư mục của bạn sẽ như thế:

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

Nhưng nếu bạn có một includetài sản trong tsconfig.json:

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

Sau đó, bạn typings.d.tsnên ở trong srcthư mục như được mô tả trong includetài sản

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

Như trong nhiều phản hồi, Bạn có thể xác định khai báo chung cho tất cả các tệp JSON của mình.

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

nhưng tôi thích một phiên bản đánh máy hơn của điều này. Chẳng hạn, giả sử bạn có tệp cấu hình config.jsonnhư thế:

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

Sau đó chúng ta có thể khai báo một loại cụ thể cho nó:

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

Thật dễ dàng để nhập các tệp bản thảo của bạn:

import * as Config from 'config.json';

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

Nhưng trong giai đoạn biên dịch, bạn nên sao chép các tệp JSON vào thư mục dist của mình theo cách thủ công. Tôi chỉ cần thêm một thuộc tính tập lệnh vào package.jsoncấu hình của mình :

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

Trong tệp Định nghĩa TS của bạn, ví dụ: typings.d.ts`, bạn có thể thêm dòng này:

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

Sau đó thêm phần này vào tệp bản thảo (.ts) của bạn: -

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

Một cách khác để đi

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

Đây là bạn vẫn có thể xác định loại json là bạn muốn và không phải sử dụng ký tự đại diện.

Ví dụ, loại json tùy chỉnh.

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

Thông thường trong các ứng dụng Node.js cần có một .json. Với TypeScript 2.9, --resolveJsonModule cho phép nhập, trích xuất các loại từ và tạo tệp .json.

Thí dụ #

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