https://www.typescriptlang.org/docs/handbook/declaration-files
타입이 없이 작성된 코드에서 타입을 사용하기 위해서는 declaration file을 이용해서 타입을 선언해줘야한다. 수정할 수 있다면 직접 함수/객체/클래스/변수 등의 선언부에 타입을 추가해줄 수 있겠지만 그렇지 못하다면 .d.ts 파일을 통해 타입을 선언해줄 수 있다.
보통 요즘 자바스크립트 라이브러리들은 이러한 .d.ts 선언 파일을 같이 배포하고 있으며 지원하지 않는 경우에만 직접 작성해주면 된다. 단순히 타입 선언 뿐만 아니라 확장하여 사용할 수도 있다.
ts 로 작성한 것을 js 로 변환할 때 .d.ts 파일을 같이 생성해줄 수도 있다. ts로 패키지를 작성하여 npm에 js 로 배포할 때 해당 속성을 이용할 수 있다.
// tsconfig.json
compilerOptions: {
"declaration": true
}컴파일 된 js 파일과 같은 위치에 .d.ts 파일이 위치한다.
declare 키워드를 이용하여 타입을 선언한다. 키워드를 가장 앞에 명시해주고 선언과 동시에 타입을 지정하는 것과 똑같이 사용한다. 전역 객체에 대한 구조와 타입을 선언해주고 싶을 때는 namespace를 사용할 수 있다
let g = obj.a;
declare namespace obj {
let a: number;
}함수나 클래스 같은 것들에 대한 설명도 여기있으나 정말 declare를 붙이는 것 말고는 처음부터 타입스크립트를 가지고 선언하는 것과 크게 다르지 않으며 이해하기도 어렵지 않을 것이다.
라이브러리에 대한 선언 파일을 구성할 때 해당 라이브러리의 특성을 잘 살피면 구조적으로 잘 선언할 수 있다.
- 모듈식 라이브러리: 일반적으로 esm 또는 cjm의 형태로 작성
- 전역 라이브러리: import나 require 없이 전역적으로 사용할 수 있으며 각 export를 따로 하지 않고 전역으로 작성하거나 환경의 전역 객체에 값/함수를 할당하는 형태로 주로 작성
- UMD 라이브러리: 이름처럼 포괄적으로 모듈을 다룰 수 있기 위해 해당 모듈의 포맷을 조건문 등을 통해 구분하여 로직을 작성한 형태
다른 모듈들 보다도 전역 라이브러리의 경우 변수명이 충돌될 수도 있고 의존성을 표시할 때 /// <reference types=”~~”> 를 이용해서 표시하는 등 고려해야할 사항이 더 있다. 변수명 충돌의 경우 선언 파일을 작성할 때 namespace를 지정하여 작성해주는 것을 추천한다.
Do or Don’t - 선언 가이드
- 일반 박스 객체 사용 X, 대문자로 시작하는 객체를 타입으로 사용하지 않는다.
사용할 수 있는 원시형 타입은 number string boolean symbol - 타입 매개변수를 사용하지 않는다면 제네릭 사용 X
- any의 사용 하지말기 → 정말 필요하다면 unknown으로 사용하기
- 콜백함수의 타입을 정의할 때 정말 필요한 것이 아니라면 옵셔널 파라미터를 정의하지 말기
- 오버로드 함수를 정의할 때는 타입이 구체적인 것 → 포괄적인 것 순으로
- 오버로드를 사용하기 보단 옵셔널 파라미터와 유니온 타입을 사용할 수 있다면 사용하기
Deep Dive
타입스크립트는 정적 타입을 지정하기 때문에 타입이라는 것은 정적이며 값의 생김새를 정의
값은 런타임에서 주고받는 동적인 특징
네임스페이스는 어떠한 범위를 의미한다. let a: A.B.C 에서 C는 네임스페이스 A.B의 타입
클래스와 열거형의 경우 타입과 값으로 사용될 수 있는데, 타입을 나타낼 때는 인스턴스를 나타내는 것이고 값으로 사용될때는 해당 클래스의 생성자를 의미한다.
네임스페이스, 인터페이스, 클래스 등의 경우는 여러 선언에 걸쳐 merge 될 수 있다.
