Functions

함수의, 함수에 의한, 함수를 위한 타입스크립트 사용법에 대해 알아봅시다 😋

> Call Signatures

type Add = (a: number, b: number) => number

const add: Add = (a, b) => a + b;

• 타입스크립트 사용시 코드에 커서를 올리게 되면 나타나게 되는 가이드.
• 타입스크립트에게 함수가 어떻게 호출되는지 설명해주는 부분(call signature)를 작성하면, 타입스크립트가 코드의 타입을 추론(유추)하여, 설명해 준다.
• 프로그램을 디자인 하기 전에 타입을 먼저 생각하고 구현 할 수 있게 도와준다.

> 오버로딩(Overloading)

• 함수가 서로 다른 여러개의 call signatures를 가질 경우.

  type Config = {
    	path: string;
    	state: object;
  }
  
  type Push = {
  		(path: string): void;
    	(config: Config): void;
  }
  
  const push: Push = (config) => {
  	if(typeof config === 'string') { console.log(config) }
    	else {
      	console.log(config.path, confoig.state);
      }
  }

• 함수가 서로 다른 call signatures와 파라미터의 개수도 다를 경우.

  type Add = {
  	(a: number, b: number): number;
    (a: number, b:number, c: number): number;
  }
  
  const add: Add = (a, b, c?: number) => {
  	if(c) return a + b + c;
    return a + b;
  }

> 제네릭(Generic)

• 타입의 Placeholder라 볼 수 있다.
• 받아올 파라미터의 concrete 타입을 정확히 모를 때 사용된다.
• 타입스크립트는 받아오는 파라미터 타입으로 placeholder의 타입을 대체하며,
  타입을 추론해준다.

  제네릭을 사용하여 Call Signature를 직접 작성할 경우

  // 일반적인 Call Signature 생성
  type SuperPrint = {
   <T>(arr: T[]): T;
  }
  // 화살표 함수 사용하여 Call Signature 생성
  type SuperPrint = <T>(a: T[]) => T
  
  const superPrint: SuperPrint = (arr) => arr[0];
  
  const a = superPrint([1]);  // -> type: number
  const b = superPrint([true]);  // -> type: boolean
  const c = superPrint(["a"]);  // -> type: string
  const d = superPrint([false]);  // -> type: boolean

  제네릭을 일반함수에서 사용할 경우

  // 선언문을 통한 함수
  function superPrint <T>(a: T[]) {
  	return a[0];
  }
  // 화살표 함수 사용
  const superPrint = <T>(a: T[]) => {
  	return a[0];
  };

  제네릭을 통한 타입의 재사용

  // 타입의 재사용
  type Player<E> = {
      name: string;
      extraInfo: E;
  }
  type Extra = {
  	favFood: string;
  }
  type KimPlayer = Player<Extra>
  
  const kim: KimPlayer = {
  	name: 'kim',
    extraInfo: {
      	favFood: 'kimchi'
    }
  }