Generic

코딩애플강의를 보고 정리했습니다.

Generic

재사용성 높은 컴포넌트를 만들 때 사용되며, 한가지 타입보다 여러 타입에서 동작하는 컴포넌트를 생성하는데 사용한다.

제네릭타입을(<>) 쓰면 파라미터로 타입을 입력 할 수 있다.

Ex)

function 함수<T>(x: T[]): T {
  return x[0];
}

let a = 함수 < number > [4, 2];
let b = 함수 < string > ['kim', 'park'];

• <T>안에는 어떤 명칭이든 올 수 있다.
  예를들면 <T> 대신에 <MyType> 이런식으로 임의로 작명해도된다.
  

• 제네릭으로 타입을 명시해주면 함수를 사용할때 타입을 바꿀 수 있다.
  

• 일반 함수파라미터 처럼 2개 이상 넣기도 가능하다.
  

이건 안됨

function 함수<T>(x: T) {
  return x - 1;
}

let a = 함수 < number > 100;

function 함수<T>(x:T){...}에서는 아직 타입명이 확정된게 아니라 타입으로 string이 올 수도 있어서 에러를 낸다.

해결책으로는 narrowing(타입확정)을 해도되지만, 제네릭타입에 집어넣을 수 있는 타입을 미리 제한해주는것도 하나의 방법이다.

제네릭 타입 제한하기(constraints)

extends 문법을 쓰면 넣을 수 있는 타입을 제한할 수 있다.
일반 extends와는 달리 이건 확장이아닌, 비슷한 속성을 가지고있는지 if문으로 체크해주는 문법이다.

EX) 제네릭타입에 number타입이 있는지 체크..

function 함수<T extends number>(x: T) {
  return x - 1
}

let a = 함수<number>(100) //잘됨

class에도 제네릭 적용 가능

예시 1

class Person<T> {
  name;
  constructor(a: T) {
    this.name = a;
  }
}
let a = new Person() < string > '어쩌구';

예시 2

class GenericNumber<NumType> {
  zeroValue: NumType;
  add: (x: NumType, y: NumType) => NumType;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
  return x + y;
};

결론

1. 함수에 타입파라미터를 넣을 수 있다.
2. extends 키워드로 넣을 수 있는 타입 제한가능하다.
3. class에도 타입파라미터 넣을 수 있다.