[json] 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
있어야합니다.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 정의 파일 (예 : 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
}
작성자 : https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html