타입 정의 파일

타입만 적어 둔 파일

console.log 나 Date 는 우리가 적어 둔 적이 없는데도 타입이 있습니다. 어딘가에 적혀 있기 때문입니다.

.d.ts 파일이 그것입니다. 실행되는 코드는 없고 모양만 적어 둔 파일입니다.

interface DateConstructor {
	new(): Date;
	new(value: number | string): Date;
	parse(s: string): number;
}

declare var Date: DateConstructor;

declare 는 "이런 것이 이미 있다" 고 알리는 것입니다. 만드는 것이 아니라 알리기만 합니다.

적어 둔 것이 검사에 쓰입니다

const now = new Date(2026, 8, 1);

console.log(now.getFullYear());
console.log(now.toISOString().slice(0, 10));

console.log(now.getFullYear(1));

getFullYear 가 인수를 받지 않는다는 것을 lib.es5.d.ts 에 그렇게 적혀 있어서 압니다. 마지막 줄을 지우면 2026 과 날짜가 나옵니다.

화면 요소의 타입

querySelector 는 Element 를 돌려줍니다. 어떤 태그인지까지는 모릅니다. 그래서 입력 칸의 value 를 읽으려 하면 막힙니다.

const input = document.querySelector("#name");

if (input !== null) {
	console.log(input.value);
}

null 은 확인했는데도 막혔습니다. 이번에는 없을 수 있어서가 아니라 무슨 요소인지 모르기 때문입니다.

const input = document.querySelector("#name") as HTMLInputElement | null;

if (input !== null) {
	console.log(input.value);
}

as 로 무슨 요소인지 알려 준 것입니다. 4.2 에서 as 를 조심하라고 했는데, 여기가 그것이 맞는 자리 가운데 하나입니다 — 마크업을 내가 적었으니 무엇인지 아는 것은 나뿐입니다.

| null 을 함께 둔 것을 눈여겨보세요. 이것을 빼면 없을 수 있다는 것까지 함께 우기게 됩니다.

남이 만든 코드의 타입

npm 으로 받은 라이브러리의 타입은 세 가지 가운데 하나입니다.

// 타입이 없는 라이브러리를 쓸 때 최소한으로 적어 두는 모양입니다.
declare module "some-lib" {
	export function greet(name: string): string;
}

전부 적을 필요는 없습니다. 실제로 사용하는 것만 적어 두면 그만큼 검사됩니다.

처음에 자주 걸리는 것

직접 해보기

const save = document.querySelector("#save") as HTMLButtonElement | null;

if (save !== null) {
	save.disabled = true;
	console.log(save.disabled);
}
else {
	console.log("단추가 없습니다");
}

이 단원의 정리