[TypeScript] : Generic

타입스크립트에서 다음과 같은 함수가 있다고 하자.

type Length = {
	(a: number[]) : number
}

const calLength : Length = (arr) =>{
	return arr.length
}

calLength([1,2,3]) // 3
calLength(['1','2']) // error

지난 게시글에서 언급하였듯이, 위에 타입으로 언급한 Length의 경우 Call Signature라고 불리우며 그걸 적용하여 function calLength에 타입스크립트 틀을 적용하였다.

만약 (현업에서는….저 함수에 이렇게 쓸 일은 없겠지만) function Length에 문자열을 추가해주고 싶으면 다음과 같이 Call Signature에 조건을 추가해주는 것으로 해결이 된다.

type Length = {
	(a: number[]) : number;
	(a: string[]) : number;
}

const calLength : Length = (arr) =>{
	return arr.length
}

calLength([1,2,3]) // 3
calLength(['1','2']) // 2

하지만 이러한 방법에는 한계가 있는데, 함수는 반복적으로 써야 하지만 조건이 추가되는 경우 가독성이 떨어지기에 이 때 generic을 적용하면 한결 편해진다.

✍ Generic 적용

type Length = {
	<T>(a: T[]) : number;
}

const calLength : Length = (arr) =>{
	return arr.length
}

calLength([1,2,3]) // 3
calLength(['1','2']) // 2

저런 방식으로 앞에 <PLACEHOLDER>를 넣고 매개변수 뒤에 타입과 PLACEHOLDER를 넣으면, 타입스크립트는 자동적으로 함수에 들어가는 값을 인식해서 T에 변화를 줄 수 있다 (사진에서는 O).

✍ Generic vs Any

사실상 타입스크립트에게 데이터 타입을 자동적으로 추론 할 수 있도록 설정을 하는 것이기 때문에 Any와 다를 바가 없다고 느낄 수 있지만 Any를 적용시 타입스크립트에서 제공해주는 type checking이라던가 safety checking을 하지 않게 되어서 타입스크립트를 적용하는 의미 자체가 사라진다.