Typescript - declare

Typescript declare

Typescript declare 이란 컴파일러에게 declare 로 선언된 변수 또는 함수들을 이미 존재한다고 알리는 것이다.

// data.js

// js파일에 변수를 선언한다.
var num = 10;	
var profile = {name: 'kim'};

 

다른 js파일에 선언된 num 변수를 타입스크립트에서 declare로 불러와 사용할 수 있다.

// index.ts

declare let num: number;	// declare 로 변수가 이미 존재한다는것을 알린다.
console.log(num + 1);

declare로 재정의 된 변수에 타입선언도 가능하다.

declare 키워드는 변환된 index.js에서는 나타나지않는다.

 

 

 

반응형

 

 

 

Typescript ambient module (글로벌 모듈)

Typescript ambient module 이란 typescript 파일에서 다른 typescript 파일을 가져다 쓸때 import export 키워드를 사용하지 않고 가져다가 사용할 수 있다.

// data.ts
var num:number = 20;	// data.ts 파일에 num 변수를 선언한다.

 

다른 타입스크립트 파일의 변수를 import export 키워드 없이 사용할 수 있다.

console.log(num + 1);	// 다른 타입스크립트에 선언된 num 변수를 가져다 사용한다.

 

모든 변수가 전역변수가 되어 변수 선언의 중복이 될 수 있기 때문에 이를 방지하기 위해선 export{} 키워드를 선언하면

로컬변수가 될 수있다. (로컬 모듈)

// data.ts
export {};	// export 키워드를 사용하여 num 변수를 로컬에서만 사용할 수 있도록 한다.
var num:number = 20;

export 키워드를 사용하여 변수 num이 로컬변수가 되버린다. (로컬모듈)

 

// index.ts
console.log(num + 1);	// data.ts에 export를 선언하여 변수 num을 사용할 수 없다.

data.ts에 있는 export 키워드 때문에 변수 num은 index.ts에서 사용할 수 없다.

 

 

export 키워드로 인해 모든 변수들이 로컬에서만 사용하게 되었는데 그 중 변수를 글로벌 변수로 만들고 싶으면

declare global 키워드를 사용하여 다른 타입스크립트에서도 사용이 가능하도록 선언할 수 있다.

// data.ts

export {};	// export 키워드로 인해 모든 변수 및 타입들이 로컬에서만 사용가능하도록 된다.
var num:number = 20;	// 로컬에서만 사용 가능한 변수

// declare global 키워드로 인해 안에있는 타입이 글로벌로 변경되어 다른 파일에서도 사용할 수 있다.
declare global {	
    type MyName = string;
}

 

declare global 키워드로 인해 안에 있는 MyName 타입을 다른 타입스크립트 파일에서 사용할 수 있다.

 

// index.ts

let myname: MyName = 'zelord';	// data.ts에서 declare global 키워드로 인해 사용이 가능하다.
console.log(num + 1);	// export 키워드로 인해 사용이 불가능하다.

data.ts 에서 declare global 키워드를 사용함으로써 index.ts 파일에서 MyName 타입을 사용할 수 있다.