TypeScript 유틸리티 타입 실무 활용법: Pick, Omit, Record 등을 실무에서 활용하는 방법

// 유틸리티 타입 없이 작성한 코드 (문제점이 많음)
interface User {
  id: number;
  name: string;
  email: string;
  password: string;
  createdAt: Date;
  updatedAt: Date;
}

// 사용자 생성 시 필요한 타입 (중복 코드)
interface CreateUser {
  name: string;
  email: string;
  password: string;
}

// 사용자 업데이트 시 필요한 타입 (또 다른 중복)
interface UpdateUser {
  name?: string;
  email?: string;
  password?: string;
}

// 공개 프로필용 타입 (계속되는 중복)
interface PublicUser {
  id: number;
  name: string;
  email: string;
  createdAt: Date;
}

// 기본 사용법
interface User {
  id: number;
  name: string;
  email: string;
  password: string;
  createdAt: Date;
  updatedAt: Date;
}

// 공개 프로필용 타입 (id, name, email만 선택)
type PublicUser = Pick<User, 'id' | 'name' | 'email'>;
// 결과: { id: number; name: string; email: string; }

// 로그인 폼용 타입
type LoginForm = Pick<User, 'email' | 'password'>;
// 결과: { email: string; password: string; }

// 실제 사용 예시
const displayUser = (user: PublicUser) => {
  console.log(`${user.name} (${user.email})`); // ✅ 타입 안전
  // console.log(user.password); // ❌ 컴파일 에러
};

// 사용자 생성용 타입 (id, createdAt, updatedAt 제외)
type CreateUser = Omit<User, 'id' | 'createdAt' | 'updatedAt'>;
// 결과: { name: string; email: string; password: string; }

// 사용자 업데이트용 타입 (id 제외, 나머지는 선택적)
type UpdateUser = Partial<Omit<User, 'id'>>;
// 결과: { name?: string; email?: string; password?: string; createdAt?: Date; updatedAt?: Date; }

// API 응답용 타입 (password 제외)
type UserResponse = Omit<User, 'password'>;
// 결과: { id: number; name: string; email: string; createdAt: Date; updatedAt: Date; }

// 실제 사용 예시
const createUser = async (userData: CreateUser): Promise<User> => {
  // userData에는 id, createdAt, updatedAt이 없음을 보장
  return await api.post('/users', userData);
};

// 기본 사용법
type UserRole = 'admin' | 'user' | 'guest';
type RolePermissions = Record<UserRole, string[]>;
// 결과: { admin: string[]; user: string[]; guest: string[]; }

// 실제 구현 예시
const permissions: RolePermissions = {
  admin: ['read', 'write', 'delete', 'manage'],
  user: ['read', 'write'],
  guest: ['read']
};

// API 엔드포인트 타입 정의
type ApiEndpoints = Record<'GET' | 'POST' | 'PUT' | 'DELETE', string>;
const endpoints: ApiEndpoints = {
  GET: '/api/users',
  POST: '/api/users',
  PUT: '/api/users/:id',
  DELETE: '/api/users/:id'
};

// 다국어 번역 타입
type Language = 'ko' | 'en' | 'ja';
type TranslationKeys = 'welcome' | 'goodbye' | 'thank_you';
type Translations = Record<Language, Record<TranslationKeys, string>>;

const translations: Translations = {
  ko: {
    welcome: '환영합니다',
    goodbye: '안녕히 가세요',
    thank_you: '감사합니다'
  },
  en: {
    welcome: 'Welcome',
    goodbye: 'Goodbye',
    thank_you: 'Thank you'
  },
  ja: {
    welcome: 'いらっしゃいませ',
    goodbye: 'さようなら',
    thank_you: 'ありがとう'
  }
};

// 업데이트 함수에서 활용
type UpdateUserData = Partial<User>;

function updateUser(id: number, updates: UpdateUserData): Promise<User> {
  // updates의 모든 속성이 선택적이므로 부분 업데이트 가능
  return api.patch(`/users/${id}`, updates);
}

// 사용 예시
updateUser(1, { name: '새로운 이름' });           // ✅ 이름만 업데이트
updateUser(1, { email: 'new@email.com' });      // ✅ 이메일만 업데이트
updateUser(1, { name: '이름', email: '이메일' }); // ✅ 여러 필드 업데이트

// 폼 상태 관리
interface FormState<T> {
  values: Partial<T>;
  errors: Partial<Record<keyof T, string>>;
  touched: Partial<Record<keyof T, boolean>>;
}

const userFormState: FormState<User> = {
  values: { name: '', email: '' }, // 일부 값만 초기화
  errors: {},
  touched: {}
};

// 기본 인터페이스에 선택적 속성이 있는 경우
interface ConfigOptions {
  host?: string;
  port?: number;
  database?: string;
  username?: string;
  password?: string;
}

// 완전한 설정이 필요한 환경에서 사용
type ProductionConfig = Required<ConfigOptions>;

function initializeDatabase(config: ProductionConfig) {
  // 모든 속성이 반드시 존재함을 보장
  console.log(`Connecting to ${config.host}:${config.port}`);
  console.log(`Database: ${config.database}`);
  console.log(`User: ${config.username}`);
}

// 사용 시 모든 속성 필수
const prodConfig: ProductionConfig = {
  host: 'localhost',    // 필수
  port: 5432,           // 필수
  database: 'myapp',    // 필수
  username: 'admin',    // 필수
  password: 'secret'    // 필수
};

// 1. NoInfer<T> - 타입 추론 방지 (TypeScript 5.4+)
function createPair<T>(first: T, second: NoInfer<T>): [T, T] {
  return [first, second];
}

// 타입이 첫 번째 인수에서만 추론됨
const pair1 = createPair('hello', 'world'); // ✅ 정상
const pair2 = createPair('hello', 123); // ❌ 에러: second는 string이어야 함

// 2. Awaited<T> - Promise 해제 타입
type ApiResponse = Promise<{ data: User[]; status: number }>;
type UnwrappedResponse = Awaited<ApiResponse>;
// 결과: { data: User[]; status: number }

async function fetchUsers(): Promise<User[]> {
  const response: UnwrappedResponse = await fetch('/api/users').then(r => r.json());
  return response.data;
}

// 3. Template Literal 유틸리티 타입들
type APIKey = 'user' | 'product' | 'order';

// Uppercase - 대문자 변환
type UppercaseKeys = Uppercase<APIKey>;
// 결과: 'USER' | 'PRODUCT' | 'ORDER'

// Lowercase - 소문자 변환  
type LowercaseKeys = Lowercase<APIKey>;
// 결과: 'user' | 'product' | 'order'

// Capitalize - 첫 글자 대문자
type CapitalizedKeys = Capitalize<APIKey>;
// 결과: 'User' | 'Product' | 'Order'

// Uncapitalize - 첫 글자 소문자
type UncapitalizedKeys = Uncapitalize<'User' | 'Product'>;
// 결과: 'user' | 'product'

// 4. 실무 활용: 이벤트 핸들러 타입 자동 생성
type EventNames = 'click' | 'hover' | 'focus';
type EventHandlers = Record<`on${Capitalize<EventNames>}`, (e: Event) => void>;
// 결과: { onClick: (e: Event) => void; onHover: (e: Event) => void; onFocus: (e: Event) => void; }

interface ButtonProps extends EventHandlers {
  children: React.ReactNode;
  disabled?: boolean;
}

// 5. API 엔드포인트 타입 생성
type HttpMethod = 'get' | 'post' | 'put' | 'delete';
type ResourceType = 'user' | 'product' | 'order';
type EndpointPattern = `${HttpMethod}${Capitalize<ResourceType>}`;

const apiEndpoints: Record<EndpointPattern, string> = {
  getUser: '/api/users/:id',
  postUser: '/api/users',
  putUser: '/api/users/:id',
  deleteUser: '/api/users/:id',
  getProduct: '/api/products/:id',
  postProduct: '/api/products',
  putProduct: '/api/products/:id',
  deleteProduct: '/api/products/:id',
  getOrder: '/api/orders/:id',
  postOrder: '/api/orders',
  putOrder: '/api/orders/:id',
  deleteOrder: '/api/orders/:id'
};

// const 제네릭을 활용한 더 정확한 타입 추론
function identity<const T>(arg: T): T {
  return arg;
}

// 리터럴 타입이 그대로 유지됨
const result1 = identity(['apple', 'banana', 'cherry']);
// 타입: readonly ["apple", "banana", "cherry"] (더 구체적)

function createArray<const T extends readonly unknown[]>(...args: T): T {
  return args;
}

const fruits = createArray('apple', 'banana', 'cherry');
// 타입: readonly ["apple", "banana", "cherry"]

// 실무 예제: 상수 객체 타입 추론 개선
const createConfig = <const T extends Record<string, unknown>>(config: T): T => {
  return config;
};

const appConfig = createConfig({
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retries: 3,
  features: {
    darkMode: true,
    notifications: false
  }
} as const);

// appConfig의 모든 속성이 정확한 리터럴 타입으로 추론됨
// appConfig.apiUrl의 타입: "https://api.example.com"
// appConfig.features.darkMode의 타입: true

// 기본 모델 정의
interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
  category: string;
  tags: string[];
  imageUrl: string;
  stock: number;
  isActive: boolean;
  createdAt: Date;
  updatedAt: Date;
}

// API별 특화된 타입들
type ProductListItem = Pick<Product, 'id' | 'name' | 'price' | 'imageUrl' | 'isActive'>;
type ProductDetail = Omit<Product, 'createdAt' | 'updatedAt'>;
type CreateProductRequest = Omit<Product, 'id' | 'createdAt' | 'updatedAt'>;
type UpdateProductRequest = Partial<Omit<Product, 'id' | 'createdAt' | 'updatedAt'>>;

// API 함수들
async function getProducts(): Promise<ProductListItem[]> {
  return api.get('/products');
}

async function getProduct(id: string): Promise<ProductDetail> {
  return api.get(`/products/${id}`);
}

async function createProduct(data: CreateProductRequest): Promise<Product> {
  return api.post('/products', data);
}

async function updateProduct(id: string, data: UpdateProductRequest): Promise<Product> {
  return api.patch(`/products/${id}`, data);
}

// 타입 안전한 사용
const newProduct: CreateProductRequest = {
  name: '새 상품',
  description: '상품 설명',
  price: 10000,
  category: 'electronics',
  tags: ['new', 'featured'],
  imageUrl: '/images/product.jpg',
  stock: 100,
  isActive: true
};

const updateData: UpdateProductRequest = {
  price: 12000,  // 가격만 업데이트
  stock: 50      // 재고만 업데이트
};

// 기본 Button 컴포넌트 Props
interface BaseButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
  size?: 'small' | 'medium' | 'large';
  variant?: 'primary' | 'secondary' | 'outline';
}

// 다양한 버튼 변형들
type SubmitButtonProps = Required<Pick<BaseButtonProps, 'onClick'>> &
                        Omit<BaseButtonProps, 'onClick'> &
                        { type: 'submit' };

type LinkButtonProps = Omit<BaseButtonProps, 'onClick'> & {
  href: string;
  target?: '_blank' | '_self';
};

type IconButtonProps = Pick<BaseButtonProps, 'onClick' | 'disabled' | 'className'> & {
  icon: React.ReactNode;
  'aria-label': string;  // 접근성을 위해 필수
};

// 컴포넌트 구현
const SubmitButton: React.FC<SubmitButtonProps> = (props) => {
  return <button type="submit" {...props}>{props.children}</button>;
};

const LinkButton: React.FC<LinkButtonProps> = ({ href, target, ...props }) => {
  return <a href={href} target={target} {...props}>{props.children}</a>;
};

const IconButton: React.FC<IconButtonProps> = ({ icon, ...props }) => {
  return (
    <button {...props}>
      {icon}
    </button>
  );
};

// 사용 예시
const MyComponent = () => {
  return (
    <div>
      <SubmitButton onClick={() => console.log('submit')} size="large">
        제출
      </SubmitButton>

      <LinkButton href="/about" target="_blank" variant="outline">
        자세히 보기
      </LinkButton>

      <IconButton
        icon={<Icon name="heart" />}
        aria-label="좋아요"
        onClick={() => console.log('like')}
      />
    </div>
  );
};

// 기본 폼 데이터 타입
interface UserRegistrationForm {
  email: string;
  password: string;
  confirmPassword: string;
  firstName: string;
  lastName: string;
  birthDate: Date;
  phoneNumber: string;
  agreeToTerms: boolean;
  subscribeNewsletter: boolean;
}

// 폼 상태 관리 타입들
type FormValues<T> = Record<keyof T, T[keyof T]>;
type FormErrors<T> = Partial<Record<keyof T, string>>;
type FormTouched<T> = Partial<Record<keyof T, boolean>>;

interface FormState<T> {
  values: Partial<T>;
  errors: FormErrors<T>;
  touched: FormTouched<T>;
  isSubmitting: boolean;
  isValid: boolean;
}

// 폼 훅 구현
function useForm<T extends Record<string, any>>(
  initialValues: Partial<T>,
  validationRules?: Partial<Record<keyof T, (value: any) => string | undefined>>
) {
  const [state, setState] = useState<FormState<T>>({
    values: initialValues,
    errors: {},
    touched: {},
    isSubmitting: false,
    isValid: false
  });

  const setValue = useCallback(<K extends keyof T>(field: K, value: T[K]) => {
    setState(prev => ({
      ...prev,
      values: { ...prev.values, [field]: value },
      touched: { ...prev.touched, [field]: true }
    }));
  }, []);

  const setError = useCallback(<K extends keyof T>(field: K, error: string) => {
    setState(prev => ({
      ...prev,
      errors: { ...prev.errors, [field]: error }
    }));
  }, []);

  const validate = useCallback(() => {
    if (!validationRules) return true;

    const errors: FormErrors<T> = {};
    let isValid = true;

    (Object.keys(validationRules) as (keyof T)[]).forEach(field => {
      const validator = validationRules[field];
      if (validator) {
        const error = validator(state.values[field]);
        if (error) {
          errors[field] = error;
          isValid = false;
        }
      }
    });

    setState(prev => ({ ...prev, errors, isValid }));
    return isValid;
  }, [state.values, validationRules]);

  return { ...state, setValue, setError, validate };
}

// 사용 예시
const RegistrationForm: React.FC = () => {
  const form = useForm<UserRegistrationForm>(
    {
      email: '',
      password: '',
      confirmPassword: '',
      firstName: '',
      lastName: '',
      agreeToTerms: false,
      subscribeNewsletter: false
    },
    {
      email: (value) => !value ? '이메일은 필수입니다' :
              !/\S+@\S+\.\S+/.test(value) ? '올바른 이메일 형식이 아닙니다' : undefined,
      password: (value) => !value ? '비밀번호는 필수입니다' :
                value.length < 8 ? '비밀번호는 8자 이상이어야 합니다' : undefined,
      firstName: (value) => !value ? '이름은 필수입니다' : undefined,
      lastName: (value) => !value ? '성은 필수입니다' : undefined
    }
  );

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (form.validate()) {
      console.log('폼 제출:', form.values);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={form.values.email || ''}
        onChange={(e) => form.setValue('email', e.target.value)}
      />
      {form.errors.email && <span className="error">{form.errors.email}</span>}

      {/* 다른 필드들... */}

      <button type="submit" disabled={!form.isValid}>
        회원가입
      </button>
    </form>
  );
};

// 깊은 부분 업데이트를 위한 유틸리티 타입
type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

// 중첩 객체 예시
interface NestedConfig {
  database: {
    host: string;
    port: number;
    credentials: {
      username: string;
      password: string;
    };
  };
  api: {
    baseUrl: string;
    timeout: number;
    retries: number;
  };
}

// 깊은 부분 업데이트 가능
const updateConfig = (updates: DeepPartial<NestedConfig>) => {
  // updates.database?.credentials?.username 같은 깊은 속성도 선택적으로 업데이트 가능
};

// 사용 예시
updateConfig({
  database: {
    credentials: {
      password: 'newPassword'  // 다른 속성들은 유지하고 패스워드만 업데이트
    }
  }
});

// 특정 타입의 속성만 필터링하는 유틸리티
type PickByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K];
};

// 문자열 속성만 추출
type StringProperties = PickByType<User, string>;
// 결과: { name: string; email: string; }

// 날짜 속성만 추출
type DateProperties = PickByType<User, Date>;
// 결과: { createdAt: Date; updatedAt: Date; }

// 함수 속성을 가진 객체에서 함수만 추출
interface ApiClient {
  baseUrl: string;
  timeout: number;
  get: (url: string) => Promise<any>;
  post: (url: string, data: any) => Promise<any>;
  delete: (url: string) => Promise<any>;
}

type ApiMethods = PickByType<ApiClient, Function>;
// 결과: { get: Function; post: Function; delete: Function; }

// 이벤트 핸들러 타입 생성
type EventHandlerPrefix = 'on';
type EventNames = 'click' | 'hover' | 'focus' | 'blur';
type EventHandlers = Record<`${EventHandlerPrefix}${Capitalize<EventNames>}`, () => void>;

// 결과: { onClick: () => void; onHover: () => void; onFocus: () => void; onBlur: () => void; }

// API 엔드포인트 타입 생성
type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type ResourceName = 'users' | 'products' | 'orders';
type ApiEndpoint = `/${ResourceName}` | `/${ResourceName}/:id`;

const endpoints: Record<`${HttpMethod} ${ApiEndpoint}`, string> = {
  'GET /users': 'https://api.example.com/users',
  'POST /users': 'https://api.example.com/users',
  'PUT /users/:id': 'https://api.example.com/users/:id',
  'DELETE /users/:id': 'https://api.example.com/users/:id',
  // ... 다른 리소스들
};

// 잘못된 예시 - 너무 복잡한 중첩
type OverComplicated<T> = Partial<Required<Pick<Omit<T, 'id'>, 'name' | 'email'>>>;

// 올바른 예시 - 단계적으로 분해
type WithoutId<T> = Omit<T, 'id'>;
type OnlyNameAndEmail<T> = Pick<T, 'name' | 'email'>;
type RequiredNameAndEmail<T> = Required<OnlyNameAndEmail<T>>;
type UserForm = RequiredNameAndEmail<WithoutId<User>>;

// 잘못된 예시 - 키 타입이 너무 넓음
type BadRecord = Record<string, any>; // 모든 문자열 키 허용

// 올바른 예시 - 구체적인 키 타입 정의
type GoodRecord = Record<'admin' | 'user' | 'guest', string[]>;

// 또는 더 안전한 방법
interface SafeRecord {
  admin: string[];
  user: string[];
  guest: string[];
}

// 잘못된 예시 - 의도와 다른 타입 생성
interface Config {
  host: string;
  port?: number;
  debug?: boolean;
}

// 모든 속성이 필수가 되어버림
type BadRequiredConfig = Required<Config>; // { host: string; port: number; debug: boolean; }

// 올바른 예시 - 일부 속성만 필수로
type GoodRequiredConfig = Required<Pick<Config, 'host' | 'port'>> & Pick<Config, 'debug'>;
// 결과: { host: string; port: number; debug?: boolean; }

// 복잡한 타입은 단계적으로 분해
interface ComplexEntity {
  id: string;
  data: {
    personal: {
      name: string;
      age: number;
      contacts: {
        email: string;
        phone: string;
      };
    };
    professional: {
      company: string;
      position: string;
      skills: string[];
    };
  };
  meta: {
    createdAt: Date;
    updatedAt: Date;
    version: number;
  };
}

// 단계별 타입 추출로 성능 최적화
type PersonalInfo = ComplexEntity['data']['personal'];
type ContactInfo = PersonalInfo['contacts'];
type ProfessionalInfo = ComplexEntity['data']['professional'];
type MetaInfo = ComplexEntity['meta'];

// 필요한 부분만 추출하는 효율적인 타입
type ProfileUpdate = Pick<PersonalInfo, 'name'> &
                     Partial<Pick<ProfessionalInfo, 'position' | 'skills'>>;

// 공통 유틸리티 타입 모듈
export namespace TypeUtils {
  export type Timestamps = {
    createdAt: Date;
    updatedAt: Date;
  };

  export type WithId<T> = T & { id: string };
  export type WithTimestamps<T> = T & Timestamps;
  export type Entity<T> = WithId<WithTimestamps<T>>;

  export type CreateRequest<T> = Omit<T, 'id' | 'createdAt' | 'updatedAt'>;
  export type UpdateRequest<T> = Partial<Omit<T, 'id' | 'createdAt' | 'updatedAt'>>;

  export type ApiResponse<T> = {
    success: boolean;
    data: T;
    message?: string;
  };
}

// 사용 예시
type User = TypeUtils.Entity<{
  name: string;
  email: string;
  role: 'admin' | 'user';
}>;

type CreateUserRequest = TypeUtils.CreateRequest<User>;
type UpdateUserRequest = TypeUtils.UpdateRequest<User>;
type UserListResponse = TypeUtils.ApiResponse<User[]>;

// Redux/Zustand 스토어 타입 최적화
interface AppState {
  user: {
    profile: User;
    preferences: UserPreferences;
    notifications: Notification[];
  };
  products: {
    list: Product[];
    filters: ProductFilters;
    cart: CartItem[];
  };
  ui: {
    theme: 'light' | 'dark';
    sidebarOpen: boolean;
    loading: Record<string, boolean>;
  };
}

// 특정 스토어 슬라이스만 추출
type UserSlice = Pick<AppState, 'user'>;
type ProductSlice = Pick<AppState, 'products'>;

// 액션 타입 생성
type SetUserProfile = {
  type: 'SET_USER_PROFILE';
  payload: Partial<User>;
};

type UpdatePreferences = {
  type: 'UPDATE_PREFERENCES';
  payload: Partial<UserPreferences>;
};

// 모든 액션 유니온 타입
type UserActions = SetUserProfile | UpdatePreferences;

// API 스키마 기반 타입 생성
interface ApiEndpoints {
  'GET /users': {
    response: User[];
  };
  'GET /users/:id': {
    params: { id: string };
    response: User;
  };
  'POST /users': {
    body: CreateUserRequest;
    response: User;
  };
  'PATCH /users/:id': {
    params: { id: string };
    body: UpdateUserRequest;
    response: User;
  };
}

// 자동 클라이언트 생성
type ApiClient = {
  [K in keyof ApiEndpoints]: ApiEndpoints[K] extends { params: infer P; body: infer B; response: infer R }
    ? (params: P, body: B) => Promise<R>
    : ApiEndpoints[K] extends { params: infer P; response: infer R }
    ? (params: P) => Promise<R>
    : ApiEndpoints[K] extends { body: infer B; response: infer R }
    ? (body: B) => Promise<R>
    : ApiEndpoints[K] extends { response: infer R }
    ? () => Promise<R>
    : never;
};

// 타입 안전한 API 호출
declare const client: ApiClient;

const users = await client['GET /users']();  // User[] 반환
const user = await client['GET /users/:id']({ id: '123' });  // User 반환
const newUser = await client['POST /users']({
  name: 'John',
  email: 'john@example.com',
  password: 'password123'
});  // User 반환