[타입스크립트(TypeScript)] 제네릭(Generic)

// 제네릭, Generic

- 함수, 클래스, 배열 등을 다양한 타입으로 재사용할 수 있게 해주는 기능

- 타입 안전성이 높고, 재사용성과 유지보수성이 뛰어나다.

---

// 제네릭 함수 생성

function identity<T, U>(매개변수1: T, 매개변수2: U) {
    //처리
}

 

- T나 U 타입의 인자를 받게 된다.

function identity<T extends 타입, U extends 타입2>(매개변수1: T, 매개변수2: U) {
    //처리
}

 

- extends를 사용하여 제약 조건을 추가할 수 있다.

---

function extractAndConvert<T extends object, U extends keyof T>(
  obj: T,
  key: U,
) {
  return 'Value: ' + obj[key];
}

extractAndConvert({ name: 'Hana' }, 'name');

---

// 제네릭 클래스 생성

class 클래스명<T> {
  제어자 property명: T;
}

---

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

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

  removeItem(item: T) {
    if (this.data.indexOf(item) === -1) {
      return;
    }
    this.data.splice(this.data.indexOf(item), 1);
  }

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

const textStorage = new DataStorage<string>();
textStorage.addItem('Hana');
textStorage.addItem('Mana');
textStorage.removeItem('Mana');

---

※ 제네릭 유틸리티 타입 참고: https://www.typescriptlang.org/docs/handbook/utility-types.html

Documentation - Utility Types

---

※ Generic vs Union

- 생성한 클래스 인스턴스 전체 혹은 함수 전체에서 같은 타입을 사용하면 Generic

- 생성한 클래스 인스턴스 혹은 함수에서 여러 개의 다른 타입을 사용하는 유연성이 필요하다면 Union