การนำเข้าไฟล์ json ใน TypeScript

ฉันมี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 "

แบบฟอร์มการนำเข้าและการประกาศโมดูลจำเป็นต้องตกลงเกี่ยวกับรูปร่างของโมดูลเกี่ยวกับสิ่งที่ส่งออก

เมื่อคุณเขียน (แนวทางปฏิบัติที่ไม่เหมาะสมสำหรับการนำเข้า JSON ตั้งแต่ TypeScript 2.9 เมื่อกำหนดเป้าหมายรูปแบบโมดูลที่เข้ากันได้^{โปรดดูหมายเหตุ} )

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"

ทั้งหมดนี้ถือว่าตัวโหลดโมดูลของคุณกำลังจัดเตรียม JSON เป็นการdefaultส่งออกตามที่แนะนำโดยการประกาศเดิมของคุณ

หมายเหตุ:ตั้งแต่ TypeScript 2.9 คุณสามารถใช้--resolveJsonModuleแฟล็กคอมไพเลอร์เพื่อให้ TypeScript วิเคราะห์.jsonไฟล์ที่อิมพอร์ตและให้ข้อมูลที่ถูกต้องเกี่ยวกับรูปร่างที่ขัดขวางความต้องการในการประกาศโมดูลไวด์การ์ดและตรวจสอบความถูกต้องของไฟล์ ไม่รองรับรูปแบบโมดูลเป้าหมายบางรูปแบบ

ด้วย TypeScript 2.9 + คุณสามารถนำเข้าไฟล์ JSON ด้วย typesafety และ intellisense ได้ดังนี้:

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 เท่านั้น หากคุณปล่อยให้เป็นเท็จคุณต้องนำเข้าด้วยimport * as colorsJson from '../colors.json'

ใช้งานง่าย typescript เวอร์ชัน 2.9+ เพื่อให้คุณสามารถนำเข้าไฟล์ JSON เป็น@kentor อธิบายไว้

แต่ถ้าคุณต้องการใช้เวอร์ชันเก่า:

คุณสามารถเข้าถึงไฟล์ JSON ด้วยวิธี TypeScript เพิ่มเติม ขั้นแรกตรวจสอบให้แน่ใจว่าtypings.d.tsตำแหน่งใหม่ของคุณตรงกับincludeคุณสมบัติในtsconfig.jsonไฟล์ของคุณ

หากคุณไม่มีคุณสมบัติ include ใน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;
}

ง่ายต่อการนำเข้าในไฟล์ typescript ของคุณ:

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 Definition ของคุณเช่น typings.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
}