우선 이 글은 아래 블로그를 토대로 하였음을 밝힙니다.
좋은 글 써주신 DailyEngineer님 감사합니다.
https://hyunseob.github.io/2017/01/14/typescript-generic/

🌸 문제의 코드

function getFirst<T extends Stack<U>, U>(container: T): U {
  const item = container.pop();
  container.push(item);
  return item;
}

• 타입스크립트를 쓰다보면 만나는 꺽쇠
• 너무 궁금해서 검색해보게 되었다.
• 첫번째로 찾은 블로그가 제네릭의 의의와 예제를 잘 설명해주었다.
• 까먹기 전에 다시 한번 정리할 겸 글을 쓴다.

☘️ 제네릭의 의의

• 타입스크립트는 자바스크립트와 달리 타입을 강제하고 컴파일 단계에서 이를 검사할 수 있다.
• 그러나 가끔은 일반적인 string이나 number라고 타입을 지정하기 애매한 경우가 있다.
• 예를 들어 Array에 문자열과 정수형 변수 모두를 받고 싶을 수 있다.
• 그런데 'a'와 1 처럼 다른 자료형의 인자를 섞어 받고 싶지 않을 때는 어떻게 해야할까?
• any 형으로 받아도 좋지만, 그러면 둘 모두를 받게 되지 둘 중 하나로만 필터링해서 받는 것은 불가능하다.
• 또한 any로 하면 vscode와 같은 에디터에서 자동완성 기능을 통한 method 미리보기가 불가능하다.
• 그래서 이럴 때 제네릭을 사용한다.
• 글로만 읽어서는 이해가 힘들기 때문에 DailyEngineer님의 블로그에 있는 예제를 같이 살펴보자

🌷 예제 코드

class Stack<T> {
  private data: T[] = [];
  constructor() {}

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

  pop(): T {
    return this.data.pop();
  }
}

const numberStack = new Stack<number>();
const stringStack = new Stack<string>();
numberStack.push(1);
stringStack.push('a');

• 이렇게 코드를 쓰면 이제 각 인스턴스는 같은 타입만 저장하고 리턴한다.
• 여기서 T는 작성자가 임의로 지정할 수 있는 변수명이다.
• 다만 컨벤션에 따라 Type variables의 첫 글자를 딴 T를 사용하면 더 좋을 것 같다.
• T,U,V,W,X,Y,Z T를 쓴 이후에는 알파벳 순서에 맞춰 그 다음 것들을 쓰면 된다.
• 이는 마치 수학에서 i, j, z 를 쓰는 것과 같다.

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

first<number>([1, 2, 3]); // 함수에서 사용하는 방법


function toPair<T, U>(a: T, b: U): [ T, U ] {
  return [ a, b ];
}; // 두 가지 변수를 사용하는 방법


function getFirst<T extends Stack<U>, U>(container: T): U {
  const item = container.pop();
  container.push(item);
  return item;
};

getFirst<Stack<number>, number)(numberStack); // 상속된 타입 변수