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
반응형