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. 그러나 오류가 발생합니다.

'typeof "* .json"유형에'primaryMain '특성이 없습니다.

가져 오기 양식과 모듈 선언은 모듈의 모양, 내보내는 내용에 대해 동의해야합니다.

쓸 때 (호환 가능한 모듈 형식을 대상으로 할 때 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. +를 사용하면 다음과 같이 typesafety 및 intellisense를 사용하여 JSON 파일을 간단히 가져올 수 있습니다.

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

( documentation ) compilerOptions섹션에 다음 설정을 추가하십시오 .tsconfig.json

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

사이드 노트 :

• Typescript 2.9.0에는이 JSON 기능에 버그가 있으며 2.9.2로 수정되었습니다.
• esModuleInterop는 colorsJson의 기본 가져 오기에만 필요합니다. false로 설정 한 상태에서 가져와야합니다.import * as colorsJson from '../colors.json'

typescript 버전 2.9 이상을 사용하는 것이 쉽습니다. 따라서 @kentor decribed 로 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있어야합니다.srcinclude

+ 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 정의 파일 (예 : 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
}