d.ts 만들기

Ambient declaration
▸기존 JavaScript 모듈을 TypeScript 에서 사용하기 용이하도
록 기존 JavaScript 모듈의 타입 정보를 별도의 파일로 선언

이미 존재하는 .d.ts 가져다 쓰기
▸npm install module-name
▸npm install @types/module-name
▸타입 선언만 포함하는 모듈
▸하지만 없을 때도 많다
▸아쉬우면 만들어 쓸 수밖에

프로젝트 내 .d.ts 선언
▸없는 모듈의 @types를 만들어서 npm에 올리면 훌륭하겠지
만
▸시간은 없고
▸모듈은 엄청나게 큰데 내가 쓸 부분은 딱 요만큼이고
▸결론: 필요한 부분만 만들어서 일단 쓰자

tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"outDir": "output",
"sourceMap": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"typeRoots": ["./node_modules/@types", "./@types"]
},
"exclude": [
"node_modules",
"output"
]
}

d.ts 작성법
▸@types 안에 해당 모듈명의 디렉토리 생성
▸생성한 디렉토리 안에 index.d.ts 생성
▸export 할 타입의 인터페이스 선언
▸해당 인터페이스 타입의 변수(상수여도 무방) 선언
▸export 선언

함수와 생성자의 타입 선언
▸함수나 생성자도 interface 로 선언 가능
▸오버로딩 가능
interface NodeRsaConstructor {
new (privateKey: string): NodeRsa;
}
interface Sender {
on(type: 'message',
listener: (id: string, body: any) => void): boolean;
on(type: 'destroy',
listener: (id: string) => void): boolean;
on(type: string,
listener: (...args: any[]) => void): boolean;
}

예제 프로젝트 다운로드 (참고용)
▸https://github.com/Gloridea/ts-seminar-dts.git

예제1: node-rsa 모듈
declare module 'node-rsa' {
interface NodeRsa {
decrypt(message: string, encoding?: string): Buffer;
encrypt(message: string, encoding?: string): Buffer;
}
interface NodeRsaConstructor {
}
let k: NodeRsaConstructor;
export = k;
}

예제1: node-rsa 모듈 - interface 추가 노출
declare module 'node-rsa' {
namespace NodeRsaNS {
export interface NodeRsaConstructor {
}
export interface NodeRsa {
decrypt(message: string, encoding?: string): Buffer;
encrypt(message: string, encoding?: string): Buffer;
}
}
const NodeRsaNS: NodeRsaNS.NodeRsaConstructor;
export = NodeRsaNS;
}

전역 타입의 확장
▸모듈 선언 내의 global { } 블럭에서 확장
global {
interface HTMLDivElement {
popup: () => string;
}
}
▸d.ts 가 아닌 일반 ts 파일 내에서도 가능
▸declare global 로 선언

참고
▸모듈 (declare module 'module-name' { … }) 바깥의 declare는 전역으
로 인식됨.
▸import 없이 사용해도 컴파일 오류 미발생 (당연히 동작 안
함)
▸한 개의 index.d.ts 파일에 여러 개의 declare module을 선언할
수 있음
▸2.1 부터 d.ts 없이도 import 됨 (Untyped imports)

d.ts 만들기

More Related Content

d.ts 만들기