[TS] 타입스크립트 Generic에 대한 이해와 활용

첫 번째 인자로 어떤 Array를 받아와서 두 번째 인자로 입력된 값을 Array의 가장 마지막에 추가하는 함수를 생각해보자.
TS로 이 함수를 작성하려면 다음과 같이 작성 가능하다.

type AddItem = <T,M>(arr:(T|M)[], item : M) => (T|M)[]

const addItem : AddItem = (arr, item) => {
  arr.push(item); 
  return arr
  }

 

이 때, arr: (T | M)[ ] 부분이 이해가 안갈 수 있다.
<M>은 item에서 정해져야할 것 같은데 arr에서 <T | M>을 쓰면 뭔가 엉키지 않을까?

결론부터 말하면 엉키지 않는다.

위 코드를 작성한 뒤 TS의 Call Signature를 뜯어보자.

addItem의 첫 인자만 전달한 상태

위 사진에서 볼 수 있듯 첫 번째 인자인 arr까지만 작성한다면, 첫 번째 인자와 두 번째 인자가 generic <M>을 공유하고 있으므로 너무나도 당연하게 두 번째 인자인 item의 Type도 arr와 같다고 나온다. 하지만, 두 번째 인자를 입력하면 어떻게 될까?

두 번째 인자까지 입력한 상태

보시다시피, 두 번째 인자를 입력하고나니, item의 Type으로서 string이 정확히 표시된다.

arr와 같은 Type을 item에 입력한 경우

더 나아가, arr와 같은 Type을 item에 입력해도 문제 없이 작동하는 것을 볼 수 있다.

 

번외

질문의 대상이 된 코드

Q : 배열 안에는 아무 타입이나 올 수 있는데 왜 V타입을 넣을 수 없다는 에러가 뜨나요?

A : Typescript이기 때문입니다. 비록 Generic 타입을 설정해주긴 했지만, Generic은 any가 아닙니다. 즉, prepend 함수의 첫 번째 인자로 전달되는 Array의 각 항목이 지닌 Type을 T가 받아가는 것일뿐, 그것이 곧 모든 Type을 다 허용한다는 뜻이 아닙니다. 따라서, T와 V가 항상 같으리라는 보장이 없으므로 Typescript는 에러를 띄우게 됩니다.