TypeScript Academy · 강의

판별 속성에 따른 타입 좁히기

switch 문에서 TypeScript가 변형 타입을 좁히게 합니다.

판별 속성에 따른 타입 좁히기은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

판별자를 기준으로 타입 좁히기

판별자를 확인하면 TypeScript가 유니온을 일치하는 멤버로 좁히고 해당 멤버의 고유 필드에 접근할 수 있게 합니다. 이것이 이 패턴의 핵심 이점입니다.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function area(s: Shape) {
  if (s.kind === "circle") return Math.PI * s.radius ** 2;
  return s.side ** 2;
}
console.log(area({ kind: "circle", radius: 2 }).toFixed(2));

판별자에 switch 사용하기

판별자에 대한 switch는 모든 변형을 처리하는 가장 깔끔한 방법입니다. 각 case 안에서는 타입이 자동으로 좁혀집니다.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function area(s: Shape): number {
  switch (s.kind) {
    case "circle": return Math.PI * s.radius ** 2;
    case "square": return s.side ** 2;
  }
}
console.log(area({ kind: "square", side: 5 }));

각 case의 멤버별 필드

"circle" case에서는 s.radius를 사용할 수 있지만 s.side는 사용할 수 없습니다. TypeScript는 현재 어떤 멤버인지 정확히 알고 있습니다.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function describe(s: Shape) {
  switch (s.kind) {
    case "circle": return "r=" + s.radius;
    case "square": return "side=" + s.side;
  }
}
console.log(describe({ kind: "circle", radius: 9 }));

if를 사용한 타입 좁히기

switch가 꼭 필요한 것은 아닙니다. 판별자를 간단한 if로 비교해도 똑같이 효과적으로 타입을 좁힐 수 있습니다.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function perimeter(s: Shape): number {
  if (s.kind === "circle") {
    return 2 * Math.PI * s.radius;
  }
  return 4 * s.side;
}
console.log(perimeter({ kind: "square", side: 3 }));

잘못된 필드에 접근하면 실패합니다

타입을 좁히기 전에는 멤버별 필드에 접근할 수 없습니다. 해당 속성이 모든 멤버에 존재하지 않기 때문에 TypeScript가 오류를 보고합니다.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function broken(s: Shape) {
  // Error: radius does not exist on Square
  // return s.radius;
  return s.kind;
}
console.log(broken({ kind: "square", side: 1 }));

불리언 판별자로 타입 좁히기

{ ok: true } | { ok: false } 유니온에서 if (r.ok)를 확인하면 성공 멤버로 타입이 좁혀집니다.

type Result =
  | { ok: true; data: string }
  | { ok: false; error: string };

function handle(r: Result): string {
  if (r.ok) return "Data: " + r.data;
  return "Error: " + r.error;
}
console.log(handle({ ok: false, error: "boom" }));

조기 반환으로 타입 좁히기

한 변형에서 조기에 반환하면 나머지 코드는 다른 변형으로 좁혀집니다. 한 번에 하나씩 경우를 제거하는 깔끔한 방법입니다.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function label(s: Shape): string {
  if (s.kind === "circle") return "circle";
  // s is now narrowed to Square here
  return "square with side " + s.side;
}
console.log(label({ kind: "square", side: 8 }));

다른 조건과 함께 사용하기

판별자 확인을 다른 로직과 조합할 수 있습니다. 해당 분기에서 판별자 조건이 참인 동안 TypeScript는 타입 좁히기 상태를 유지합니다.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function bigCircle(s: Shape): boolean {
  return s.kind === "circle" && s.radius > 100;
}
console.log(bigCircle({ kind: "circle", radius: 150 }));

배열 필터에서 타입 좁히기

콜백 내부에서도 타입 좁히기가 작동합니다. 여기서는 배열을 순회하면서 각 형태를 개별적으로 확인합니다.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

const shapes: Shape[] = [
  { kind: "circle", radius: 1 },
  { kind: "square", side: 2 }
];
shapes.forEach(s => {
  if (s.kind === "circle") console.log("c", s.radius);
  else console.log("s", s.side);
});

switch 반환도 타입 안전하게 유지하기

switch가 모든 경우를 처리하고 반환하면 TypeScript는 모든 case 결과의 유니온에서 정확한 반환 타입을 추론합니다.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function tag(s: Shape) {
  switch (s.kind) {
    case "circle": return s.radius;
    case "square": return s.side;
  }
}
console.log(tag({ kind: "circle", radius: 4 }));

타입 좁히기 종합하기

switch를 사용하든 if를 사용하든 판별자를 확인해야 멤버 필드에 안전하게 접근할 수 있습니다. 다음에는 모든 경우를 처리하도록 보장하는 방법을 알아봅니다.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function area(s: Shape): number {
  return s.kind === "circle" ? Math.PI * s.radius ** 2 : s.side ** 2;
}
console.log(Math.round(area({ kind: "circle", radius: 10 })));

빠른 확인: 타입 좁히기

판별자를 기준으로 타입을 좁히는 방법에 대한 이해도를 확인해 보세요.

복습: 판별자를 기준으로 타입 좁히기

switch 또는 if로 판별자를 확인하면 유니온이 하나의 멤버로 좁혀지고 해당 멤버의 필드만 노출된다는 것을 배웠습니다. 조기 반환과 조건 조합을 사용해도 타입 좁히기는 유지됩니다.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

const s: Shape = { kind: "square", side: 7 };
console.log(s.kind === "square" ? s.side : 0);

자주 묻는 질문

“판별 속성에 따른 타입 좁히기” 강의는 무료인가요?

네 — “판별 속성에 따른 타입 좁히기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“판별 속성에 따른 타입 좁히기”에서 뭘 배우나요?

switch 문에서 TypeScript가 변형 타입을 좁히게 합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“판별 속성에 따른 타입 좁히기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기