TypeScript 고급 타입 | Union, Intersection, Literal 타입

들어가며

TypeScript의 고급 타입을 쓰면, 값에 붙는 명찰을 더 세밀하게 나눌 수 있습니다. “문자열 또는 숫자만 허용”처럼 조합·제한을 표현하면, 런타임(프로그램이 실제로 실행되는 때) 전에 의도를 문서처럼 고정할 수 있습니다.

JavaScript에서 TypeScript로의 전환

“런타임 에러는 프로덕션에서 터진다”는 말이 있습니다. JavaScript로 개발하던 시절, 이 말을 뼈저리게 체감했습니다. 테스트는 다 통과했는데 배포 후 사용자가 이상한 데이터를 입력하면 앱이 터지는 거죠. 특히 팀 프로젝트에서 다른 사람이 작성한 함수의 반환 타입을 잘못 이해해서 버그가 발생하는 일이 잦았습니다. TypeScript를 도입한 후 가장 먼저 느낀 건 안심이었습니다. IDE가 자동완성을 정확히 해주고, 타입이 맞지 않으면 빨간 줄로 미리 알려줍니다. 리팩토링할 때도 “이 함수를 바꾸면 어디가 깨질까?” 걱정할 필요가 없어졌죠. 물론 처음엔 타입 정의 작성이 번거로웠지만, 몇 달 후 그 타입 정의 덕분에 버그를 미리 잡는 경험을 하고 나니 돌아갈 수 없었습니다.

1. Union 타입

개념

Union 타입은 여러 타입 중 하나일 수 있는 타입입니다.

// 문법: 타입1 | 타입2 | 타입3
let value: string | number;
value = "문자열";  // ✅
value = 123;       // ✅
// value = true;   // ❌ 에러

실전 예제

// 함수 매개변수
function printId(id: string | number) {
    console.log(`ID: ${id}`);
}
printId(101);        // ID: 101
printId("USER001");  // ID: USER001
// 배열
let mixedArray: (string | number)[] = [1, "two", 3, "four"];
// 함수 반환 타입
function getResult(success: boolean): string | null {
    return success ? "성공" : null;
}

타입 가드 (Type Guard)

Union 타입을 사용할 때는 타입 가드로 타입을 좁혀서(narrowing) 안전하게 사용해야 합니다:

function processValue(value: string | number) {
    // typeof 연산자로 런타임에 타입 체크
    // TypeScript 컴파일러는 이를 인식하고 타입을 좁혀줌 (Type Narrowing)
    
    if (typeof value === "string") {
        // ✅ 이 블록 안에서 value는 string 타입으로 좁혀짐
        // string 전용 메서드를 안전하게 사용 가능
        console.log(value.toUpperCase());  // 대문자로 변환
        console.log(value.length);         // 문자열 길이
        console.log(value.trim());         // 공백 제거
    } else {
        // ✅ else 블록에서는 value가 number 타입으로 좁혀짐
        // (string이 아니면 number이므로)
        // number 전용 메서드를 안전하게 사용 가능
        console.log(value.toFixed(2));     // 소수점 2자리로 포맷
        console.log(value * 2);            // 숫자 연산
        console.log(value.toExponential()); // 지수 표기법
    }
}
processValue("hello");  // HELLO, 5
processValue(3.14159);  // 3.14, 6.28318

타입 가드가 없다면:

function processValueBad(value: string | number) {
    // ❌ 컴파일 에러: string | number에는 toUpperCase()가 없음
    // console.log(value.toUpperCase());
    // TypeScript는 value가 string인지 number인지 모르므로
    // string 전용 메서드 호출을 허용하지 않음
    
    // ❌ 컴파일 에러: string | number에는 toFixed()가 없음
    // console.log(value.toFixed(2));
    
    // ✅ 타입 가드 없이는 공통 메서드만 사용 가능
    console.log(value.toString());  // 둘 다 toString() 있음
    console.log(value.valueOf());   // 둘 다 valueOf() 있음
}

다양한 타입 가드 방법:

// 1. typeof 타입 가드 (원시 타입)
function format(value: string | number | boolean) {
    if (typeof value === "string") {
        return value.toUpperCase();
    } else if (typeof value === "number") {
        return value.toFixed(2);
    } else {
        return value ? "참" : "거짓";
    }
}
// 2. instanceof 타입 가드 (클래스 인스턴스)
function handleError(error: Error | string) {
    if (error instanceof Error) {
        // Error 객체의 프로퍼티 접근 가능
        console.log(error.message);
        console.log(error.stack);
    } else {
        // string
        console.log(error);
    }
}
// 3. in 연산자 타입 가드 (프로퍼티 존재 확인)
type Dog = { bark: () => void };
type Cat = { meow: () => void };
function makeSound(animal: Dog | Cat) {
    if ("bark" in animal) {
        // animal은 Dog 타입으로 좁혀짐
        animal.bark();
    } else {
        // animal은 Cat 타입으로 좁혀짐
        animal.meow();
    }
}
// 4. 사용자 정의 타입 가드 (Type Predicate)
function isString(value: unknown): value is string {
    return typeof value === "string";
}
function process(value: unknown) {
    if (isString(value)) {
        // value는 string으로 좁혀짐
        console.log(value.toUpperCase());
    }
}

---

2. Intersection 타입

개념

Intersection 타입은 여러 타입을 모두 만족하는 타입입니다.

// 문법: 타입1 & 타입2 & 타입3
type Person = {
    name: string;
    age: number;
};
type Employee = {
    employeeId: string;
    department: string;
};
type Staff = Person & Employee;
const staff: Staff = {
    name: "홍길동",
    age: 30,
    employeeId: "E001",
    department: "개발팀"
};

실전 예제

// 믹스인 패턴
type Timestamped = {
    createdAt: Date;
    updatedAt: Date;
};
type User = {
    id: string;
    name: string;
    email: string;
};
type UserWithTimestamp = User & Timestamped;
const user: UserWithTimestamp = {
    id: "U001",
    name: "홍길동",
    email: "[email protected]",
    createdAt: new Date(),
    updatedAt: new Date()
};

---

3. Literal 타입

개념

Literal 타입은 정확한 값을 타입으로 지정합니다.

// 문자열 리터럴
let direction: "left" | "right" | "up" | "down";
direction = "left";   // ✅
// direction = "top"; // ❌ 에러
// 숫자 리터럴
let diceRoll: 1 | 2 | 3 | 4 | 5 | 6;
diceRoll = 3;   // ✅
// diceRoll = 7; // ❌ 에러
// 불리언 리터럴
let isTrue: true;
isTrue = true;   // ✅
// isTrue = false; // ❌ 에러

실전 예제

// HTTP 메서드
type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
function request(url: string, method: HttpMethod) {
    console.log(`${method} ${url}`);
}
request("/api/users", "GET");   // ✅
// request("/api/users", "PATCH"); // ❌ 에러
// 상태 관리
type Status = "idle" | "loading" | "success" | "error";
interface ApiState {
    status: Status;
    data: any;
    error: string | null;
}
const state: ApiState = {
    status: "loading",
    data: null,
    error: null
};

---

4. Type Alias

개념

Type Alias는 타입에 이름을 붙입니다.

// 기본 사용
type UserId = string;
type Age = number;
let id: UserId = "U001";
let age: Age = 25;
// 객체 타입
type User = {
    id: UserId;
    name: string;
    age: Age;
    email: string;
};
const user: User = {
    id: "U001",
    name: "홍길동",
    age: 25,
    email: "[email protected]"
};

함수 타입

// 함수 타입 정의
type MathOperation = (a: number, b: number) => number;
const add: MathOperation = (a, b) => a + b;
const subtract: MathOperation = (a, b) => a - b;
const multiply: MathOperation = (a, b) => a * b;
console.log(add(10, 5));       // 15
console.log(subtract(10, 5));  // 5

---

5. Type Narrowing

typeof 가드

function processInput(input: string | number) {
    if (typeof input === "string") {
        // input은 string
        return input.toUpperCase();
    } else {
        // input은 number
        return input.toFixed(2);
    }
}

instanceof 가드

class Dog {
    bark() {
        console.log("멍멍!");
    }
}
class Cat {
    meow() {
        console.log("야옹!");
    }
}
function makeSound(animal: Dog | Cat) {
    if (animal instanceof Dog) {
        animal.bark();
    } else {
        animal.meow();
    }
}
makeSound(new Dog());  // 멍멍!
makeSound(new Cat());  // 야옹!

in 연산자

type Fish = { swim: () => void };
type Bird = { fly: () => void };
function move(animal: Fish | Bird) {
    if ("swim" in animal) {
        animal.swim();
    } else {
        animal.fly();
    }
}

사용자 정의 타입 가드

interface User {
    id: string;
    name: string;
}
interface Admin {
    id: string;
    name: string;
    permissions: string[];
}
// 타입 가드 함수
function isAdmin(user: User | Admin): user is Admin {
    return "permissions" in user;
}
function greet(user: User | Admin) {
    if (isAdmin(user)) {
        console.log(`관리자 ${user.name}, 권한: ${user.permissions.join(", ")}`);
    } else {
        console.log(`사용자 ${user.name}`);
    }
}

---

6. 실전 예제

예제 1: API 응답 타입

type ApiResponse<T> = 
    | { success: true; data: T }
    | { success: false; error: string };
async function fetchUser(id: string): Promise<ApiResponse<User>> {
    try {
        const response = await fetch(`/api/users/${id}`);
        const data = await response.json();
        return { success: true, data };
    } catch (error) {
        return { success: false, error: "사용자를 찾을 수 없습니다" };
    }
}
// 사용
const result = await fetchUser("U001");
if (result.success) {
    console.log("사용자:", result.data.name);
} else {
    console.error("에러:", result.error);
}

예제 2: 상태 머신

type State = 
    | { status: "idle" }
    | { status: "loading" }
    | { status: "success"; data: any }
    | { status: "error"; error: string };
function handleState(state: State) {
    switch (state.status) {
        case "idle":
            console.log("대기 중");
            break;
        case "loading":
            console.log("로딩 중...");
            break;
        case "success":
            console.log("데이터:", state.data);
            break;
        case "error":
            console.error("에러:", state.error);
            break;
    }
}
// 사용
handleState({ status: "idle" });
handleState({ status: "loading" });
handleState({ status: "success", data: { name: "홍길동" } });
handleState({ status: "error", error: "네트워크 에러" });

---

7. 자주 하는 실수

실수 1: Union 타입 오해

// ❌ 잘못된 사용
function getLength(value: string | number) {
    return value.length;  // 에러: number에는 length 없음
}
// ✅ 올바른 사용
function getLength(value: string | number) {
    if (typeof value === "string") {
        return value.length;
    }
    return value.toString().length;
}

실수 2: Intersection 타입 충돌

// ❌ 충돌하는 타입
type A = { value: string };
type B = { value: number };
type C = A & B;  // value는 never 타입
// ✅ 올바른 사용
type A = { name: string };
type B = { age: number };
type C = A & B;  // { name: string; age: number }

---

정리

핵심 요약

1. Union: A | B (또는)
2. Intersection: A & B (그리고)
3. Literal: 정확한 값
4. Type Alias: 타입 이름 지정
5. Type Narrowing: 타입 좁히기

다음 단계

• TypeScript 인터페이스
• TypeScript 제네릭
• TypeScript 유틸리티 타입

---

관련 글

• C++ Union과 Variant |
• TypeScript 인터페이스 | Interface 완벽 가이드
• TypeScript 제네릭 | Generics 완벽 가이드
• C++ Algorithm Set |
• C++ std::variant vs union |

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「TypeScript 고급 타입 | Union, Intersection, Literal 타입」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

• 불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
• 결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
• 경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
• 백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「TypeScript 고급 타입 | Union, Intersection, Literal 타입」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

1. 입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
2. 핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
3. 실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
4. 호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
5. 부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

---

자주 묻는 질문 (FAQ)

Q. 이 내용을 실무에서 언제 쓰나요?

A. TypeScript 고급 타입: Union, Intersection, Literal 타입. Union 타입·Intersection 타입로 흐름을 잡고 원리·코드·실무 적용을 한글로 정리합니다. Start now. 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.

Q. 선행으로 읽으면 좋은 글은?

A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. C++ 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.

Q. 더 깊이 공부하려면?

A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.

---

같이 보면 좋은 글 (내부 링크)

이 주제와 연결되는 다른 글입니다.

• TypeScript 시작하기 | 설치, 설정, 기본 문법
• TypeScript 인터페이스 | Interface 완벽 가이드
• TypeScript 제네릭 | Generics 완벽 가이드

---

이 글에서 다루는 키워드 (관련 검색어)

TypeScript, 타입, Union, Intersection, Literal, Type Alias 등으로 검색하시면 이 글이 도움이 됩니다.