[typescript] 제네릭 타입(generic type)을 사용한 재사용 가능한 코드 작성

20 Dec 2023

typescript

제네릭 함수 작성하기

제네릭을 사용하여 여러 타입에서 동작하는 함수를 작성할 수 있습니다. 예를 들어, 배열을 입력으로 받아 첫 번째 요소를 반환하는 함수를 작성해보겠습니다.

function getFirstElement<T>(arr: T[]): T {
  return arr[0];
}

const str = getFirstElement(["a", "b", "c"]); // str의 타입은 string
const num = getFirstElement([1, 2, 3]); // num의 타입은 number

위의 예제에서 T는 제네릭 타입 매개변수로, 호출될 때 실제 타입으로 대체됩니다.

제네릭 클래스 작성하기

제네릭을 사용하여 여러 타입에서 동작하는 클래스를 작성할 수도 있습니다. 예를 들어, 컨테이너 클래스를 작성해보겠습니다.

class Container<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

const numberContainer = new Container(5); // 숫자를 저장하는 컨테이너
const stringContainer = new Container("Hello"); // 문자열을 저장하는 컨테이너

위의 예제에서 Container 클래스는 T 타입의 값을 저장하고 반환하는 메서드를 가지고 있습니다.

제네릭 인터페이스 작성하기

제네릭을 사용하여 여러 타입에서 동작하는 인터페이스를 작성할 수 있습니다. 예를 들어, 맵 형식의 데이터를 다루는 인터페이스를 작성해보겠습니다.

interface KeyValue<T> {
  key: string;
  value: T;
}

const numberPair: KeyValue<number> = { key: "age", value: 25 }; // 숫자 값을 가지는 키-값 쌍
const stringPair: KeyValue<string> = { key: "name", value: "John" }; // 문자열 값을 가지는 키-값 쌍

위의 예제에서 KeyValue 인터페이스는 제네릭 타입 T를 갖는 key와 value 속성을 정의합니다.

제네릭을 사용하여 코드의 재사용성을 높일 수 있고, 타입 안정성을 확보할 수 있습니다. 이를 통해 유연하고 안정적인 코드를 작성할 수 있습니다.