[TIL] TypeScript를 좀 더 편하게 사용하게 하는 기능.

1. Call Signatures : 미리 type을 선언하자

Call Signatures란 위의 사진처럼 편집기 상에서 함수나, 변수, 인수 등등에 마우스 커서를 올리면 볼 수 있는 말풍선안의 내용을 말한다.

함수를 어떻게 호출 할 수 있는지 알려주는 용도로 사용하는 기능이다.

타입스크립트를 사용하다 보면 타입을 일일히 명시하지 않아야 하는 상황이 생긴다. 위의 사진을 예로 든다면 변수명은 다르지만 변수의 내용이 같은 코드가 무수히 반복되는 경우가 있을 수 있다.

이럴 때에 Call Signatures를 사용하여 미리 선언을 해둔다면 컴포넌트를 재활용하는 것과 같은 느낌으로 타입 선언을 사용할 수 있다.

위의 두가지 Call Signatures는 표현이 다를 뿐인 같은 코드이다.

미리 선언된 타입을 변수에 지정해 주었다. 이렇게 내용이 같은 다른 변수들에도 같은 타입을 지정해 준다면 코드가 훨씬 깔끔해지고 작업시간이 단축될 것이다.

2.OverLoading : Call Signatures 안에 너무 많은 타입을 선언한다면

함수가 "서로 다른" 여러개의 Call Signatures를 가지고 있는 것을 말한다.

위와 같이 서로 다른 여러개의 Call Signatures를 하나의 함수가 가졌다면 오른쪽과 같은 오류가 발생하는데 조건문을 사용하여 오류를 해결해야 한다. 이 것은 매우 힘든 상황이다. 극히 적은 일부의 함수만이 해결할 수 있는 방법이기 때문이다.

하지만 이것이 Overloading의 핵심이다.

Next.js로 실제로 겪을 수 있는 예를 들어보겠다.

죄측의 사진은 객체로도 페이지 이동이 가능하고 string으로도 페이지 이동이 가능한 Overloading의 예이고 우측의 사진은 Overloading을 해결한 예이다.

지금까지는 인자가 하나일 때의 문제였고, 만약 인자의 개수가 다른 Call Signatures라면 어떻게 해결해야 할까.

생각보다 간단하다. optional parameter를 사용하면 해결이 가능하다. 주의할 점은 optional parameter의 사용위치는 Call Signatures의 내부의 인자가 아닌, 함수에 할당되는 인자에 사용을 해야 하는 점이다.

3. Polymorphism : Call Signatures안에 어떤 타입이 들어갈지 예상이 되지 않을 때

- 타입스크립트는 다형성을 가지고 있다. 다형성은 generic type으로 사용이 가능한데, 타입스크립트가 다형성을 가진 이유는 무엇일까?

우선 concrete type을 알아야 하는데 우리가 흔히 알고 있던 number, string, boolean 그리고 종 전에 배운 void, unkown 등을 concrete type이라고 한다. concrete type은 어디에 쓰일까? 앞서 배웠던 것을 생각해 보면 알 수있다.

Call Signatures를 선언할 때 내부에 타입들을 사용했고 이 것이 concrete type의 사용방법이다.

하지만 이 방법은 하드코딩같은 부분이 존재하는데 만약 superPrint(["a", "s", "d", "f"]) 를 출력하려면 어떻게 해야 할까?

번거롭지만 Call Signatures를 추가해줘야 하고, 또 다른 타입의 배열을 출력하려 한다면 Call Signatures를 또 한 번 추가해줘야 한다.

또 하나의 배열안에 여러가지 타입이 들어가 있다면? 이런 작업이 무수히 많아질 수 있는 경우가 있다.

때문에 이것이 generic type을 사용하는 이유가 된다.

위의 사진과 같이 Call Signatures를 선언할 때 꺽쇠안에 어떠한 플레이스홀더를 넣는다. 단어는 무엇이던 상관 없다. 플레이스홀더를 concrete type이 있던 자리에 대치해 넣으면 generic type을 사용한 것이다. 우측사진을 보면 여러가지 타입을 유추해 인식하고 있다.

유추하는 것이 중요하다. 타입스크립트는 어떤타입인지 지정하는 것 보다 타입스크립트 스스로 이 것이 어떤 타입인지 찾게 하는 것이 좋다.

Call Signatures 안에 어떤 타입이 들어올지 모르겠다면 사용해 보자. 이 것이 generic type의 핵심이다.

- 플레이스 홀더를 추가해 함수 generic type을 추가할 수 있고, 함수의 형태로 전환할 수 있다. 좀 더 나한테는 친숙한 코드구성이다.

- Call Signature의 확장도 가능하다. 아래의 세 코드 모두 동일하다.