[TS] TypeScript - Generics

🔷 Generics

• 타입스크립트를 사용하면서 입력할 데이터 마다 타입이 다를 경우, 타입을 일일이 명시하게 되면서 코드가 길어지는 불편함이 있다.

• 아래 예제를 보면 각 Array마다 다른 유형의 타입을 가진 데이터를 가지고 있는 경우, 타입 명시하는 코드 부분이 길어지게 된다.

  // 예제
  function getArr(arr :number[] | string[] | boolean[] | object[]) :number {
    return arr.length;
  }
  
  const arr1 = [1, 2, 3];
  getArr(arr1); // 3
  
  const arr2 = ["a", "b", "c"];
  getArr(arr2); // 3
  
  const arr3 = [true, false, true];
  getArr(arr3); // 3
  
  const arr4 = [{ id : "John" }, { id : "Jim"}]
  getArr(arr4); // 2

• Generic을 사용한 예제

  • 기본 형태 - 통상적으로 로 많이 씀.

    function 함수명<T>(parameter : T) {};
    
    interface 인터페이스명<T> {};

  • 예제

    // Generics
    
    function getArray<T>(arr :T[]) :number {
      return arr.length;
    }
    
    // 함수를 부를 때 해당하는 <타입>을 명시하여 사용.
    // 사실 타입을 명시하지 않아도 타잆스크립트에서 해당 데이터에 맞는 타입으로 자동으로 읽는다.
    // 하지만 union type인 경우 직접 명시해 줄 수 있다. 예) <number | string>
    const ar1 = [1, 2, 3];
    getArray<number>(ar1); // 3
    
    const ar2 = ["a", "b", "c"];
    getArray<string>(ar2); // 3
    
    const ar3 = [true, false, true];
    getArray<boolean>(ar3); // 3
    
    const ar4 = [{ id : "John" }, { id : "Jim"}]
    getArray<object>(ar4); // 2
    
    // Interface에서 Generic 사용하기
    // 예제) Fruit의 option의 타입을 다양하게 지정하고 싶을 때
    interface Fruit<T> {
      name: string;
      price: number;
      option: T;
    }
    
    const apples :Fruit<object> = {
      name: "apple",
      price: 1000,
      option: {
        color: "red",
        discount: false,
      }
    }
    
    const bananas :Fruit<string> = {
      name: "banana",
      price: 2000,
      option: "yellow"
    }