유틸리티 타입 - 타입을 "코딩" 하라

// JS로 DTO를 따로 적은 모습
function buildUpdatePayload(payload) {
  return {
    name: payload.name,
    email: payload.email,
  };
}
 
function applyUpdate(userId, payload) {
  if (payload.name) {
    users[userId].name = payload.name;
  }
}

interface User {
  id: string;
  name: string;
  email: string;
  createdAt: string;
  updatedAt: string;
}
 
// 생성용: 시스템이 생성하는 필드 제외
type UserCreateDto = Omit<User, "id" | "createdAt" | "updatedAt">;
 
// 수정용: 선택적으로 수정 가능한 필드만
type UserUpdateDto = Partial<Pick<User, "name" | "email">>;
 
// 응답용: 전체 정보
type UserResponse = User;

// Pick: 특정 속성만 선택
type UserProfile = Pick<User, "id" | "name" | "email">; // id, name, email만 포함
type UserSettings = Pick<User, "id" | "email">; // id, email만 포함
 
// Omit: 특정 속성 제외
type UserInput = Omit<User, "id" | "createdAt" | "updatedAt">; // id, createdAt, updatedAt 제외
 
// 조합 사용
type UpdateProfile = Partial<Pick<User, "name" | "email">>; // name, email을 옵셔널로

// Partial: 모든 속성을 옵셔널로
type PartialUser = Partial<User>; // 모든 필드가 ?가 됨
 
// Required: 모든 속성을 필수로
type RequiredUser = Required<User>; // 모든 ?가 제거됨
 
// 조합 사용: 일부 필수, 일부 옵셔널
type UserUpdateWithId = Required<Pick<User, "id">> & Partial<Pick<User, "name" | "email">>;
 
// 실제 사용
function updateUser(id: string, updates: Partial<Pick<User, "name" | "email">>) {
  // updates.name과 updates.email은 옵셔널
  // 하지만 id는 별도로 필수로 받음
}

// 유니온 타입 정의
type UserStatus = "idle" | "active" | "banned";
 
// Record: 키-값 매핑 객체 타입 생성
type UserMap = Record<string, User>; // { [key: string]: User }
type StatusConfig = Record<UserStatus, string>; // 각 상태별 메시지 매핑
 
// Exclude: 유니온에서 특정 타입 제외
type ActiveStatus = Exclude<UserStatus, "banned">; // "idle" | "active"
 
// Extract: 유니온에서 특정 타입만 추출
type AdminStatus = Extract<UserStatus, "idle" | "active">; // "idle" | "active"
 
// 실제 활용
const statusMessages: Record<UserStatus, string> = {
  idle: "대기 중",
  active: "활성",
  banned: "차단됨",
};
 
function canAccessAdmin(status: UserStatus): boolean {
  return status !== "banned"; // Exclude<UserStatus, "banned">와 동일한 로직
}

// keyof: 타입의 모든 속성 키를 유니온으로
type UserField = keyof User; // "id" | "name" | "email" | "createdAt" | "updatedAt"
 
// 인덱스 접근 타입 (Indexed Access Types): T[K] 형태로 특정 속성의 타입 추출
type UserEmail = User["email"]; // string - User 타입에서 "email" 속성의 타입
type UserId = User["id"]; // string - User 타입에서 "id" 속성의 타입
type OptionalField = User["createdAt"]; // string (옵셔널이더라도 실제 타입은 유지)
 
// 제네릭 활용: keyof와 Indexed Access Types의 결합
function getFieldValue<T, K extends keyof T>(obj: T, field: K): T[K] {
  // T[K]는 "obj의 field 속성 타입"을 의미 (Indexed Access Types)
  return obj[field];
}
 
// 실제 사용: Indexed Access Types로 타입 안전성 확보
const user: User = {
  id: "1",
  name: "Kim",
  email: "kim@example.com",
  createdAt: "2023",
  updatedAt: "2024",
};
 
// getFieldValue(user, "email")의 반환 타입은 User["email"] = string
const email = getFieldValue(user, "email"); // string 타입 (Indexed Access Types로 추론)
const name = getFieldValue(user, "name"); // string 타입 (동일)
 
// 컴파일 오류: 존재하지 않는 필드 (keyof User에 포함되지 않음)
// const invalid = getFieldValue(user, "invalidField");

// ❌ as const 없이 일반 객체 사용 시
const config1 = {
  theme: "dark",
  language: "ko",
};
type ThemeType1 = keyof typeof config1; // string (너무 넓음)
 
// ✅ satisfies로 타입 확인 + 리터럴 유지
const config2 = {
  theme: "dark",
  language: "ko",
} satisfies Record<string, string>;
type ThemeType2 = keyof typeof config2; // "theme" | "language" (정확함)
 
// 실제 활용
const themeConfig = {
  primary: "#007bff",
  secondary: "#6c757d",
  danger: "#dc3545",
} satisfies Record<string, string>;
 
type ThemeKey = keyof typeof themeConfig; // "primary" | "secondary" | "danger"
 
// 타입 안전한 테마 접근 함수
function getThemeColor(key: ThemeKey): string {
  return themeConfig[key];
}
 
getThemeColor("primary"); // ✅
getThemeColor("invalid"); // ❌ 컴파일 오류

// 1) 타입 정의: 폼과 API 호출에 사용할 타입들 준비
// FormDto: name과 email 필드만 선택하고 모두 옵셔널로 (Partial<Pick<User, "name" | "email">>)
// - Pick으로 name, email만 선택
// - Partial로 옵셔널 필드로 만듦 (수정 시 일부만 변경 가능)
type FormDto = Partial<Pick<User, "name" | "email">>;
 
// UserUpdateWithId: API 호출용 타입
// - Required<Pick<User, "id">>: id는 반드시 필요
// - & FormDto: 폼 데이터와 결합
type UserUpdateWithId = Required<Pick<User, "id">> & FormDto;
 
function UserForm({ user }: { user: User }) {
  // 2) 폼 상태 초기화: 빈 객체로 시작 (모든 필드가 옵셔널이므로)
  // FormDto 타입으로 타입 안전성 보장
  const [form, setForm] = useState<FormDto>({});
 
  // 3) 폼 필드 업데이트 함수: 동적 필드명으로 상태 업데이트
  // keyof FormDto로 "name" | "email" 유니온 타입 보장
  function updateForm(field: keyof FormDto, value: string) {
    setForm((prev) => ({ ...prev, [field]: value }));
  }
 
  // 4) 제출 핸들러: 폼 데이터를 API 호출용 DTO로 변환
  function handleSubmit() {
    // UserUpdateWithId 타입으로 변환: id(필수) + 폼 데이터(옵셔널)
    // { id: user.id, ...form } → { id: string, name?: string, email?: string }
    const dto: UserUpdateWithId = { id: user.id, ...form };
 
    // 타입 안전한 API 호출
    api.updateUser(dto);
  }
 
  return (
    <div>
      {/* 5) 이름 입력: form.name이 undefined일 수 있으므로 ?? ""로 처리 */}
      <input
        value={form.name ?? ""} // FormDto에서 name은 옵셔널
        onChange={(e) => updateForm("name", e.target.value)} // "name" 키로 업데이트
        placeholder="이름"
      />
 
      {/* 6) 이메일 입력: 동일한 패턴 */}
      <input
        value={form.email ?? ""} // FormDto에서 email은 옵셔널
        onChange={(e) => updateForm("email", e.target.value)} // "email" 키로 업데이트
        placeholder="이메일"
      />
 
      {/* 7) 제출 버튼: handleSubmit에서 타입 변환 후 API 호출 */}
      <button onClick={handleSubmit}>수정</button>
    </div>
  );
}