💼 실전 타입 유틸 패턴 총정리 & 예제 모음

📚 타입스크립트 입문 시리즈
🟢 ① tsconfig.json 완전 정복 | 🟢 ② 개발 환경 세팅 | 🟢 ③ 기본 타입 정복 | 🟢 ④ interface vs type | 🟢 ⑤ 함수 타입 선언 | 🟢 ⑥ 유니언 & 인터섹션 타입 | 🟢 ⑦ 타입 추론과 단언 | 🟢 ⑧ 타입 좁히기 | 🟢 ⑨ 제네릭(Generic) | 🟢 ⑩ 유틸리티 타입 | 🟢 ⑪ 고급 타입 조작 | 🟢 ⑫ 조건부 타입 | 🟢 ⑬ Enum vs Const Enum | 🟢 ⑭ Mapped & Template Literal | 🔵 ⑮ 실전 타입 패턴 총정리

💼 실전 타입 유틸 패턴 총정리 & 예제 모음

지금까지 배운 타입스크립트 문법을 기반으로, 실무에서 자주 사용하는 타입 조합 패턴과 재사용 가능한 유틸들을 정리해드립니다.
React, API, Form, 상태관리 등 다양한 맥락에서 유용하게 쓰일 수 있는 타입들을 소개합니다.

---

① Form 처리 시 Partial + Required 조합

type User = {
  name: string;
  email: string;
  age: number;
};

// 전체 필드는 필수지만, 입력 중에는 모두 선택적
type UserForm = Partial<User>;

// 제출 시에는 모든 필드 필수
function submit(data: Required<User>) {
  // ...
}

 

초기 폼은 필드값이 아직 없으니까 일부만 입력돼도 괜찮은 Partial

---

② API 요청 vs 응답 타입 분리

type UserRequest = Pick<User, 'name' | 'email'>;
type UserResponse = Omit<User, 'email'> & { id: number };

// 응답 구조
type ApiResponse = {
  success: boolean;
  data: T;
};

→ 요청은 일부 필드만, 응답은 추가 필드 포함 (id, createdAt 등)

---

③ 이벤트 핸들러 패턴: keyof + mapped type

type Events = 'click' | 'hover' | 'focus';

type EventHandlers = {
  [E in Events]: (e: Event) => void;
};

const handlers: EventHandlers = {
  click: (e) => console.log(e),
  hover: (e) => console.log(e),
  focus: (e) => console.log(e),
};

---

④ 에러 메시지 관리 – Template Literal Type

type Fields = 'email' | 'password';

type ErrorKeys = `${Fields}Error`; // 'emailError' | 'passwordError'

type ErrorMessages = {
  [K in ErrorKeys]?: string;
};

→ 입력 필드에 따라 동적으로 에러 메시지 키를 만들 수 있음

---

⑤ 서버 상태 관리 시 타입 스위칭

type Loading = { status: 'loading' };
type Success = { status: 'success'; data: T };
type Error = { status: 'error'; message: string };

type RemoteData = Loading | Success | Error;

function fetchUser(): RemoteData {
  return { status: 'loading' };
}

---

⑥ 유틸 타입: Nullable / NonNullable / DeepPartial

// 모든 필드를 null 가능하게
type Nullable = {
  [K in keyof T]: T[K] | null;
};

// null, undefined 제거
type MyType = string | null | undefined;
type Clean = NonNullable; // string

// 깊은 Partial (실전 유용)
type DeepPartial = {
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

---

📘 참고: 커스텀 유틸 타입 조합 예시

// Form 구성 시 초기 상태용 타입
type FormState = {
  values: Partial;
  errors: {
    [K in keyof T]?: string;
  };
  touched: {
    [K in keyof T]?: boolean;
  };
};

---

🧠 마무리 요약

• 타입스크립트의 진짜 장점은 "타입 조합과 재사용"에 있음
• 유틸리티 타입, 조건부 타입, mapped/template literal 타입 등을 통해 확장성과 유지보수성이 올라감
• 팀 컨벤션에 맞는 커스텀 타입 유틸을 만들면 개발 속도도 향상됨

---

🎉 타입스크립트 입문 시리즈 완료!

지금까지 총 15편에 걸쳐 타입스크립트의 핵심 문법과 실전 적용 방법을 정리해보았습니다.
이제 문법뿐 아니라, 실제 프로젝트에서 타입을 어떻게 설계하고 다루는지가 더 중요합니다.
필요하면 이 시리즈를 복습하거나, 심화편으로 이어가도 좋습니다!

✔️ 다음 시리즈로는 실무 기반의 React/Vue + TypeScript 예제 또는 백엔드 Express + TS 편으로 이어갈 수 있어요.