타입스크립트 심화

Call signature

콜시그니처란 어떠한 함수의 타입을 정의하는 것이다.

const functionA = (arg1:number,arg2:number):void => {
  console.log(arg1,arg2)
}

콜시그니처를 사용하지 않을경우 함수의 타입을 정할때 위와 같이 함수마다 정의해주어야된다. 

만약 콜시그니처를 사용한다면

 

type callSignature = {
  (arg1: number, arg2: number): void;
};

const functionA: callSignature = (ar1, ar2) => {
  console.log(ar1, ar2);
};

위의 코드처럼 객체의 타입을 정의하듯이 함수의 타입을 정의해준후 필요한 함수에 사용하기만 하면 된다.

 

 

Overloading

type callSignature = {
  (a: number, b: number): number;
  (a: number, b: string): number;
};

const functionA: callSignature = (a, b) => {
  return a + b; // 오류 발생
};

오버로딩은 함수에 서로 다른 여러개의 콜시그니처를 가지고 있을때 발생한다.

위의 코드와 같이 인자 b는 string일 수도 있기때문에 밑에와 같이 함수에 경우의 수를 만들어주어야 한다.

 

const functionA : callSignature = (a, b) => {
  if(typeof b === "string") return a
  return a+b
};

 

오버로딩의 경우 콜시그니처의 인자의 갯수가 다른경우에도 발생할수 있다.

type callSignature = {
  (a: number, b: number): number;
  (a: number, b: number, c: number): number;
};

const functionA : callSignature = (a, b, c?:number) => {
  if (c) return a + b + c;
  return a + b;
};

이경우 에도 마찬가지로 인자 c가 존재할경우를 대비하여 함수를 작성해 주면된다.

 

Generic

어떠한 데이터의 타입이 다양할경우 사용된다. 예를들어

type callSignature = {
   ( a:number) :void
   ( a:string) :void
};

const functionA : callSignature = (a) => {
    console.log(a)
};

functionA(1)
functionA("1")
functionA(true) // 오류 발생

콜시그니처에 파라미터를 number와 string만을 지정해주니 함수를 부를때 인자값으로 boolean을 주게되면 오류를 발생시킨다. 물론 boolean을 위한 콜시그니처를 추가해 주어도되지만 generic을 이용하면 더 간편하게 코드를 작성할수 있다.

 

type callSignature = {
   <T>(arg1:T) :void
};

const functionA : callSignature = (arg1) => {
    console.log(arg1)
};

functionA(1)
functionA("1")
functionA(true)

위와 같이 콜시그니처에 generic으로 "T"를 부여해 주니 문제가 말끔히 해결되었다.

이처럼 사용자가 generic을 부여해주면 generic은 선언시점이아닌 생성 시점에 타입을 명시하도록 해준다. 즉 함수가 호출되고 인자를 받을때 그 타입이 결정이 되는 것이다.

 

또한 generic을 여러개 정의해줄수 있다.

type FunctionA = {
  <T, V>(arg1: T, arg2: V): void;
};

const functionA: FunctionA = (arg1, arg2) => {
    if(typeof arg1==="number" && typeof arg2 ==="number") console.log(arg1+arg2)
    console.log(arg1, arg2);
};

functionA(1,"2")

위와 같이 함수의 입력값들이 서로 다른 타입인 경우 generic을 "T"와 "V"로 나눠 정의 해줄수도 있다.

 

 

마무리

이렇게 타입스크립트의 기본적인 것만 봣을때는 이해하기 쉬웠지만 실제 라이브러리들이 사용하는 방식을 보면 굉장히 복잡해 보인다... 그경지가 되기까지 꾸준히 연습하는 수밖에...