판별 유니언 구축
공유 판별 속성으로 유니언 구성원을 표시합니다.
판별 유니언 구축은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
판별 유니온이란?
판별 유니온은 모든 객체 타입이 판별자라고 하는 공통 literal 속성을 공유하는 유니온입니다. 이 공통 태그를 통해 TypeScript가 각 구성 요소를 구분할 수 있습니다.
// The shared "kind" property is the discriminant
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Shape = Circle | Square;판별자 속성
판별자는 string처럼 범위가 넓은 타입이 아니라 "circle"과 같은 리터럴 타입이어야 합니다. 각 구성 요소에는 고유한 리터럴 값이 지정됩니다.
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
const c: Circle = { kind: "circle", radius: 10 };
console.log(c.kind); // "circle"각 멤버만의 필드
공유하는 판별자 외에도 각 멤버는 자신에게만 의미가 있는 필드를 가집니다. 원에는 radius가 있고 정사각형에는 side가 있습니다.
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Rectangle = { kind: "rectangle"; width: number; height: number };
type Shape = Circle | Square | Rectangle;유니온 값 만들기
값을 만들 때 TypeScript는 해당 값의 kind를 기준으로 형태가 유니온의 정확히 한 멤버와 일치하는지 확인합니다.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const shapes: Shape[] = [
{ kind: "circle", radius: 5 },
{ kind: "square", side: 4 }
];
console.log(shapes.length); // 2선택적 필드만 사용하면 안 되는 이유
선택적 필드(radius?, side?)가 있는 느슨한 타입은 잘못된 조합을 허용합니다. 판별 유니온을 사용하면 표현할 수 없는 잘못된 상태를 만들 수 없습니다.
// Loose and error-prone: nothing stops radius + side together
type BadShape = { radius?: number; side?: number };
const bad: BadShape = { radius: 5, side: 4 }; // nonsense, but allowed판별자 이름은 자유롭게 정할 수 있습니다
태그는 일반적으로 kind 또는 type이라고 부르지만, 모든 멤버가 서로 다른 리터럴 값과 함께 동일한 속성 이름을 사용하기만 하면 어떤 이름이든 괜찮습니다.
type Event =
| { type: "click"; x: number; y: number }
| { type: "scroll"; delta: number };
const e: Event = { type: "click", x: 10, y: 20 };
console.log(e.type); // "click"형태 넓이 계산기 모델링
판별 유니온은 각 변형을 다르게 처리해야 할 때 특히 유용합니다. 여기서는 나중에 넓이 함수가 처리할 형태를 설정합니다.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const myShapes: Shape[] = [
{ kind: "circle", radius: 3 },
{ kind: "square", side: 6 }
];
console.log("Count:", myShapes.length);세 번째 변형 추가하기
유니온은 확장할 수 있습니다. triangle 멤버를 추가하는 것은 한 줄만 변경하면 되며, TypeScript가 유니온이 사용되는 모든 곳에서 이를 추적합니다.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number }
| { kind: "triangle"; base: number; height: number };
const t: Shape = { kind: "triangle", base: 4, height: 8 };
console.log(t.kind);고유한 리터럴로 겹침 방지하기
각 kind가 고유하므로 모호함이 없습니다. 하나의 값은 정확히 하나의 멤버이며 동시에 두 멤버일 수 없습니다.
type A = { kind: "a"; value: number };
type B = { kind: "b"; label: string };
type Union = A | B;
function describe(u: Union) {
return u.kind === "a" ? u.value : u.label;
}
console.log(describe({ kind: "b", label: "hi" }));불리언 태그를 사용하는 판별자
판별자는 문자열일 필요가 없습니다. boolean 리터럴도 사용할 수 있으며, 성공 및 실패 결과를 표현할 때 유용합니다.
type Result =
| { ok: true; data: string }
| { ok: false; error: string };
const r: Result = { ok: true, data: "loaded" };
console.log(r.ok ? r.data : r.error);실전에서 사용하는 판별 유니온
이제 완전한 형태 모델을 갖추었습니다. 다음 레슨에서는 판별자를 기준으로 타입을 좁혀 각 멤버의 고유 필드에 안전하게 접근합니다.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const sample: Shape = { kind: "circle", radius: 7 };
console.log(sample.kind, "ready");빠른 확인: 판별자
판별 유니온에 대한 이해도를 확인해 보세요.
복습: 판별 유니온 만들기
판별 유니온은 kind와 같은 리터럴 판별자를 공유하는 객체 타입을 하나로 묶는 방법입니다. 각 멤버는 고유한 필드를 가지며, 고유한 리터럴이 겹침을 방지하므로 표현할 수 없는 잘못된 상태를 만들 수 없습니다.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const done: Shape = { kind: "square", side: 2 };
console.log("Recap complete:", done.kind);
AI 튜터와 함께 TypeScript을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 101
- 레슨
- 352
자주 묻는 질문
“판별 유니언 구축” 강의는 무료인가요?
네 — “판별 유니언 구축” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“판별 유니언 구축”에서 뭘 배우나요?
공유 판별 속성으로 유니언 구성원을 표시합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“판별 유니언 구축” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.