TypeScript 타입 좁히기(narrowing)와 제어 흐름 분석

타입 좁히기는 코드가 이미 수행한 검사를 바탕으로, TypeScript가 코드의 특정 지점에서 값에 대해 더 구체적인 타입을 알아내는 것입니다. string | number 매개변수는 if (typeof x === "string") 안에서 string이 되고 else에서 number가 됩니다.

function pad(value: string | number): string {
  if (typeof value === "number") {
    // value: number
    return value.toFixed(2).padStart(8);
  }
  // value: string (number was handled above)
  return value.padStart(8);
}

console.log(`[${pad(3.14159)}]`); // [    3.14]
console.log(`[${pad("abc")}]`);   // [     abc]

검사 전에 value.toFixed(2)를 호출하면 string에는 toFixed가 없으므로 컴파일 오류입니다. 검사는 평범한 JavaScript로 런타임에 실행되고, 좁히기는 컴파일러가 그것을 읽고 타입을 조정하는 것입니다. 추가로 출력되는 것은 없습니다.

제어 흐름 분석

TypeScript는 함수의 모든 경로를 따라갑니다. if/else, early return과 throw, switch, 반복문, 단락 연산자 &&, ||, ??, ?:입니다. 각 지점에서 변수의 타입은 그곳에서 아직 가능한 것입니다.

function firstWord(text: string | null | undefined): string {
  if (text == null) return "(none)";   // removes null and undefined
  // text: string
  const trimmed = text.trim();
  const space = trimmed.indexOf(" ");
  return space === -1 ? trimmed : trimmed.slice(0, space);
}

function lengthOrZero(list?: string[]): number {
  return list && list.length > 0 ? list.length : 0; // list: string[] after &&
}

console.log(firstWord("  hello typed world")); // hello
console.log(firstWord(undefined));             // (none)
console.log(lengthOrZero(["a", "b"]), lengthOrZero()); // 2 0

early return 스타일("가드 절")이 가장 읽기 쉬운 좁히기 방법입니다. 특이한 경우를 먼저 처리하면 함수의 나머지는 깔끔한 타입으로 작업합니다.

좁히는 모든 방법

마지막 세 가지는 타입 가드와 판별 유니언 페이지에서 다룹니다. 나머지는 아래에 있습니다.

참 같은 값으로 좁히기

if (x)는 null과 undefined(그리고 false, 0, "" 리터럴 타입)를 없앱니다. 짧지만 고전적인 함정이 하나 있습니다. 0과 ""는 falsy이므로 올바른 값이 없는 값으로 취급됩니다.

function describeCount(count: number | undefined): string {
  if (!count) return "unknown";   // bug: 0 is falsy too
  return `${count} items`;
}

function describeCountFixed(count: number | undefined): string {
  if (count === undefined) return "unknown";
  return `${count} items`;
}

console.log(describeCount(0));      // unknown
console.log(describeCountFixed(0)); // 0 items

숫자와 문자열은 undefined나 null과 명시적으로 비교하세요(또는 ??를 쓰세요). 객체, 배열, 함수는 절대 falsy가 아니므로 참 같은 값 검사로 충분합니다.

동등 비교로 좁히기

===, !==, ==, !=는 양쪽을 모두 좁힙니다. 리터럴과 비교하면 그 리터럴로 좁혀지고, == null(느슨한 동등 비교)은 검사 한 번으로 null과 undefined를 모두 잡으며, 느슨한 동등 비교가 관용적으로 쓰이는 유일한 곳입니다.

type Status = "active" | "paused" | "deleted";

function label(status: Status, note: string | null | undefined): string {
  if (status === "deleted") return "gone";
  // status: "active" | "paused"
  const suffix = note != null ? ` (${note})` : ""; // note: string in the true branch
  return status.toUpperCase() + suffix;
}

console.log(label("paused", "until Monday")); // PAUSED (until Monday)
console.log(label("active", undefined));      // ACTIVE
console.log(label("deleted", null));          // gone

두 변수를 비교하면 둘이 공통으로 가질 수 있는 것으로 둘 다 좁혀집니다. a: string | number와 b: string | boolean이 a === b를 통과하면 if 안에서 둘 다 string입니다.

in 연산자

"key" in obj는 객체 타입의 유니언을 그 속성을 가진(또는 가질 수 있는) 멤버로 좁힙니다.

type Fish = { name: string; swim: () => string };
type Bird = { name: string; fly: () => string };

function move(pet: Fish | Bird): string {
  if ("swim" in pet) {
    return pet.swim(); // pet: Fish
  }
  return pet.fly();    // pet: Bird
}

console.log(move({ name: "Nemo", swim: () => "splash" })); // splash
console.log(move({ name: "Tweety", fly: () => "flap" }));  // flap

in은 객체라는 것을 알고 나면 unknown에도 동작합니다. typeof v === "object" && v !== null && "id" in v 뒤에 TypeScript는 v에 unknown 타입의 id 속성이 있다는 것을 압니다. 직접 설계하는 유니언이라면 메서드가 있는지 찔러 보기보다 공유 태그 속성(kind: "fish")이 더 명확합니다. 이 패턴을 판별 유니언이라고 합니다.

대입으로 좁히기

변수에는 선언된 타입과, 대입을 따라가는 좁혀진 타입이 있습니다. 값을 대입하면 선언된 타입 범위 안에서 그 값의 타입으로 좁혀집니다.

let id: string | number = "a-17";
console.log(id.toUpperCase()); // id: string here, so string methods work

id = 42;
console.log(id.toFixed(1));    // id: number now

// id = true; would be an error: the declared type is still string | number

좁히기가 풀리는 곳

좁히기는 지역적이고 보수적입니다. 몇 가지 상황에서 초기화됩니다.

• 다른 표현식. obj.name을 검사하면 obj.name(과 obj["name"])이 좁혀지지만, key가 리터럴이 아닌 string 변수일 때의 obj[key]와 검사 전에 만든 복사본은 좁혀지지 않습니다.
• 콜백과 재대입. 콜백 안에서 좁혀진 let은 콜백이 만들어진 뒤에 다시 대입되지 않을 때만 좁혀진 채로 남습니다. const나 다시 대입되지 않는 매개변수는 좁혀진 채로 남습니다.
• 헬퍼에 숨은 검사. isString(x: unknown): boolean 함수는 컴파일러에 아무것도 알려 주지 않습니다. 반환 타입을 타입 서술어 x is string으로 주면 그 호출이 typeof처럼 좁힙니다.

// This does not compile: x is reassigned after the callback, so the callback loses the narrowing.
function run(flag: boolean): void {
  let x: string | undefined = flag ? "ready" : undefined;
  if (x !== undefined) {
    [1, 2].forEach(() => console.log(x.length));
  }
  x = undefined;
}

run(true);

컴파일러는 index.ts(5,38): error TS18048: 'x' is possibly 'undefined'.를 보고합니다. 콜백은 나중에, x = undefined 뒤에 실행될 수도 있습니다. 마지막 대입을 지우면(또는 if 안에서 값을 const에 복사하면) 컴파일되고 5를 두 번 출력합니다.

boolean을 반환하는 헬퍼는 무엇을 증명하는지 선언해서 고칠 수 있습니다. 그것이 타입 가드입니다.

function isString(value: unknown): value is string {
  return typeof value === "string";
}

TypeScript 5.5부터 컴파일러는 단순한 화살표 함수에 대해 이런 서술어를 추론합니다. 그래서 이제 list.filter((x) => x !== undefined)가 undefined 없는 배열을 반환합니다.