TypeScript 타입 좁히기: union null unknown 안전 검증

union

아래 개념 조각에서 참조하는 학습용 타입입니다. 프로젝트 파일을 import하지 않습니다. 같은 이름을 다시 선언하는 비교 코드는 별도 파일에서 확인하세요.

type Task = { id: string; title: string; completed: boolean };

type TaskId =
  string | number;

TaskId는 string 또는 number입니다.

바로 string 전용 메서드를 사용할 수 없습니다.

function printId(
  id: TaskId,
) {
  if (
    typeof id === 'string'
  ) {
    console.log(
      id.toUpperCase(),
    );
  } else {
    console.log(
      id.toFixed(0),
    );
  }
}

조건문 이후 각 branch에서 타입이 좁혀집니다.

null 처리

function getTitle(
  task: Task | null,
): string {
  if (!task) {
    return '선택 없음';
  }


  return task.title;
}

strictNullChecks가 적용되면 null 가능성을 무시할 수 없습니다.

unknown

외부 입력을 any로 받으면 모든 property 접근이 허용됩니다.

function read(
  value: any,
) {
  return value.title;
}

unknown은 바로 property를 읽을 수 없습니다.

function read(
  value: unknown,
) {
  if (
    typeof value ===
      'object' &&
    value !== null &&
    'title' in value
  ) {
    return value.title;
  }
}

검증을 강제한다는 점이 중요합니다.

Array.isArray

function getLength(
  value: unknown,
): number {
  if (
    Array.isArray(value)
  ) {
    return value.length;
  }


  return 0;
}

배열 여부를 runtime에서 확인하면서 TypeScript 타입도 좁아집니다.

in operator

type Success = {
  data: string[];
};


type Failure = {
  error: string;
};


function print(
  result:
    Success | Failure,
) {
  if ('data' in result) {
    console.log(
      result.data,
    );
  } else {
    console.log(
      result.error,
    );
  }
}

property 존재 여부로 union을 좁힐 수 있습니다.

사용자 정의 type guard

function isTask(
  value: unknown,
): value is Task {
  if (
    typeof value !== 'object' ||
    value === null
  ) {
    return false;
  }


  return (
    'id' in value &&
    'title' in value &&
    'completed' in value
  );
}

이 함수가 true를 반환하면 TypeScript는 value를 Task로 취급합니다.

실제 runtime 검증은 property 타입까지 확인해야 더 안전합니다. 16회차에서 완성합니다.

narrowing이 풀리는 상황

객체 property를 callback 안에서 사용할 때 TypeScript가 변경 가능성을 고려해 narrowing을 보수적으로 처리하는 경우가 있습니다.

이럴 때 검증된 값을 지역 변수에 저장하는 방법이 도움이 될 수 있습니다.

const selected =
  task;


if (!selected) {
  return;
}


items.map(() =>
  selected.title,
);

자주 하는 실수

non-null assertion으로 건너뜁니다

task!.title

실제로 null이 될 수 있다면 runtime 오류를 숨기는 방식입니다.

unknown을 바로 as Task로 단언합니다

const task =
  value as Task;

검증한 것이 아닙니다.

학습 완료 체크리스트

null 분기를 없애면 왜 문자열 메서드가 거부되는지 설명하고, title 속성이 있는 객체라도 그 값이 숫자라면 문자열로 읽을 수 없는 이유를 구분해 보세요.