[하루 30분 러닝 타입스크립트] 선언 파일

✨ 선언 파일

타입 선언은 파일 이름이 .d.ts확장자로 끝나는 선언 파일에 작성됩니다.

.d.ts 파일에는 사용 가능한 런타임 값, 인터페이스, 모듈, 일반적인 타입 설명만 포함됩니다.

선언 파일은 값이 아닌 타입만 선언할 수 있는 코드 영역을 의미하는 앰비언트 컨텍스트를 생성합니다.

✨ 런타임 값 선언

declare 키워드를 사용해 구조체가 존재한다고 선언할 수 있습니다.

이는 script 태그 같이 외부 작업을 통해 가져온 구조체에 특정 타입의 값을 생성할 수 있습니다.

함수와 클래스도 일반적인 형식과 유사하게 선언되지만, 본문이 없습니다.

declare function get() {
    // ...
} // ERROR An implementation cannot be declared in ambient contexts

declare function set(): boolean // OK

.d.ts 파일에서 declare 혹은 export 키워드가 없다면 오류가 발생합니다.

const lastNum : boolean
// ERROR .d.ts 파일의 최상위 수준 선언은 'declare' 또는 'export' 한정자로 시작해야 합니다.

전역 변수

import, export 키워드가 없는 타입스크립트 파일은 모듈이 아닌 스크립트로 취급하기 때문에 전역으로 사용됩니다.

다음 global.d.ts.에서 전역으로 선언된 version 타입을 version.ts에서 참조할 수 있습니다.

// global.d.ts
declare const version: string;

// version.ts
function logVersion() {
  console.log(version);
	// const version: string
}

전역 인터페이스 병합

전역 API와 많은 타입 선언이 전역으로 존재합니다. 동일한 인터페이스와 병합되기 때문에 인터페이스는 확장되게 됩니다.

// types/window.d.ts
interface Window {
	myVersion: string;
}

전역 Window 인터페이스에 myVersion 타입이 추가됩니다.

전역 확장

전역 범위로 확장이 필요한 .d.ts파일에 import 또는 export를 항상 금지해야 하는 것은 아닙니다.

declare global 코드 블록 구문을 사용할 수 있습니다.

declare global {
	// 전역 컨텍스트
}
// 모듈 컨텍스트

다음과 같이 사용할 수 있습니다.

import { Data } from "./data";

declare global {
	const globallyDeclared: Data;
}

위 globallyDeclared는 import문 없이 접근할 수 있습니다.

✨내장된 선언

라이브러리 선언

JS 런타임에 존재하는 Array, Function 같은 내장된 전역 객체는 lib.[target].d.ts 파일 이름으로 선언됩니다. 여기서 target은 ES5, ES2020 과 같은 JS 최소 지원 버전입니다.

lib파일은 npm 패키지의 일부로 배포됩니다.

// lib.ex5.d.ts
interface Array<T>{
	lnegth: number;
	// ...
}

DOM 선언

DOM(Document Object Model)타입은 웹 브라우저 타입을 의미합니다. localStroage와 같은 API, HTMLElement와 같은 타입 형태를 다룹니다.

lib.dom.d.ts파일과 다른 lib.*.d.ts 선언 파일에도 저장됩니다.

✨모듈 선언

선언 파일의 또 다른 중요한 기능은 모듈의 상태를 설명하는 기능입니다.

declare 키워드를 사용하여 모듈의 내용을 타입 시스템에 알릴 수 있습니다.

// module.d.ts
declare module "my-lib" {
	export const value: string;
}

// index.ts
import { value } from "my-lib";

console.log(value) // OK

와일드카드 모듈 선언

하나의 *와일드카드를 포함해 해당 패턴과 일치하는 모든 모듈을 나타낼 수 있습니다.

// style.d.ts
declare module "*.module.css" {
	const styles: { [i: string]: string};
	export default styles;
}

import styles from "./style.modules.css";

styles.anyClassName; // string 타입