[typescript] 유니온 타입과 제네릭을 함께 사용하여 다중 타입을 처리하는 방법을 알려주세요.

18 Dec 2023

typescript

유니온 타입과 제네릭을 함께 사용하여 다중 타입을 처리할 수 있습니다. 이를 통해 동적인 데이터를 타입 안전하게 처리할 수 있으며, 코드의 재사용성과 가독성을 향상시킬 수 있습니다.

유니온 타입

유니온 타입은 두 개 이상의 타입을 하나의 타입으로 결합하는 TypeScript의 기능입니다. 예를 들어, number와 string 타입을 갖는 변수를 선언하기 위해서는 유니온 타입을 활용할 수 있습니다.

let value: number | string;
value = 10; // 유효
value = "hello"; // 유효
value = true; // 오류: 'boolean' 타입은 'number' 또는 'string' 타입에 할당될 수 없습니다.

제네릭

제네릭은 타입이 고정되지 않고 동적으로 결정될 수 있는 타입을 다룰 때 사용됩니다. 함수나 클래스를 작성할 때 컴파일 시점에 특정 타입을 바인딩하지 않고 재사용 가능하도록 합니다.

function identity<T>(arg: T): T {
    return arg;
}

// 호출 방법
let output = identity<string>("hello"); // 'output'의 타입은 'string'입니다.

유니온 타입과 제네릭 함께 사용하기

유니온 타입과 제네릭을 함께 사용하여 다중 타입을 처리하는 예시를 보겠습니다.

type Result<T> = Success<T> | Failure;

type Success<T> = {
  success: true;
  value: T;
};

type Failure = {
  success: false;
  message: string;
};

function handleResult<T>(result: Result<T>): T | void {
  if (result.success) {
    return result.value;
  } else {
    console.error(result.message);
  }
}

// 사용법
const successResult: Result<number> = { success: true, value: 42 };
const failureResult: Result<number> = { success: false, message: "Something went wrong" };

handleResult(successResult); // 반환값: 42
handleResult(failureResult); // 콘솔에 에러 메시지 출력

위 예시에서, Result 타입은 Success나 Failure 중 하나를 나타내며, handleResult 함수를 통해 해당 결과를 처리합니다.

유니온 타입과 제네릭을 함께 사용하여 복잡한 다중 타입을 처리하고, 타입 안전성과 코드 가독성을 높일 수 있습니다.

이처럼, TypeScript에서 유니온 타입과 제네릭을 함께 사용하여 다양한 상황에서 유연하고 안전한 코드를 작성할 수 있습니다.

자료 출처: