TypeScript 유틸리티 타입 마스터하기: 글로벌 개발자를 위한 실용 가이드

TypeScript는 코드의 타입 안전성, 가독성, 유지보수성을 크게 향상시킬 수 있는 강력한 내장 유틸리티 타입 세트를 제공합니다. 이 유틸리티 타입들은 본질적으로 기존 타입에 적용할 수 있는 미리 정의된 타입 변환이며, 반복적이고 오류가 발생하기 쉬운 코드를 작성하는 수고를 덜어줍니다. 이 가이드는 전 세계 개발자들에게 공감을 얻을 수 있는 실제적인 예시와 함께 다양한 유틸리티 타입을 탐구할 것입니다.

유틸리티 타입을 사용하는 이유?

유틸리티 타입은 일반적인 타입 조작 시나리오를 해결합니다. 이를 활용하여 다음을 수행할 수 있습니다:

• 상용구 코드 감소: 반복적인 타입 정의 작성을 피하세요.
• 타입 안전성 향상: 코드가 타입 제약을 준수하는지 확인하세요.
• 코드 가독성 향상: 타입 정의를 더 간결하고 이해하기 쉽게 만드세요.
• 유지보수성 증대: 수정을 단순화하고 오류 발생 위험을 줄이세요.

핵심 유틸리티 타입

Partial<T>

Partial<T>는 T의 모든 속성이 선택 사항으로 설정된 타입을 구성합니다. 이는 부분 업데이트 또는 구성 객체를 위한 타입을 생성할 때 특히 유용합니다.

예시:

다양한 지역의 고객을 대상으로 하는 전자상거래 플랫폼을 구축한다고 상상해 보세요. Customer 타입은 다음과 같습니다:

interface Customer {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
  phoneNumber: string;
  address: {
    street: string;
    city: string;
    country: string;
    postalCode: string;
  };
  preferences?: {
    language: string;
    currency: string;
  }
}

고객 정보를 업데이트할 때 모든 필드를 필수로 지정하고 싶지 않을 수 있습니다. Partial<Customer>를 사용하면 Customer의 모든 속성이 선택 사항인 타입을 정의할 수 있습니다:

type PartialCustomer = Partial<Customer>;

function updateCustomer(id: string, updates: PartialCustomer): void {
  // ... implementation to update the customer with the given ID
}

updateCustomer("123", { firstName: "John", lastName: "Doe" }); // Valid
updateCustomer("456", { address: { city: "London" } }); // Valid

Readonly<T>

Readonly<T>는 T의 모든 속성이 readonly로 설정되어 초기화 후 수정할 수 없도록 하는 타입을 구성합니다. 이는 불변성을 보장하는 데 유용합니다.

예시:

전역 애플리케이션의 구성 객체를 생각해 보세요:

interface AppConfig {
  apiUrl: string;
  theme: string;
  supportedLanguages: string[];
  version: string; // Added version
}

const config: AppConfig = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  supportedLanguages: ["en", "fr", "de", "es", "zh"],
  version: "1.0.0"
};

초기화 후 구성이 실수로 수정되는 것을 방지하려면 Readonly<AppConfig>를 사용할 수 있습니다:

type ReadonlyAppConfig = Readonly<AppConfig>;

const readonlyConfig: ReadonlyAppConfig = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  supportedLanguages: ["en", "fr", "de", "es", "zh"],
  version: "1.0.0"
};

// readonlyConfig.apiUrl = "https://newapi.example.com"; // Error: Cannot assign to 'apiUrl' because it is a read-only property.

Pick<T, K>

Pick<T, K>는 T에서 속성 집합 K를 선택하여 타입을 구성합니다. 여기서 K는 포함하려는 속성 이름을 나타내는 문자열 리터럴 타입의 유니온입니다.

예시:

다양한 속성을 가진 Event 인터페이스가 있다고 가정해 봅시다:

interface Event {
  id: string;
  title: string;
  description: string;
  location: string;
  startTime: Date;
  endTime: Date;
  organizer: string;
  attendees: string[];
}

특정 표시 구성 요소에 대해 title, location, startTime만 필요한 경우 Pick을 사용할 수 있습니다:

type EventSummary = Pick<Event, "title" | "location" | "startTime">;

function displayEventSummary(event: EventSummary): void {
  console.log(`Event: ${event.title} at ${event.location} on ${event.startTime}`);
}

Omit<T, K>

Omit<T, K>는 T에서 속성 집합 K를 제외하여 타입을 구성합니다. 여기서 K는 제외하려는 속성 이름을 나타내는 문자열 리터럴 타입의 유니온입니다. 이는 Pick의 반대입니다.

예시:

동일한 Event 인터페이스를 사용하여 새 이벤트를 생성하기 위한 타입을 만들려면 일반적으로 백엔드에서 생성되는 id 속성을 제외할 수 있습니다:

type NewEvent = Omit<Event, "id">;

function createEvent(event: NewEvent): void {
  // ... implementation to create a new event
}

Record<K, T>

Record<K, T>는 속성 키가 K이고 속성 값이 T인 객체 타입을 구성합니다. K는 문자열 리터럴 타입, 숫자 리터럴 타입 또는 심볼의 유니온일 수 있습니다. 이는 사전 또는 맵을 생성하는 데 적합합니다.

예시:

애플리케이션의 사용자 인터페이스에 대한 번역을 저장해야 한다고 상상해 보세요. Record를 사용하여 번역을 위한 타입을 정의할 수 있습니다:

type Translations = Record<string, string>;

const enTranslations: Translations = {
  "hello": "Hello",
  "goodbye": "Goodbye",
  "welcome": "Welcome to our platform!"
};

const frTranslations: Translations = {
  "hello": "Bonjour",
  "goodbye": "Au revoir",
  "welcome": "Bienvenue sur notre plateforme !"
};

function translate(key: string, language: string): string {
  const translations = language === "en" ? enTranslations : frTranslations; //Simplified
  return translations[key] || key; // Fallback to the key if no translation is found
}

console.log(translate("hello", "en")); // Output: Hello
console.log(translate("hello", "fr")); // Output: Bonjour
console.log(translate("nonexistent", "en")); // Output: nonexistent

Exclude<T, U>

Exclude<T, U>는 T에서 U에 할당 가능한 모든 유니온 멤버를 제외하여 타입을 구성합니다. 이는 유니온에서 특정 타입을 필터링하는 데 유용합니다.

예시:

다양한 이벤트 유형을 나타내는 타입이 있을 수 있습니다:

type EventType = "concert" | "conference" | "workshop" | "webinar";

"webinar" 이벤트를 제외하는 타입을 만들려면 Exclude를 사용할 수 있습니다:

type PhysicalEvent = Exclude<EventType, "webinar">;

// PhysicalEvent is now "concert" | "conference" | "workshop"

function attendPhysicalEvent(event: PhysicalEvent): void {
  console.log(`Attending a ${event}`);
}

// attendPhysicalEvent("webinar"); // Error: Argument of type '"webinar"' is not assignable to parameter of type '"concert" | "conference" | "workshop"'.

attendPhysicalEvent("concert"); // Valid

Extract<T, U>

Extract<T, U>는 T에서 U에 할당 가능한 모든 유니온 멤버를 추출하여 타입을 구성합니다. 이는 Exclude의 반대입니다.

예시:

동일한 EventType을 사용하여 웨비나 이벤트 타입을 추출할 수 있습니다:

type OnlineEvent = Extract<EventType, "webinar">;

// OnlineEvent is now "webinar"

function attendOnlineEvent(event: OnlineEvent): void {
  console.log(`Attending a ${event} online`);
}

attendOnlineEvent("webinar"); // Valid
// attendOnlineEvent("concert"); // Error: Argument of type '"concert"' is not assignable to parameter of type '"webinar"'.

NonNullable<T>

NonNullable<T>는 T에서 null과 undefined를 제외하여 타입을 구성합니다.

예시:

type MaybeString = string | null | undefined;

type DefinitelyString = NonNullable<MaybeString>;

// DefinitelyString is now string

function processString(str: DefinitelyString): void {
  console.log(str.toUpperCase());
}

// processString(null); // Error: Argument of type 'null' is not assignable to parameter of type 'string'.
// processString(undefined); // Error: Argument of type 'undefined' is not assignable to parameter of type 'string'.
processString("hello"); // Valid

ReturnType<T>

ReturnType<T>는 함수 T의 반환 타입으로 구성된 타입을 구성합니다.

예시:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

type Greeting = ReturnType<typeof greet>;

// Greeting is now string

const message: Greeting = greet("World");

console.log(message);

Parameters<T>

Parameters<T>는 함수 타입 T의 매개변수 타입으로부터 튜플 타입을 구성합니다.

예시:

function logEvent(eventName: string, eventData: object): void {
  console.log(`Event: ${eventName}`, eventData);
}

type LogEventParams = Parameters<typeof logEvent>;

// LogEventParams is now [eventName: string, eventData: object]

const params: LogEventParams = ["user_login", { userId: "123", timestamp: Date.now() }];

logEvent(...params);

ConstructorParameters<T>

ConstructorParameters<T>는 생성자 함수 타입 T의 매개변수 타입으로부터 튜플 또는 배열 타입을 구성합니다. 이는 클래스의 생성자에 전달되어야 하는 인수의 타입을 추론합니다.

예시:

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return "Hello, " + this.greeting;
  }
}


type GreeterParams = ConstructorParameters<typeof Greeter>;

// GreeterParams is now [message: string]

const paramsGreeter: GreeterParams = ["World"];
const greeterInstance = new Greeter(...paramsGreeter);

console.log(greeterInstance.greet()); // Outputs: Hello, World

Required<T>

Required<T>는 T의 모든 속성이 필수로 설정된 타입을 구성합니다. 이는 모든 선택적 속성을 필수로 만듭니다.

예시:

interface UserProfile {
  name: string;
  age?: number;
  email?: string;
}

type RequiredUserProfile = Required<UserProfile>;

// RequiredUserProfile is now { name: string; age: number; email: string; }

const completeProfile: RequiredUserProfile = {
  name: "Alice",
  age: 30,
  email: "alice@example.com"
};

// const incompleteProfile: RequiredUserProfile = { name: "Bob" }; // Error: Property 'age' is missing in type '{ name: string; }' but required in type 'Required'.

고급 유틸리티 타입

템플릿 리터럴 타입

템플릿 리터럴 타입은 기존 문자열 리터럴 타입, 숫자 리터럴 타입 등을 연결하여 새로운 문자열 리터럴 타입을 구성할 수 있도록 합니다. 이는 강력한 문자열 기반 타입 조작을 가능하게 합니다.

예시:

type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type APIEndpoint = `/api/users` | `/api/products`;

type RequestURL = `${HTTPMethod} ${APIEndpoint}`;

// RequestURL is now "GET /api/users" | "POST /api/users" | "PUT /api/users" | "DELETE /api/users" | "GET /api/products" | "POST /api/products" | "PUT /api/products" | "DELETE /api/products"

function makeRequest(url: RequestURL): void {
  console.log(`Making request to ${url}`);
}

makeRequest("GET /api/users"); // Valid
// makeRequest("INVALID /api/users"); // Error

조건부 타입

조건부 타입은 타입 관계를 나타내는 조건에 따라 타입을 정의할 수 있도록 합니다. infer 키워드를 사용하여 타입 정보를 추출합니다.

예시:

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

// If T is a Promise, then the type is U; otherwise, the type is T.

async function fetchData(): Promise<number> {
  return 42;
}


type Data = UnwrapPromise<ReturnType<typeof fetchData>>;

// Data is now number

function processData(data: Data): void {
  console.log(data * 2);
}

processData(await fetchData());

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
  country: string; // Required
  city?: string; // Optional
  postalCode?: string;
  newsletterSubscription?: boolean;
}

// Initial form values (optional fields)
type InitialFormValues = Partial<FormData>;

// Updated form values (some fields might be missing)
type UpdatedFormValues = Partial<FormData>;

// Required fields for submission
type RequiredForSubmission = Required<Pick<FormData, 'firstName' | 'lastName' | 'email' | 'country'>>;

// Use these types in your form components
function initializeForm(initialValues: InitialFormValues): void { }
function updateForm(updates: UpdatedFormValues): void {}
function submitForm(data: RequiredForSubmission): void {}


const initialForm: InitialFormValues = { newsletterSubscription: true };

const updateFormValues: UpdatedFormValues = {
    firstName: "John",
    lastName: "Doe"
};

// const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test" }; // ERROR: Missing 'country' 
const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test", country: "USA" }; //OK

interface APIResponse {
  user_id: string;
  first_name: string;
  last_name: string;
  email_address: string;
  profile_picture_url: string;
  is_active: boolean;
}

// Transform the API response to a more readable format
type UserData = {
  id: string;
  fullName: string;
  email: string;
  avatar: string;
  active: boolean;
};

function transformApiResponse(response: APIResponse): UserData {
  return {
    id: response.user_id,
    fullName: `${response.first_name} ${response.last_name}`,
    email: response.email_address,
    avatar: response.profile_picture_url,
    active: response.is_active
  };
}

function fetchAndTransformData(url: string): Promise<UserData> {
    return fetch(url)
        .then(response => response.json())
        .then(data => transformApiResponse(data));
}


// You can even enforce the type by:

function saferTransformApiResponse(response: APIResponse): UserData {
    const {user_id, first_name, last_name, email_address, profile_picture_url, is_active} = response;
    const transformed: UserData = {
        id: user_id,
        fullName: `${first_name} ${last_name}`,
        email: email_address,
        avatar: profile_picture_url,
        active: is_active
    };

    return transformed;
}

interface AppSettings {
  theme: "light" | "dark";
  language: string;
  notificationsEnabled: boolean;
  apiUrl?: string; // Optional API URL for different environments
  timeout?: number;  //Optional
}

// Default settings
const defaultSettings: AppSettings = {
  theme: "light",
  language: "en",
  notificationsEnabled: true
};

// Function to merge user settings with default settings
function mergeSettings(userSettings: Partial<AppSettings>): AppSettings {
  return { ...defaultSettings, ...userSettings };
}

// Use the merged settings in your application
const mergedSettings = mergeSettings({ theme: "dark", apiUrl: "https://customapi.example.com" });
console.log(mergedSettings);