Generic Type(제네릭 타입)

타입을 명확히 정하여 사용하기 위해 기본 타입들, type이나 interface를 위해 정의한 타입을 이용하였는데, 만약 코드를 호출하는 시점까지 타입을 모르는 경우는 어떨까?
예를 들어, 배열을 만들 때 문자열 배열인지, 숫자 배열이지, 객체가 들어있는 배열인지 모르는 경우가 있다면..

const strArr = new Array("a", "b", "c");
// const strArr: string[]

const numArr = new Array(1, 2, 3);
// const numArr: number[]

생성자 함수를 이용하여 배열을 생성하면 입력값과 반환값의 타입이 유동적이다.
즉, 사용하기 전까지 입력값과 반환값이 정해져 있지 않다는 뜻이다.

const a = new Array<number>(1,2,3)

Array 뒤에 <number>이 제네릭을 사용하는 문법이다.

function add(a:number, b:number){
	return a + b;
}

a와 b는 함수를 호출하기 전까지 값이 정해지지 않은 상태이다.

add(3, 4)

위와 같이 호출시 a는 3, b는 4로 값이 정해지게 된다.

이처럼 제네릭(Generic)은 함수에서의 파라미터처럼 실제로 사용할 때 타입이 정해지도록 하는 방식이다.

아래와 같은 함수를 작성하게 된다면 이 함수는 어떤 타입의 배열이 들어와도 잘 작동한다.

function getFirstElement<T>(arr: T[]): T | undefined {
    return arr[0];
}

const numbers = getFirstElement([1, 2, 3]);              // number 타입 반환
const strings = getFirstElement(["a", "b", "c"]);        // string 타입 반환
const objects = getFirstElement([{ id: 1 }, { id: 2 }]); // { id: number } 타입 반환