declare

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;

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 모듈인 것처럼 import 해서 사용 가능
// import*as URLfrom "url";
let myUrl= URL.parse("<http://www.typescriptlang.org>");

declare global

전역 개체는 특별한 존재이며 import로 참조할 수 없는 모듈이기 때문에 TypeScript는 전역 개체의 타입을 커스텀하는 별도의 문법을 제공한다.

declare global 블럭 안에 선언한 타입은 전역 개체의 프로퍼티 타입으로 정의된다.

*// 컴파일러는 export/import 구문이 없는 파일은 스크립트로 인지한다.*declare global {
  **var** country: any;
  **function** multiply(a: number, b: number): number;
}

그런데 TypeScript 컴파일러는 고유의 컴파일 규칙을 따라서 export/import 구문이 없는 파일은 일반 스크립트(그렇지 않은 경우는 모듈로 취급)로 취급한다. 위의 declare global 선언은 스크립트가 존재하는 스코프에 속하기 때문에 다른 모듈은 이 타입을 인지할 수 없다. 이 지점이 실체가 좀 아리까리한데 시간 날 때 더 파볼 생각이다.

이 문제는 아래와 같이 빈 export 구문을 하나 넣어주는 걸로 해결할 수 있다. export 구문이 있기 때문에 TypeScript 컴파일러는 이 파일을 모듈로 처리한다.

declare global {
  **var** country: any;
  **function** multiply(a: number, b: number): number;
}

*// 가짜 export를 넣어서 외부 모듈로 인식시킬 수 있다.***export** {};