🧙‍♂️ 05. 고급 타입 조작: 영수네 커뮤니티 권한 매핑 설계

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 15분(전체) / 핵심 파트만: 8분

🗺️ 이 문서의 흐름
[typeof와 keyof의 진짜 의미] → [맵드 타입(Mapped Types)으로 노가다 탈출하기] → [조건부 타입(Conditional Types) 맛보기]

🎯 이 문서를 다 읽으면 할 수 있는 것

• 자바스크립트의 값(Value) 공간에서 활동하는 변수를 타입(Type) 공간으로 깔끔하게 끌어올릴 수 있다.
• 수십 개의 프로퍼티를 가진 객체 타입을 단 3줄의 코드로 일괄 변환(Mapped Type)할 수 있다.
• 5년 차 수준의 오픈소스 라이브러리 타입(Partial, Pick, Omit의 내부 원리)을 이해하고 직접 구현할 수 있다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 🐣 영철 ( 타입 중복을 줄여가는 중 ): "리드 님! 백엔드에서 사용자 프로필 정보(UserProfile)를 가져오는데, 가입할 때 쓰는 '수정 가능한 폼 데이터' 타입을 새로 만들어야 해요. 기존 UserProfile을 복사해서 id를 빼고 전부 optional로 바꾸고 있는데, 이러면 원본 타입이 바뀔 때마다 놓칠 것 같습니다."
• 🦁 영호 ( 리드 ): "좋은 감지입니다. 제네릭까지 배웠다면 이제 기존 타입을 재료로 새 타입을 만드는 단계로 넘어갈 차례예요. typeof, keyof, 맵드 타입을 쓰면 중복 선언 대신 원본 타입과 함께 움직이는 파생 타입을 만들 수 있습니다."

🤔 왜 알아야 하는가: '복사 붙여넣기'의 끝없는 늪

초보 시절의 타입스크립트는 "내가 만든 변수에 인터페이스 하나 달아주기" 정도면 충분합니다. 하지만 프로젝트가 커지면 "기존에 있는 A 타입을 아주 살짝만 바꿔서 B 타입을 만들고 싶다" 는 욕망이 끓어오릅니다.

영수네 커뮤니티의 권한 객체가 있다고 칩시다.

// 🐣 영철이의 복붙 노가다
interface UserProfile {
  id: number;
  name: string;
  email: string;
  age: number;
}
 
// 회원 정보 수정 폼을 위해 모든 필드를 선택적(Optional)으로 만들고 싶음
interface UserProfileUpdateForm {
  id?: number;
  name?: string;
  email?: string;
  age?: number;
}

나중에 영수(백엔드)가 UserProfile에 phoneNumber: string을 추가하면 어떻게 될까요?
네, 영철이는 또 야근하며 UserProfileUpdateForm을 찾아 phoneNumber?: string을 손수 적어 넣어야 합니다. 이런 짓을 막기 위해 5년 차 개발자들은 타입 조작(Type Manipulation) 을 무기로 삼습니다.

🪞 1. 값(Value)과 타입(Type)의 세계를 가로지르기: typeof & keyof

이 고급 타입 조작의 첫 단추는 JS 세상의 런타임 데이터와 TS 세상의 컴파일 타입을 정확히 오가는 연산자들입니다.

typeof: JS 변수에서 타입 뽑아오기

// JS의 값(Value) 세상
const ROLE_NAMES = {
  ADMIN: "최고 관리자",
  MANAGER: "게시판 관리자",
  USER: "일반 사용자"
};
 
// 🦁 영호: "저 객체의 모양표를 그대로 타입 세상으로 납치해 봅시다!"
type RoleMap = typeof ROLE_NAMES;
/*
결과:
type RoleMap = {
  ADMIN: string;
  MANAGER: string;
  USER: string;
}
*/

이 기법은 Redux의 초기 상태(initialState)나 공통 상수 객체에서부터 타이핑을 시작할 때 굉장히 유용합니다. JS 코드를 먼저 짜고, 그 위에 TS를 부드럽게 얹는 방식이죠.

keyof: 객체의 '키'들만 뽑아서 유니언으로 만들기

객체의 타입을 통째로 뽑는 게 typeof라면, 그 객체의 키(Key)값들만 빼곡히 뽑아내고 싶을 때는 keyof를 씁니다.

type UserKeys = keyof UserProfile;
// 결과: "id" | "name" | "email" | "age"
 
// 활용: 파라미터로 무조건 UserProfile의 키값 중 하나만 들어오도록 강제!
function getProperty(user: UserProfile, key: keyof UserProfile) {
  return user[key];
}
 
getProperty(myUser, "name"); // ✅ 통과
// getProperty(myUser, "password"); // ❌ 에러: password는 UserProfile의 키가 아닙니다!

🎨 2. 맵드 타입 (Mapped Types): 타입들의 대량 생산 공장

자, 이제 영철이의 야근 원흉이었던 복붙 문제를 해결해 봅시다.
배열을 돌 때 .map()을 쓰듯, 객체의 모든 키를 순회하며 속성을 일괄 변경하는 도구가 바로 맵드 타입입니다.

// 🦁 영호: "T라는 객체가 들어오면, 그 객체의 모든 키(K)를 순회하면서 옵셔널(?)을 붙여버려!"
 
type MakeOptional<T> = {
  [K in keyof T]?: T[K]; // 모든 키를 순회하며 선택 속성으로 바꾼다.
};
 
// 영철이의 구세주
type UserProfileUpdateForm = MakeOptional<UserProfile>;
/*
결과:
type UserProfileUpdateForm = {
    id?: number | undefined;
    name?: string | undefined;
    email?: string | undefined;
    age?: number | undefined;
}
*/

이 패턴은 너무나도 많이 쓰여서, 타입스크립트가 아예 Partial<T> 라는 이름으로 내장 유틸리티 타입을 만들어 두었습니다. Readonly<T>, Pick<T, K>, Omit<T, K> 등 여러분이 쓰는 유용한 문법들이 전부 이 맵드 타입과 keyof로 만들어져 있습니다.

⚖️ 3. 조건부 타입 (Conditional Types): 타입에도 If문이 있다

때로는 삼항 연산자(A ? B : C)처럼 "이 타입이 저기를 만족하면 A를 반환하고, 아니면 B를 반환해!" 라는 로직이 필요할 때가 있습니다. (주로 라이브러리 제작자들이 많이 씁니다.)

// T가 문자열이면 숫자 타입을 반환하고, 아니면 그냥 문자열을 반환하라!
type NumberIfString<T> = T extends string ? number : string;
 
type Test1 = NumberIfString<"안녕">; // Test1은 number 타입이 됨
type Test2 = NumberIfString<boolean>; // Test2는 string 타입이 됨

실무에서는 이를 활용해 특정 타입만 필터링하거나 추출하는 데 씁니다. 예를 들어 위에서 만든 UserProfile에서 값이 string인 프로퍼티 키값만 뽑아내고 싶을 때 조건부 타입을 조합할 수 있습니다. 당장 모든 패턴을 외울 필요는 없지만, 권한/폼/응답 타입을 설계할 때 이런 조합이 반복해서 등장합니다.

📝 마무리 퀴즈

Q1. 자바스크립트의 상수 파일(const COLORS = { RED: '#f00', BLUE: '#00f' })이 있을 때, 이 객체의 형태를 바탕으로 type ColorsType을 자동으로 만들어내고 싶습니다. 어떤 연산자를 사용해야 하나요?

✅ 정답: typeof 연산자를 사용합니다. (예: type ColorsType = typeof COLORS;)

💡 상세 해설:

• JS의 런타임 값으로부터 TS의 타입 구조를 추출(추론)할 때 첫 번째 관문이 바로 typeof 키워드입니다. 이렇게 하면 나중에 상수 객체에 GREEN: '#0f0'이 추가되더라도 ColorsType에 자동으로 GREEN이 포함되므로 유지보수가 극도로 편해집니다.

Q2. keyof 연산자를 배열(Array) 타입에 적용하면 어떤 결과가 반환될까요? (예: type ArrayKeys = keyof string[];)

✅ 정답: 배열의 인덱스인 number 형태와 배열 프로토타입에 있는 메서드 이름들("length" | "push" | "pop" | "map" 등...)이 통째로 유니언으로 반환됩니다.

💡 상세 해설:

• keyof는 객체의 "키"를 추출합니다. 배열 역시 자바스크립트에서는 인덱스(0, 1, 2...)를 키로 가지고 리스트 관련 메서드를 속성으로 갖는 거대한 객체입니다.
• 그래서 배열에 대고 keyof를 쓰면 사실상 우리가 원하는 깔끔한 데이터보다 내장 함수 이름이 쏟아져 나오게 되므로, 배열 내부 요소를 다룰 때는 T[number] 형태의 인덱스드 액세스(Indexed Access)를 더 자주 사용합니다.

Q3. [영철이의 테스트 타임: 라이브러리 트레이드오프] 영수네 커뮤니티의 API 공통 유틸 폴더를 보던 영철이가 깜짝 놀랍니다. "리드 님! TS 내장 유틸리티인 Partial<T>, Required<T>, Readonly<T> 같은 게 전부 내부 코드를 까보니 [P in keyof T] 라는 똑같은 문법으로 시작하네요? 이건 뭔가요?" 라고 묻는 영철에게 영호는 어떤 개념을 설명해 줄까요?

✅ 정답: "영철 님, 그게 바로 맵드 타입(Mapped Type)의 핵심 골격입니다. 객체의 키를 순회하며 속성을 일괄 조작하는 문법이죠."

💡 상세 해설:

• 원리 설명: [P in keyof T]는 마치 JS의 for...in 반복문처럼 작동합니다. T라는 객체의 모든 키(keyof T)를 하나씩 P라는 변수에 담아가면서, 그 결과물 타입을 옵셔널(?:), 읽기 전용(readonly), 또는 원래 타입(T[P]) 등으로 통째로 맵핑(Mapping)하는 게 바로 저 유우명한 유틸리티들의 민낯입니다.
• 내장 유틸리티를 쓰는 것에서 끝나지 않고, 우리 서비스 규칙에 맞춘 파생 타입을 만들 때도 같은 원리를 사용합니다. 예를 들어 모든 폼 필드를 nullable하게 만들거나, 서버 응답에서 읽기 전용 필드를 분리할 때 유용합니다.
• 핵심은 객체 타입의 키를 한 번씩 순회하면서 각 속성의 선택성, 읽기 전용 여부, 값 타입을 일관되게 바꾸는 것입니다.

🐣 영철이의 퇴근 일기

오늘은 타입을 복사해서 새로 만드는 습관이 얼마나 위험한지 알았다. UserProfile이 바뀌었는데 UserProfileUpdateForm이 그대로 남아 있으면, 타입스크립트가 아니라 내가 중복을 만든 탓이다.

typeof는 값에서 타입을 끌어오고, keyof는 키 목록을 유니언으로 만들고, 맵드 타입은 그 키들을 따라 새 구조를 만든다. Partial, Pick, Omit이 갑자기 외워야 할 이름이 아니라 읽을 수 있는 코드처럼 보이기 시작했다.

💡 "파생 타입은 원본 타입과 함께 움직여야 한다. 복사본을 늘리는 대신 keyof, 맵드 타입, 유틸리티 타입으로 관계를 선언하자."

내일은 권한 상수와 프로필 폼 타입부터 확인해보려고 한다. 원본 객체나 인터페이스에서 바로 파생할 수 있는 타입은 손으로 다시 쓰지 않고, 변경이 한 곳에서 흐르도록 만드는 게 목표다.