📗 Generics

🔎 Generics, Any 와 다른 점

보통의 함수는 들어오는 인자와 나가는 리턴의 타입이 일정한 규칙을 이루며 같은 로직이 반복된다.

function helloString(message: string): string { 
      return message;
  }
  function helloNumber(message: number): number { 
      return message;
  }

반복을 줄이기 위해 모든 타입을 인자로 받고 리턴할 수 있는 any를 사용할 수 있지만 타입이 서로 일치하지 않을 수 있다는 문제가 있다.

function hello(message: any): any { 
      return message;
  }
  console.log(hello('Mark').length); // any의 length도 any로 추론
  console.log(hello(38).length); // 에러가 아닌 undefined 출력

hello 의 리턴이 any 이기 때문에 타입 헬퍼가 제대로 되지 않는다.
이를 해결하기 위해 인자 타입을 변수로 활용해 리턴 타입과 같이 연관시키기 위한 것이 generic이다.
T는 타입을 의미, 해당 함수 내에서 T의 타입을 기억하여 Mark를 넣으면 string으로 기억한다.

function helloGeneric<T>(message: T): T { 
      return message;
  }

  console.log(helloGeneric('Mark')); //Mark
  console.log(helloGeneric('Mark').length); //4
  console.log(helloGeneric(36).length); //에러

📢 Generics Basic

• 방법 1. Generic 타입을 직접 지정
• 방법 2. Generic 타입을 지정하지 않고 T를 추론

function helloBasic<T>(message: T): T { 
      return message;
  }

  //방법1. 
  helloBasic<string>('Mark'); //<string>를 해주면 ()안에 string 만 들어가야함

  //방법2.
  helloBasic(38);
  helloBasic<number>('38'); //에러

변수를 여러개 넣을 수도 있다.

function helloBasic<T, U>(message: T, comment: U): T { 
      return message;
  }

  //방법1. 
  helloBasic<string, number>('Mark',30); //<string>를 해주면 ()안에 string 만 들어가야함

  //방법2. 
  helloBasic(38, 39);

🆚 Generics Array & Tuple

각 상황에 맞춰 array와 tuple을 구분하여 지정해주는 것이 중요하다.

//array
  function helloArray<T>(messages: T[]): T { 
      return messages[0]; 
  }
  console.log(helloArray(['Hello', 'World'])); // Hello
  console.log(helloArray(['Hello', 1])); // 타입이 다르므로 리턴타입이 string이나 number가 될 수 있다.

//tuple
  function helloTuple<T, K>(messages: [T, K]): T { 
      return messages[0];
  }

  console.log(helloTuple(['Hello', 'World'])); // Hello
  console.log(helloTuple(['Hello', 1])); // [string, number]이어서 string이 잘 출력됨.

🎯 Generics Function

그동안 함수를 직접 만들어 generic을 사용했는데 이번엔 함수의 타입만 선언해보자.
type alias 방식과 interface 방식이 있다.

//type alias
  type HelloFunctionGeneric = <T>(message: T) => T;

  const helloFunction: HelloFunctionGeneric = <T>(message: T): T => { 
      return message;
  };
  console.log(helloFunction<string>('Hello').length); //5

//interface
  interface HelloFunctionGeneric1 {
      <T>(message: T): T;
  }

  const helloFunction1: HelloFunctionGeneric = <T>(message: T): T => { 
      return message;
  };
  console.log(helloFunction1<string>('Hello').length); //5

🛒 Generics Class

class안에서 generic을 사용해보자.

class Person<T> { //T의 유효범위는 class 전체
      private _name: T;

      constructor(name: T) { 
          this._name = name;
      } 
  }

  new Person('Mark');
  new Person<string>(38); //에러

변수를 여러개 지정해보자.

class Person7<T, K> { 
      private _name: T; 
      private _age: K;

      constructor(name: T, age: K) { 
      this._name = name;
      this._age = age; 
      }
  }

  new Person7('Mark', 38);

🎫 Generics with extends

generic으로 사용할 때는 extends가 상속의 개념과는 약간 다르다.
extends로 타입에 제약을 걸어주는 것이므로 사용자의 오류를 줄이게 된다.
generic을 사용할 때는 extends도 같이 사용하려고 노력하자.

class PersonExtends<T extends string | number> { //string과 number만 가능
      private _name: T;

      constructor(name: T) { 
          this._name = name;
      } 
  }

  new PersonExtends('Mark'); 
  new PersonExtends(38);
  new Person6(true); // T 가 string 또는 number를 상속받기 때문에 boolean 은 X

🔗 keyof & type lookup system

interface Person8 { 
      name: string;
      age: number; 
  }

  const person8: Person8 = { 
      name: 'Mark',
      age: 28 
  };

  function getProp(obj: Person8, key: "name" | "age"): string | number {
      return obj[key];
  }

  function setProp(obj: Person8, key: "name" | "age", value: string | number): void {
      obj[key] = value;
  }

getProp와 setProp에서 name/age을 넣으면 string/number인 mark/28이 반드시 나와야 하는데 결과는 string 혹은 number이므로 오류가 생길 수 있다.
이를 해결하기 위해 먼저 keyof 를 사용해보자. keyof 개체 = 문자열 형태의 key 를 뜻한다.

function getProp(obj: Person8, key: keyof Person8): Person8[keyof Person8] {
      return obj[key];
  }

  function setProp(obj: Person8, key: keyof Person8, value: string | number): void {
      obj[key] = value;
  }

그런데 Person8[keyof Person8] = Person8["name" | "age"] = Person8["name"] | person8["age"] = string | number 이다.
아직도 string 혹은 number라 원하는 결과가 정확히 안 나올 수 있으니 이제 generic을 사용해보자.
Person8을 T로 바꾸고 K도 name과 age만 들어갈 수 있도록 extends로 정의해준다.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] { 
      return obj[key];
  }

  function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void { 
      obj[key] = value;
  }

  setProperty(person8, 'name', 'Anna');
  setProperty(person8, 'name', 27); //에러
  getProperty(person8, 'name');
  getProperty(person8, 'fullname');//에러