Typescript 개념 정리 4 - 제네릭

Generic

타입을 전달받아 지정하는 방식

function insertAtBeginning(array: any[], value:any){
  const newArray = [...array, value];
  return newArray;
}

const demoArray = [1,2,3];
const updatedArray = insertAtBeginning(demoArray, 4);

updatedArray[0].split(""); // 컴파일 시에는 에러x, 실행시에만 에러o

위 코드는 자료형이 any이므로 split() 메서드를 실행할 수 있는 자료형인지 아닌지 ts가 체크해줄 수 없다. 그렇다고 위의 함수를 자료형별로 여러개 작성하는 것도 비효율적인 방식이다. 이럴 때 입력받는 자료형에 따라 자료형이 지정되는 제네릭 방식을 사용하면 편리하다.

<T> 보통 T라는 변수를 사용하여 자료형을 명시한다. 만약 자료형이 2개 등장하면 <T, U> 보통 T, U를 사용한다.

따라서 제네릭을 사용한 방식으로 위의 코드를 수정하면 다음과 같다.

function insertAtBeginning<T>(array: T[], value:T){
  const newArray = [...array, value];
  return newArray;
}

const demoArray = [1,2,3];
const updatedArray = insertAtBeginning(demoArray, 4);

// updatedArray[0].split(""); // ts 에러 발생!