타입스크립트 - 함수

@function

call signature

• 함수 위에 마우스를 올렸을 때 보게 되는 것
• 함수의 인자 타입/ 반환타입을 알려줌

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

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

@오버로딩 overloading

• 함수가 서로 다른 여러개의 call signatures를 가지고 있을 때 발생
• string을 보내거나 config 객체를 보내는 경우

type Config = {
  path: string,
  state: object
}

// overloading
type Push = {
  (path:string): void
  (config: Config): void
}

const push:Push = (config)=>{
  if(typeod config === 'string'){
    console.log(config)
  }
  else{
    console.log(config.path, config.state)
  }
}

• 여러개의 인자를 가지고 있는 경우

type Add = {
  (a:number, b:number): number
  (a:number, b:number, c:number): number
}
// c: option (추가 파라미터 옵션)

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

//Error! 파라미터의 개수가 다르기때문
const add:Add =(a,b,c) => {
  return a+ b
}

@제네릭 generics

• 콘크리트 타입을 사용하는 것 대신 사용할 수 있음
  • 콘트리트 타입: number, string, boolean 등
• 타입의 placeholder 같은 것
  • 타입을 유추
• call signature를 작성하는데 콘크리트 타입을 알 수 없을 때 사용
• 사용방법

// call signature
type Typename = {
  <GenericName>(arg: GenericName): void,
  <T,M>(a:T, b:M)=>T
};

const superPrint: SuperPrint = (arr) => arr[0];

// 함수형
// V: generic
function superPrint<V>(a:V[]){
  return a[0]
}

예시1

type Player<Extra> = {
  name: string
  extranInfo: Extra
}
type MarkExtra = Player<{favFood:string}>

const mark: MarkExtra  = {
  name: mark,
  extraInfo: {
    favFood: 'watermelon'
  }
}

const nico: Player<null> = {
  name: nico,
  extraInfo: null
}

예시2

type A = Array<number>;

let a: A = [1, 2, 3];

function printAllNumbers(arr: Array<number>) {
  return;
}

@다향성 polymorphism

• call signature을 하나하나 만들어서 다양한 형태를 받음

type SuperPrint = {
  (arr: number[]):void
  (arr: boolean[]):void
  (arr: string[]):void
}

const superPrint: SuperPrint = (arr)=>{
  arr.forEach(i=>console.log(i))
}

superPrint([1,2,3])
superPrint([true, false, true])
superPrint(['a', 'b', 'c'])

// Error!
superPrint([1, 2, true, 'c'])

Generic을 사용해 다양한 형태를 받기

type SuperPrint = {
  <GenericType>(arr: GenericType[]): GenericType
};

const superPrint: SuperPrint = (arr) => arr[0];

const a = superPrint([1, 2, 3]);
// a: number
const b = superPrint([true, false, true]);
// b: boolean
const c = superPrint(["a", "b", "c"]);
// c: string
const d = superPrint([1, 2, true, "c"]);
// d: number | boolean | string