TypeScript null과 undefined: 체크 방법, ?.와 ?? 연산자

strictNullChecks가 켜져 있으면(strict에 포함됩니다) null과 undefined는 각각 자체 타입입니다. string은 절대 null이 될 수 없고, 없을 수도 있는 값은 string | null처럼 타입에 그 사실을 밝혀야 하며, TypeScript는 값을 쓰기 전에 그 경우를 처리하게 만듭니다.

function initials(name: string | null | undefined): string {
  if (name == null) return "?"; // handles both null and undefined
  return name
    .split(" ")
    .map((part) => part[0])
    .join("");
}

console.log(initials("Ada Lovelace")); // AL
console.log(initials(null));           // ?
console.log(initials(undefined));      // ?

검사 뒤에 컴파일러는 name이 string이라는 것을 알므로 .split이 허용됩니다. 이 페이지의 나머지는 그런 검사를 하는 방법과 검사를 짧게 만드는 연산자를 다룹니다.

strictNullChecks와 "possibly null" 오류

타입에 null이나 undefined가 포함되어 있으면 TypeScript는 값이 항상 있는 것처럼 쓰는 것을 거부합니다.

// This does not compile: name may be null
function greet(name: string | null) {
  return "Hello, " + name.toUpperCase();
}

console.log(greet("ada"));

index.ts(3,22): error TS18047: 'name' is possibly 'null'.

undefined 버전은 TS18048, 'x' is possibly 'undefined'입니다. strictNullChecks가 없으면 null과 undefined가 모든 타입에 허용되어 이 코드는 컴파일되고, name이 처음 null일 때 런타임에 TypeError로 멈춥니다. 이런 종류의 버그가 strict를 켜 두는 가장 큰 이유입니다.

일상적인 코드에서 이런 타입이 생기는 곳:

null과 undefined 확인하기

아래의 모든 검사는 블록 안에서 타입을 좁힙니다. 배제하고 싶은 것에 맞는 검사를 고르세요.

function label(value: string | null | undefined): string {
  if (value === undefined) return "undefined";
  if (value === null) return "null";
  return value.toUpperCase(); // value is string here
}

function orNone(value: string | null | undefined): string {
  if (value == null) return "(none)"; // == null matches null AND undefined
  return `"${value}"`;
}

console.log(label(undefined), label(null), label("ok")); // undefined null OK
console.log(orNone(null), orNone(undefined), orNone("")); // (none) (none) ""

== null은 느슨한 동등 비교가 관용적으로 쓰이는 유일한 곳입니다. 정확히 null과 undefined일 때만 참이고 다른 값에는 거짓입니다. 참 같은 값 검사였다면 빈 문자열을 없는 값으로 취급했을 것이고, 이는 흔한 버그입니다.

옵셔널 체이닝: ?.

a?.b는 a가 null이나 undefined가 아니면 b를 읽고, 그렇지 않으면 멈추고 undefined를 반환합니다. 같은 연산자를 인덱스 a?.[i]와 호출 fn?.()에도 쓸 수 있습니다.

interface User {
  name: string;
  address?: { city: string; zip?: string };
  tags?: string[];
  onLogin?: () => string;
}

const ada: User = { name: "Ada", address: { city: "London" }, onLogin: () => "welcome" };
const bob: User = { name: "Bob" };

console.log(ada.address?.city);        // London
console.log(bob.address?.city);        // undefined
console.log(ada.address?.zip?.length); // undefined
console.log(bob.tags?.[0]);            // undefined
console.log(ada.onLogin?.());          // welcome
console.log(bob.onLogin?.());          // undefined

bob.address?.city의 타입은 string | undefined입니다. 옵셔널 체이닝은 결과에 undefined를 더하므로 보통 ??와 함께 씁니다. 런타임 동작은 평범한 JavaScript이며, 단락 평가의 세부 사항은 옵셔널 체이닝을 참고하세요.

물음표 두 개: ??

a ?? b는 a가 null이나 undefined가 아니면 a를, 맞으면 b를 반환합니다. 0, "", false, NaN까지 버리는 예전 관용구 a || b를 대체합니다.

function pageSize(input: number | undefined): string {
  const withOr = input || 20;      // 0 is falsy, so it is replaced
  const withNullish = input ?? 20; // only undefined is replaced
  return `${withOr} vs ${withNullish}`;
}

console.log(pageSize(undefined)); // 20 vs 20
console.log(pageSize(0));         // 20 vs 0

const scores = new Map([["Ada", 90]]);
const score: number = scores.get("Linus") ?? 0; // number | undefined becomes number
console.log(score);                             // 0

타입에서 ??는 왼쪽에서 null과 undefined를 없애고 나머지를 오른쪽과 합칩니다. 그래서 scores.get("Linus") ?? 0을 number에 대입할 수 있습니다.

널 병합 대입: ??=

a ??= b는 a가 null이나 undefined일 때만 a에 b를 대입합니다. 형제 연산자 ||=와 &&=는 왼쪽이 falsy이거나 truthy일 때 대입합니다.

interface Options {
  retries?: number;
  label?: string;
}

function withDefaults(opts: Options) {
  opts.retries ??= 3;   // assign only if null or undefined
  opts.label ||= "job"; // assign if falsy, so "" is replaced too
  return opts;
}

console.log(withDefaults({}));                       // { retries: 3, label: 'job' }
console.log(withDefaults({ retries: 0, label: "" })); // { retries: 0, label: 'job' }

retries: 0은 ??=에서 살아남고, 빈 label은 ||=로 대체됩니다. opts.retries ??= 3 뒤로 TypeScript는 함수의 나머지 부분에서 opts.retries를 number로 좁힙니다.

선택적 속성과 | undefined

nickname?: string과 nickname: string | undefined는 읽을 때는 같지만, 키가 반드시 있어야 하는지가 다릅니다.

interface WithOptional { nickname?: string }            // key may be missing
interface WithUndefined { nickname: string | undefined } // key must be present

const a: WithOptional = {};
const b: WithUndefined = { nickname: undefined };

// @ts-expect-error: Property 'nickname' is missing in type '{}' but required in type 'WithUndefined'.
const c: WithUndefined = {};

console.log("nickname" in a, "nickname" in b); // false true
console.log(a.nickname === b.nickname);        // true: both read as undefined

호출하는 쪽이 속성을 빼도 된다면 ?를, 값이 undefined라도 모든 호출자가 명시적으로 넘기기를 원한다면 | undefined를 쓰세요. exactOptionalPropertyTypes 옵션(strict에 포함되지 않음)은 ?를 더 엄격하게 만듭니다. 그러면 nickname?: string은 { nickname: undefined }를 거부하고, 키가 없거나 문자열인 경우만 받습니다. 선택적 함수 매개변수(x?: number)도 선택적 속성처럼 동작해서, 함수 안에서 x는 number | undefined입니다.

null과 undefined 중 무엇을 쓸까

TypeScript가 선택을 강요하지는 않지만, 한 코드베이스에서 둘을 섞어 쓰면 모든 검사가 두 경우를 처리해야 합니다. 흔한 관례:

• 자신의 타입에서 "설정되지 않음"에는 undefined(와 선택적 속성)를 쓰세요. JavaScript가 기본으로 만드는 값입니다. 없는 속성, 생략한 인수, find와 Map.get이 찾지 못한 경우가 그렇습니다.
• API가 null을 줄 때는 받아들이세요. JSON에는 undefined가 없고, String.prototype.match와 많은 DOM 메서드는 null을 반환합니다.
• 값이 둘 중 무엇이든 될 수 있으면 == null로 확인하세요.

배열 인덱싱은 유일한 빈틈입니다. users[5]는 인덱스가 범위를 벗어나도 요소 타입으로 지정됩니다. noUncheckedIndexedAccess 옵션(strict에 포함되지 않음)은 모든 인덱스 접근에 | undefined를 더해서 컴파일러가 이것도 잡게 합니다.