Typescript - 써드파티 라이브러리 타입 정의 방법(.d.ts)

 

 

 

[Typescript] 써드파티 라이브러리 타입 정의 방법(.d.ts)

 

 

 

Typescript를 사용하는 도중 항상 부딛히는 문제중 하나는 타입의 대한 정의라고 생각한다.

그 중 서드파티 라이브러리를 사용하면서 타입스크립트를 지원하지 않는 라이브러리를 사용할 때 타입을 직접 선언을 해야하기 때문에 정말 골머리가 깨지는 경우가 많다고 생각한다.

타입스크립트를 지원하지 않는 서드파티 라이브러리는 index.d.ts 파일을 생성해 직접 타입을 선언해 해결 할 수 있다.

 

 

1. index.d.ts를 만들어보자.

 

 

index.d.ts를 만들기 전에 몇 가지 설정을 해야될 부분이 있다.

첫번째로 'tsconfig.ts' 파일을 수정해준다.

"compilerOptions"에 "typeRoots" 속성을 추가해 주고 배열 안에 index.d.ts를 선언 할 Root를 설정해 준다.

이때 typeRoot는 자신이 원하는 경로를 지정하고 설정할 수 있다.

두번째로 typeRoot로 지정된 곳에 index.d.ts 파일을 만들어 주면 된다.

 

 

 

 

2. index.d.ts 선언 방식

 

index.d.ts의 기본 선언 방식을 앰비어트 선언(ambient declarations)라고 한다.

앰비어트 선언의 앰비어트(ambient)라는 말은 타입스크립트 컴파일러에 JS에 대한 구현 '환경'에 대한 정보를 준다라고 이해할 수 있다.

 

declare는 '모듈(module)'이라는 선언이다. 그리고 아래 코드 hello의 변수의 대한 선언은 앰비언트 변수(ambient variables)라고 한다.

// ambient variables declare var hello: any; 

module 키워드를 사용해 앰비언트 모듈(ambient module)을 선언 할 수도 있다. 이때 모듈 내에는 Interface, class, function등의 요소를 선언할 수 있다. 또한 큰따옴표를 통해 모듈의 이름을 정의할 수 도 있다.

// ambient module declare module "module1" { ... } 

이름으로 선언된 모듈은 import * as 커스텀 모듈명으로 가져올 수 있다.

// import ambient module import * as Module from 'module1'; let test = Module.func(....); 

module이나 네임스페이스는 동등하게 사용되므로 앰비언트 네임스페이스(ambient Namespace)를 선언할 수도 있다.

또한 편의상 namespace를 정의하지 않고 축약해 사용할 수도 있다.

// namespace ambient module declare namespace module1 { ... } or declare module1 { ... }

 

 

 

.ts와 .d.ts의 선언 방식의 차이

.ts	.d.ts
var a = 1	declare var a: number
let a = 1	declare let a: number
const a = 1	declare const : 1
function a(b) { ... }	declare function a(b: number): string
class A { b() { return 3 } }	declare class A { b() : number }
namespace A { }	declare namespace A {}
type A = number	type A = number
interface A { b?: string }	interface A { b?: string }

 

 

3. Module Export의 종류

 

1. Global Export

 

모듈이 전역 네임스페이스에 값을 할당만 하고 익스포트 하는건 아무것도 없다면 스크립트 모두 파일을 만들고 변수, 함수, 클래스 선언 앞에 'declare' 추가할 수 있다.

// 전역 선언의 예. declare let someGlobal: GlobalType // 전역 변수 declare class GlobalClass {} // 전역 클래스 declare function globalFunction(): string // 전역 함수 

각 선언은 명시적으로 임포트하지 않고도 프로젝트의 모든 파일에서 전역적으로 사용이 가능하다.

2. ES2015 Export

 

모듈이 export 키워드를 사용한다면 declare를 export로 바꾸기만 하면 된다.

// ES2015 익스포트의 예. declare let defaultExport: SomeType export default defaultExport 

3. CommonJS Export

 

ES2015 전에는 CommonJS가 모듈의 표준으로 사용되었으며 CommonJS도 export 키워드를 사용하지만 문법이 조금 다르다.

서드 파티 CommonsJS 모듈을 위한 타입 선언은 익스포트를 한 개만 포함 할 수 있지만 여러 가지를 익스포트 하려면 선언 합침을 이용해야 한다.

// 네임스페이스를 하나로 모아서 익스포트 하는 예 declare namespace Module1 { 	export let someExport: SomeType 	export type SomeType = number 	export class OtherExport { 		otherType: string 	} }  export = Module1 

 

 

참조 : Typescript Quick Start, 타입스크립트 프로그래밍