null 과 undefined

값이 없을 수 있다는 것도 타입입니다

JavaScript 에서 가장 자주 만나는 오류가 Cannot read properties of null 입니다(JS 7.1). 값이 있다고 여기고 다뤘는데 없었던 것입니다.

TypeScript 는 없을 수 있다는 것을 타입에 적게 합니다. 그러면 확인하지 않고 사용하는 코드를 미리 막습니다.

let name: string;          // 언제나 글자입니다
let name: string | null;   // 글자이거나, 없습니다

확인하지 않으면 막힙니다

function show(name: string | null) {
	console.log(name.length);
}

show("홍길동");

이것이 TypeScript 를 쓰는 가장 큰 까닭 가운데 하나입니다. 실행하기 전에, 그것도 값이 실제로 없어지기 전에 막습니다.

function show(name: string | null) {
	if (name !== null) console.log(`${name} (${name.length}글자)`);
	else console.log("이름이 없습니다");
}

show("홍길동");
show(null);

if 안쪽에서는 null 이 빠져 string 만 남습니다. 그래서 name.length 가 됩니다.

없을 수도 있는 속성 — 물음표

객체의 속성에 ? 를 붙이면 없어도 되는 것이 됩니다. 그 값의 타입에는 undefined 가 함께 담깁니다.

type User = { name: string; nickname?: string };

const a: User = { name: "홍길동", nickname: "길동" };
const b: User = { name: "김철수" };

console.log(a.nickname?.length);
console.log(b.nickname?.length);
console.log(b.nickname ?? "별명 없음");

?. 와 ?? 는 JavaScript 문법 그대로입니다(JS 6.5). TypeScript 는 그것을 언제 써야 하는지를 알려 줍니다 — 붙이지 않으면 위처럼 오류가 납니다.

화면에서 요소를 찾을 때

querySelector 는 찾지 못하면 null 을 돌려줍니다. 그래서 타입이 Element | null 입니다.

const box = document.querySelector("#box");

box.textContent = "안녕하세요";

JavaScript 에서 오타 하나로 화면이 조용히 멈추던 자리가 바로 여기였습니다. 확인하고 다루면 됩니다.

const box = document.querySelector("#box");

if (box !== null) {
	box.textContent = "안녕하세요";
	console.log(box.textContent);
}
else {
	console.log("그런 요소가 없습니다");
}

처음에 자주 걸리는 것

직접 해보기

function greet(name: string | null): string {
	if (name === null) return "손님, 안녕하세요";
	return `${name} 님, 안녕하세요`;
}

console.log(greet("홍길동"));
console.log(greet(null));

function greet(name: string | null): string {
	return `${name ?? "손님"} 님, 안녕하세요`;
}

console.log(greet("홍길동"));
console.log(greet(null));

이 단원의 정리