[typescript] 타입스크립트의 제네릭(Generic)을 활용한 코드 재사용 방법

08 Dec 2023

typescript

제네릭은 타입스크립트에서 타입 파라미터(Type parameter)를 사용하여 함수, 클래스, 인터페이스에 여러 타입을 적용할 수 있게 해주는 강력한 기능입니다. 제네릭을 활용하면 코드를 재사용하고 타입 안정성을 확보할 수 있습니다.

제네릭의 기본 개념

보통 함수나 클래스를 선언할 때, 파라미터와 반환 타입을 정확히 명시합니다. 그러나 특정한 타입에 의존하지 않고 여러 종류의 타입을 지원하고 싶을 때 제네릭을 사용합니다. 이를 통해 유연한 코드 작성이 가능합니다.

제네릭 함수 예제

function printArray<T>(arr: T[]): void {
  for (let element of arr) {
    console.log(element);
  }
}

// 숫자 배열 출력
printArray<number>([1, 2, 3, 4, 5]);

// 문자열 배열 출력
printArray<string>(['a', 'b', 'c']);

위 예제에서 printArray함수는 제네릭을 활용하여 다양한 타입의 배열을 입력으로 받을 수 있습니다.

제네릭 클래스 예제

class DataStorage<T> {
  private data: T[] = [];

  addItem(item: T): void {
    this.data.push(item);
  }

  removeItem(item: T): void {
    this.data = this.data.filter((i) => i !== item);
  }

  getItems(): T[] {
    return this.data;
  }
}

// 숫자 저장소
const numberStorage = new DataStorage<number>();
numberStorage.addItem(1);
numberStorage.addItem(2);
console.log(numberStorage.getItems()); // [1, 2]

// 문자열 저장소
const stringStorage = new DataStorage<string>();
stringStorage.addItem('hello');
stringStorage.addItem('world');
console.log(stringStorage.getItems()); // ['hello', 'world']

위의 예제는 DataStorage 클래스를 제네릭으로 정의하여, 다양한 타입의 데이터를 저장할 수 있도록 합니다.

제네릭을 활용하면 코드의 재사용성이 높아지고 유지보수가 수월해집니다. 타입스크립트에서 제네릭을 적절히 활용하여 더욱 안정적이고 유연한 코드를 작성할 수 있습니다.

참고 자료

타입스크립트 공식 문서 - 제네릭