TypeScript 실전 과제 - 유틸리티 타입 활용 1편

1. 유틸리티 타입

TypeScript가 기본으로 제공하는 타입 변환 도구입니다. 기존 타입을 직접 수정하지 않고, 상황에 맞게 변형된 새 타입을 만들 수 있습니다.

자주쓰는 유틸리티 타입을 1편과 2편으로 나누웠습니다. 모든 유틸리티 타입을 보고 싶다면 유틸리티 타입을 참고해주세요.

유틸리티 타입	설명
Omit<T, K>	T에서 K 키를 제거한 타입
Pick<T, K>	T에서 K 키만 선택한 타입
Partial<T>	T의 모든 키를 선택적(?)으로 만든 타입
Readonly<T>	T의 모든 키를 읽기 전용(readonly)으로 만든 타입

---

2. 시나리오

사용자 관리 API 만들기
아래 User 타입 하나로 4가지 상황에 맞는 타입을 유틸리티 타입만 써서 만들어보세요.

type User = {
  id: number;
  name: string;
  email: string;
  password: string;
  createdAt: Date;
  updatedAt: Date;
};

---

3. 실전 과제

문제 1 — 회원가입 요청 DTO

회원가입 요청 시 id, createdAt, updatedAt은 서버가 자동 생성하는 필드임으로 보내면 안됩니다. 회원가입 요청 타입을 정의하십시오.
문제 풀어보기 =>

type CreateUserDTO = ?

문제 2 — 회원정보 수정 요청 DTO

회원 정보 수정 요청 시 name, email, password 만 수정 가능하고, 셋 다 선택적으로 보낼 수 있어야 합니다. 회원정보 수정 요청 타입을 정의하십시오.
문제 풀어보기 =>

type UpdateUserDTO = ?

문제 3 — API 응답으로 유저 반환

User 정보 요청 시 응답에서 password는 반환되면 안됩니다. User 정보 응답에 대한 타입을 정의하십시오.
문제 풀어보기 =>

type UserResponse = ?

문제 4 — 관리자 페이지 유저 목록

관리자 페이지에서 유저 목록을 표시할때, name, email 은 관리자가 직접 수정할 수 있습니다. 다만 id, createdAt, updatedAt, password 는 수정할 수 있으면 안됩니다. 유저 목록 응답 시 단일 User에 대한 타입을 정의하십시오.
문제 풀어보기 =>

type AdminUserView = ?

---

4. 풀이 코드

문제 1 — 회원가입 요청 DTO

회원가입 요청 시 id, createdAt, updatedAt은 서버가 자동 생성하는 필드임으로 보내면 안됩니다. 회원가입 요청 타입을 정의하십시오.

type CreateUserDTO = Omit<User, "id" | "createdAt" | "updatedAt">;

// 결과
type CreateUserDTO = {
   name: string;
   email: string;
   password: string;
 }

문제 2 — 회원정보 수정 요청 DTO

회원 정보 수정 요청 시 name, email, password 만 수정 가능하고, 셋 다 선택적으로 보낼 수 있어야 합니다. 회원정보 수정 요청 타입을 정의하십시오.

type UpdateUserDTO = Partial<Pick<User, "name" | "email" | "password">>;

// 결과
type UpdateUserDTO = {
   name?: string;
   email?: string;
   password?: string;
 }

문제 3 — API 응답으로 유저 반환

User 정보 요청 시 응답에서 password는 반환되면 안됩니다. User 정보 응답에 대한 타입을 정의하십시오.

type UserResponse = Omit<User, "password">;

// 결과
type UserResponse = {
   id: number;
   name: string;
   email: string;
   createdAt: Date;
   updatedAt: Date;
 }

문제 4 — 관리자 페이지 유저 목록

관리자 페이지에서 유저 목록을 표시합니다. name, email 은 관리자가 직접 수정할 수 있지만, id, createdAt, updatedAt, password 는 수정할 수 있으면 안됩니다. 유저 목록 응답 시 단일 User에 대한 타입을 정의하십시오.

type AdminUserView = Pick<User, 'name' | 'email'> & Readonly<Omit<User, 'name' | 'email'>>;

// 결과
type AdminUserView = {
   name: string;
   email: string;
   readonly id: number;
   readonly password: string;
   readonly createdAt: Date;
   readonly updatedAt: Date;
}

---

5. 간단 요약

• Omit — 빼고 싶은 필드가 있을 때
• Pick — 쓸 필드만 추리고 싶을 때
• Partial — 있어도 되고 없어도 될 때
• Readonly — 건드리면 안 되는 필드를 보호할 때

타입을 매번 새로 정의하지 말고, 하나의 User 타입에서 파생시키세요.
수정이 생겼을 때 User 하나만 고치면 연결된 타입이 전부 따라옵니다.