[TS] Call Signatures / Overloading / 다형성 / Generics

Call Signature

 

Call Signature란 함수의 매개변수와 반환타입을 모두 type으로 미리 선언하는 것이다. 

 

type alias를 통해 call signature을 구현해봤다.

정확히 말하면 노란색 형광펜 친 부분이 call signature인데 우리가 타입스크립트에게 이 함수가 어떻게 호출되는지 설명해준다. 

 

이미 type alias에서 매개변수 타입을 Add로 지정했기 때문에 add 함수에서는 매개변수 타입지정이 따로 필요 없는 것이다. (이미 타입이 Add인것을 알기 때문에!!)

 

그리고 반환 타입은 Add라는 타입으로 지정해준다.

 

++) 화살표 함수의 경우

변수선언 함수이름 : 반환타입 =(매개변수) => 반환하는 것 

 

Overloading

 

아까 말했던 Call Signature도 이런식으로 구현할 수 있는데 이 방법이 존재하는 이유는 오버로딩 때문이다.

 

오버로딩은 함수가 서로 다른 여러개의 Call Signature를 가지고 있을 때 발생시킨다. 직접 작성하기보다는 외부 라이브러리에 자주 보이는 형태이다.  

 

일상에서 개발할 때 오버로딩은 Next.js에서 라우터 기능이랑 연관되어있다. (페이지 이동시켜주는 기능)

home으로 페이지를 이동하라는 것인데 이걸 오버로딩으로 구현해보면 

Push와 Config 타입을 만들어준다. 

 

이처럼 오버라이딩은 패키지나 라이브러리를 디자인할 때 많이 사용된다. 

 

다른 여러개의 argument를 가지고 있을 때도 오버로딩이 사용된다. 

예를 들어 call signature들의 매개변수 개수가 다르면 어떤문제가 일어날까?

 

첫번째 Call Signature는 매개변수의 개수가 2개이고 두번째 Call Signature는 매개변수가 3개이다.

 

근데 add함수에서 매개변수 c는 옵션 같은 존재가 된다. c는 number일것이라는 것을 알려주기 위해 물음표를 붙여줘야 한다. 

if(c) return a+b+c 의 의미는 만약 c가 있으면 a+b+c를 리턴한다는 것을 의미한다. 아니면 a+b를 리턴한다.

또는 if( typeof c==="number)라고 조건문을 써줘도 된다.

 

 

다형성

 

도대체 polymorphism이 뭘까?  

기본적으로 함수는 다른 형태와 모양을 가지고 있다.  타입스크립트에서 함수가 다른 2~3개의 파라미터를 가질 수 있는 것 처럼 말이다. 이런것을 다형성이라고 한다. 

 

concrete Type과 generic

우리가 이전부터 봐왔던 number,string,void 같은 타입이다. 

 

근데 여기서부터 우리는 타입스크립트 한테 generic 타입을 받을 것이라고 알려줄 것인데 , generic은 타입의 placeholder같은 것이다.  concrete type을 쓰는 대신 쓸 수 있다. 

 

 

네번째 superPrint는 Call Signature을 설정해주지 않았기 때문에 에러가 뜬다. 

 

방법은 두가지가 있다.

1. or을 통해서 경우의 수를 생각한다.

하지만 이건  배열의 데이터 타입을 일일이 다 생각해줘야 하는 문제점이 있다. 

 

2. generic

이런 문제점을 해결해주는 것이 generic이다. 

generic은 타입의 place holder같은 존재이다. 그리고 타입스크립트는 그 타입을 유추한다.

 

정리해서 말하자면 call signature에 들어갈 데이터 타입(concrete type)을 정확히 모를때 generic을 사용한다. 

 

위와 같은 형식이  타입스크립트가 call signature에게 제네릭을 받는다고 알려주는 방법이다.

<> 이런 꺽쇠표시를 제네릭이라고 한다. 자바에서 제네릭 프로그래밍 할때와 비슷하다.

 

자 그러면 superPrint 배열을 다시 봐보자.

이렇게 number와 boolean이 같이 섞인 경우도 generic을 써주면 타입스크립트가 자동으로 number | boolean으로 인식한다. 

 

제네릭을 사용하면 배열에 다양한 타입이 들어갈 수 있다!

 

이제 배열의 0번째 값을 출력해볼 것이다.

우선 SuperPrint type alias를 수정해봤다.

1번은 generic이라고 선언한 것이고, 2번은 제네릭을 통해 데이터타입에 해당되는 배열을 매개변수로 설정한다. 3번은 제네릭을 통한 데이터타입에 해당되는 애들 리턴한다. 

 

근데 여기서 궁금증이 생긴다. <T>에 해당하는 부분에 any를 쓰면 안될까? 아무거나 넣어도 아무거나 리턴이 되니까 말이다! 하지만 이러면 보호장치를 완전히 상실해 버린다.

 

d의 0번째 인덱스가 숫자 1인데 이걸 UpperCase로 바꿀 수 없다. 

하지만 any를 썼기 때문에 에러 메세지를 안 띄워주는 것이다. 

 

결론적으로 제네릭은 내가 요구하는대로 signature를 생성하는 도구라고 생각하면 된다. 

 

제네릭을 두개 사용해보자.

첫번째 매개변수에는 배열이 오고 두번째 매개변수에는 그냥 변수가 온다고 설정해준다.

그리고 타입스크립트가 분석을 해서 숫자 배열과 문자열이 오는구나! 라고 결정을 내린다. 

 

제네릭이 두개일 때도 우리의 요청에 따라 생성해준다. 

 

제네릭의 타입으로 객체도 올 수 있다.

 

타입스크립트에서는 객체를 선언할 때 type으로도 선언한다. 

 

NicoExtra가 object 이고, 이 object 또한 제네릭에 올 수 있다.

 

사실상 type NicoPlayer = Player<favFood:string> 과 같다. 

 

++) 타입스크립트로 useState 쓸 때 제네릭

https://velog.io/@velopert/using-hooks-with-typescript

타입스크립트로 리액트 Hooks 사용하기 (useState, useReducer, useRef)