TypeScript 고급 타입: 템플릿 리터럴 및 조건부 타입 마스터하기

국제 예시: 다양한 날짜 형식 처리

세계의 다른 지역에서는 다른 날짜 형식을 사용합니다. 조건부 타입을 사용하여 이러한 변형을 처리할 수 있습니다.

type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";

type ParseDate = T extends "YYYY-MM-DD"
  ? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
  : T extends "MM/DD/YYYY"
  ? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
  : T extends "DD.MM.YYYY"
  ? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
  : never;


function parseDate(dateString: string, format: T): ParseDate {
  // (구현은 다른 날짜 형식을 처리합니다)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate;
  } else {
    throw new Error("잘못된 날짜 형식");
  }
}

const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // 타입: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // 타입: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // 타입: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // 거기에 있을 것이라는 것을 알고 연도에 액세스

이 예제는 조건부 타입을 사용하여 지정된 날짜 형식을 기반으로 다른 날짜 구문 분석 함수를 정의합니다. ParseDate 타입은 반환된 객체가 형식에 따라 올바른 속성을 갖도록 합니다.

템플릿 리터럴과 조건부 타입 결합

진정한 힘은 템플릿 리터럴 타입과 조건부 타입을 결합할 때 나타납니다. 이를 통해 매우 강력한 타입 조작이 가능합니다.

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName
  ? { type: T; payload: any }  // 시연용 단순화
  : never;

type ClickEvent = EventName<"click">;  // "onClick"
type MouseOverEvent = EventName<"mouseOver">;  // "onMouseOver"


// 타입을 사용하는 예시 함수
function processEvent(event: T): ExtractEventPayload {
    // 실제 구현에서는 실제로 이벤트를 보냅니다.
    console.log(`이벤트 처리 ${event}`);

    // 실제 구현에서는 페이로드가 이벤트 타입을 기반으로 합니다.
    return { type: event, payload: {} } as ExtractEventPayload;
}

// 반환 타입이 매우 구체적입니다:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

// 다른 문자열을 사용하면 never가 표시됩니다.
// const someOtherEvent = processEvent("someOtherEvent"); // 타입은 `never`입니다.

모범 사례 및 고려 사항

• 단순하게 유지: 강력하지만 이러한 고급 타입은 빠르게 복잡해질 수 있습니다. 명확성과 유지 관리성을 위해 노력하십시오.
• 철저하게 테스트: 포괄적인 단위 테스트를 작성하여 타입 정의가 예상대로 작동하는지 확인합니다.
• 코드 문서화: 코드 가독성을 향상시키기 위해 고급 타입의 목적과 동작을 명확하게 문서화합니다.
• 성능 고려: 고급 타입을 과도하게 사용하면 컴파일 시간에 영향을 미칠 수 있습니다. 코드를 프로파일링하고 필요한 경우 최적화합니다.