<aside> 💡 제네릭에 대해서 알아보자!

</aside>

제네릭

프로그래밍을 할때 변수라는 저장소를 사용하는 이유는 데이터 값의 유연성을 위해서이다. 타입스크립트에서의 타입은 고정되어 사용하기에 유연성이 제한된다.

그렇기에 약간의 유연성을 가미한 (number | string ) | 기호를 사용해서 만드는 유니온 타입 있다.

하지만 유연하게 더 대처하고 싶다면 이것마저도 제한이 된다. 그렇기에 변수 를 통해 언제든지 변할 수 있는 타입을 보다 유연하게 할 수 있게 변수화한 방법이 바로 제네릭 이다.

코드의 예

간단한 add() 함수를 이용해서 제네릭 타입이 중요한지에 대해서 알아보자

add 라는 함수는 숫자도 더해줘서 정수로 만들어주고, 또한 문자열도 더해줘서 합쳐진 문자열을 만들어주는 함수로 만들어본다고 가정해보자.

number , string 두 타입을 동시에 다루니 유니온 타입을 통해 간단하게 다음과 같이 구성할 수 있다.

function add(x: string | number, y: string | number) : string | number {
	return x + y;
}

add(1, 2); // 3
add('hello', 'world'); // 'helloworld'

이렇게 작성한다면 문제점이 생긴다. 우리는 x: string, y: string 또는 x: number, y: number 를 의도했지만 사실 x: string, y: number 또는 x: number, y: string 도 될수 있는 가능성이 있다.

그렇다면 해결방안이 뭘까? 함수를 분리해서 하나의 함수 타입에는 하나의 역할만 할 수 있도록 분배해주면 된다.

function add(x: string, y: string): string;
function add(x: number, y: number): number;
function add(x: any, y: any) {
   return x + y;
}

add(1, 2); // 3
add('hello', 'world'); // 'helloworld'

// 오버로딩을 통해 다음 함수 호출은 일어날 수가 없다.
// add(1, '2');
// add('1', '2');

이렇게 코드를 작성하게되면 해결은 되지만 코드가 길어져 가독성이 안 좋아진다. 따라서 제네릭을 사용하여 타입을 변수로 지정하고 나중에 타입을 정하는 식으로 유연하게 사용이 가능하다.

function add<T>(x: T, y: T): T { // 제네릭 : 꺾쇠와 문자 T를 이용해 표현. T는 변수명이라고 보면 된다.
   return x + y;
}

add<number>(1, 2); // 제네릭 타입 함수를 호출할때 <number> 라고 정해주면, 함수의 T 부분이 number로 바뀌며 실행되게 된다.
add<string>('hello', 'world'); // 'helloworld'