.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
declare
•
Ambient Declaration : TypeScript로 작성하지 않은 코드의 타입 정보를 컴파일러에게 알려주는 선언
◦
대게 외부 사용자에게 내가 만든 라이브러리의 타입 정보를 알려줄 목적으로 d.ts 파일을 정의할 때 Ambient Declaration을 이용
◦
Ambient Declaration을 작성할 때 declare 키워드를 사용
declare 선언 타입 유형
declare namespace
Internal Module | Ambient Namespace
•
컴파일러는 namespace로 선언한 TS 코드를 JS 일반 객체로 컴파일 하는데, declare 키워드를 붙여주면 JS 코드로 컴파일 X
•
위와 같이 객체의 타입 정보만 알려줄 목적으로 declare namespace를 사용
declare namespace D3 {
export interface Selectors {
select: {
(selector: string): Selection;
(element: EventTarget): Selection;
};
}
export interface Event {
x: number;
y: number;
}
export interface Baseextends Selectors {
event: Event;
}
}
declarevar d3: D3.Base;
TypeScript
복사
declare module
Ambient Module
•
declare module로 선언한 타입만 가진 모듈
•
Ambient Module이 컴파일 대상에 포함이 되어있기만 하면 TypeScript 컴파일러는 자동으로 타입을 인지 가능
•
이는 Ambient Namespace와 유사한데 import를 할 때 동작한다는 점이 상이
declare module "url" {
export interface Url {
protocol?: string;
hostname?: string;
pathname?: string;
}
export function parse(urlStr: string, parseQueryString?, slashesDenoteHost?): Url;
}
declare module "path" {
export function normalize(p: string): string;
export function join(...paths: any[]): string;
export var sep: string;
}
}
TypeScript
복사
// 클라이언트는 외부 라이브러리를, 마치 TypeScript 모듈인 것처럼 import 해서 사용 가능
// <reference path="node.d.ts"/>import*as URLfrom "url";
let myUrl= URL.parse("<http://www.typescriptlang.org>");
TypeScript
복사
declare global
전역 개체는 특별한 존재이며 import로 참조할 수 없는 모듈이기 때문에 TypeScript는 전역 개체의 타입을 커스텀하는 별도의 문법을 제공한다.
declare global 블럭 안에 선언한 타입은 전역 개체의 프로퍼티 타입으로 정의된다.
// 컴파일러는 export/import 구문이 없는 파일은 스크립트로 인지한다.declare global {
var country: any;
function multiply(a: number, b: number): number;
}
TypeScript
복사
그런데 TypeScript 컴파일러는 고유의 컴파일 규칙을 따라서 export/import 구문이 없는 파일은 일반 스크립트(그렇지 않은 경우는 모듈로 취급)로 취급한다. 위의 declare global 선언은 스크립트가 존재하는 스코프에 속하기 때문에 다른 모듈은 이 타입을 인지할 수 없다. 이 지점이 실체가 좀 아리까리한데 시간 날 때 더 파볼 생각이다.
이 문제는 아래와 같이 빈 export 구문을 하나 넣어주는 걸로 해결할 수 있다. export 구문이 있기 때문에 TypeScript 컴파일러는 이 파일을 모듈로 처리한다.
declare global {
var country: any;
function multiply(a: number, b: number): number;
}
// 가짜 export를 넣어서 외부 모듈로 인식시킬 수 있다.export {};
TypeScript
복사
