declare, ambient module

코딩애플강의를 보고 정리했습니다.

declare

.ts 파일에서 .js파일로 된 파일을 import 해오는 방법이다.

declare를 쓰면 이미 정의된 변수나 함수를 재정의할 수 있다.
(타입도 재정의 가능)

// data.js;

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

// (index.ts)

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

• declare 이게 붙은 코드들은 js로 변환되지 않는다.
• 컴파일러에게 힌트를 주는 역할만 할 뿐이다.

(참고)
declare는 자바스크립트로만 작성된 외부 라이브러리를 이용할때, 타입스크립트 버전이 없을때 사용하면 유용하다.

참고로 ts파일들은 변수만들 때 타입을 깜빡해도 자동으로 타입지정이 되어있으니 굳이 쓸 필요는없다.

tsconfig.json 안에 allowJs 옵션을 true로 켜두면 js파일도 타입지정이 알아서 implicit 하게 되니,리액트 같은 프로젝트에서 유용하다.

.ts파일에 있던 변수를 .ts파일에서 쓰고 싶으면 declare말고, 그냥 import export 문법을 쓰자.

전역으로 쓸 수 있는 파일 (Ambient Module)

타입스크립트가 제공하는 기능이다.
같은 .ts 파일끼리는 import export 없이도 타입들을 가져다 쓸 수 있는 기능이다.

// data.ts;

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

// index.ts;

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

로컬모듈 만들기

타입스크립트 파일이 다른 .ts파일에 영향을 끼치는걸 막고싶으면 export 키워드를 추가하면된다.

import / export 키워드가 적어도 하나 있으면 그 파일은 로컬 모듈이 되고, 거기 있는 모든 변수는 export를 해줘야 다른 파일에서 사용이 가능하다.

// (data.ts)

export {};
type Age = number;
let 나이: Age = 20;

// (index.ts)

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

declare global

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

ts 파일에 import export 문법이 있으면 로컬 모듈이다.

로컬 변수에서 전역으로 변수를 만들 때 혹은 프로젝트 내의 모든 파일에서 이용가능한 타입을 만들고 싶을때 사용한다.

declare global {
  type Dog = string;
}