Front-end/Typesrcipt
Typescript - d.ts
Cuvely
2023. 4. 18. 23:32
728x90
반응형
Typescript d.ts
Typescript d.ts 파일이란 타입정의들을 보관하는 파일이다.
d.ts파일은 자동으로 글로벌 모듈이 아니여서 다른파일이 참조하여 사용 할 수 없다.
// test.d.ts
// 타입들의 정의를 보관하는 파일이다.
export type Age = number; // export 키워드를 사용하여 다른 타입스크립트 파일에서 사용한다.
export interface Person {
name: string
}
모든 타입들을 정리해 놓은 레퍼런스용 d.ts 파일을 자동으로 생성하기 위해선 tsconfig.json 파일에서 옵션을 추가한다.
// tsconfig.jon
{
"compilerOptions": {
"target": "ES5",
"module": "CommonJS",
"strictNullChecks": true,
"declaration": true // declaration 옵션을 추가
},
}
declaration 옵션을 추가하면 타입스크립트 파일을 저장 할 때 마다 d.ts파일이 자동으로 생성이된다.
// index.ts
// declaration 옵션을 추가한 후 변수를 저장한다.
let myName: string = 'zelord';
type Info = { name: string };
declaration 옵션을 추가한 후 저장을 하면 자동으로 index.d.ts 파일이 생성된다.
// index.d.ts
// 자동으로 파일이 생성되어 타입정의들을 보관한다.
declare let myName: string;
type Info = {
name: string;
};
자동으로 생성되는 d.ts파일들은 수정하면 안된다.
반응형
d.ts 파일들을 글로벌 모듈로 만들기 위해선 tsconfig.json 파일에서 typeRoots 옵션을 추가해줘야한다.
// tsconfig.jon
{
"compilerOptions": {
"target": "ES5",
"module": "CommonJS",
"strictNullChecks": true,
"declaration": true,
"typeRoots": ["./폴더명"], // 폴더안에 들어있는 타입들은 글로벌 모듈이된다.
},
}
폴더명을 입력한 후 폴더를 생성해서 그 폴더안에 d.ts파일을 넣어준다.
typeRoots 옵션을 선언하면 외부라이브러리 타입들을 사용할 수 있는 @types 폴더가 자동으로 선언되지않아 추가를 해주어야한다.
// ./types/common 파일 속 test.d.ts파일
type Age = number;
test.d.ts 파일 속 타입을 선언한다.
// index.ts
let myName: Age = 27; // test.d.ts 파일 안에 선언된 타입을 사용할 수 있다.
test.d.ts 파일 속 선언된 타입을 불러와 타입을 선언한다.
728x90
반응형