TypeScript - declare

TypeScript 대표이미지

 

TypeScript 에서 'declare' 키워드는 타입 선언이나 외부 라이브러리에 대한 타입 정의를 할 때 사용된다. 이는 TypeScript 컴파일러에게 해당 이름이 이미 존재한다는 것을 알려주는 역할을 한다. 주로 외부 라이브러리나 모듈에서 가져온 것을 선언할 때 사용된다.

 

'declare'는 런타임 코드를 생성하지 않는다. 대신, 컴파일러 타입 체크를 위해 사용된다.

 

1. 외부 라이브러이에서 가져온 모듈 선언

// externalLibrary.d.ts
declare module 'external-library' {
    export function someFunction(): void;
    export const someValue: number;
}

// 사용 예제
import { someFunction, someValue } from 'external-library';

someFunction(); // 외부 라이브러리의 함수 사용
console.log(someValue); // 외부 라이브러리의 상수 사용

 

위의 예제에서 'externalLibrary.d.ts' 파일에서 `declare module 'external-library'`을 사용하여 외부 라이브러리에서 가져온 모듈의 타입을 정의하고 있다.

 

2. 전역 변수 선언하기

// global.d.ts
declare var globalVar: string;

// 사용 예제
console.log(globalVar); // 전역 변수 사용

 

위의 예제에서는 'globalVar'라는 전역 변수를 선언하고 있다.

 

3. 인터페이스 확장하기

// custom.d.ts
interface MyInterface {
    myProperty: string;
}

// 사용 예제
declare module 'external-library' {
    interface MyInterface {
        externalProperty: number;
    }
}

 

위의 예제에서는 'MyInterface' 라는 인터페이스를 확장하여 외부 라이브러리에서 가져온 모듈에 새로운 프로퍼티를 추가하고 있다.

 

4. declare 키워드로 재정의 하기

(data.js)

var a = 10;
var b = {name :'kim'};

(index.ts)

declare let a :number;
console.log(a + 1);

 

declare 우측에 let a 와 같은 변수 정의를 집어넣으면 된다.

 

5. declare global

TS 파일에 import export 문법이 없으면 글로벌 모듈이 된다. TS 파일에 import export 문법이 있다면 로컬 모듈이 된다.

declare global {
  type Dog = string;
}

 

6. Ambient Module

타입스크립트가 제공하는 기능 중 import / export가 없이도 타입들을 다른 파일에서 가져다 쓸 수 있다. 

(data.ts)

type Age = number;
let 나이 :Age = 20;

(index.ts)

console.log(나이 + 1) //가능
let 철수 :Age = 30; //가능

 

위와 같이 index.ts 에서도 data.ts에 있던 변수와 타입을 자유롭게 사용가능하다.

 

왜냐하면 그냥 ts 파일에 대충 입력한 변수와 타입들은 전부 global 변수 취급을 받아서 그렇다. 전역으로 쓸 수 있는 파일을 전문용어로 

Ambient Module 이라고 한다.

 

반면에 import / export 키워드가 들어간 ts 파일은 global 변수가 아닌 local 변수가 된다.