[ TS ] Functions

🔴  Call Signatures

 

// 함수를 작성할 때, argument의 타입을 지정하고,
// return 값은 유추시키는 방식을 사용했으나
const add = (a: number, b: number) => a + b;

// 미리 타입을 지정하면
type Add = (a: number, b: number) => number;
// argument에 직접 타입을 적어주지 않아도 된다.
const add: Add = (a, b) => a + b;

 

🟠  Overloading

⚪  오버로딩은 함수가 서로 다른 여러 개의 call signatures를 가지고 있을 때 발생한다.

 

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

const add: Add = (a, b) => {
  if (typeof b === "string") return a
  return a + b
}

⚪  오버로딩은 패키지나 라이브러리를 디자인할 때 많은 사람들이 사용한다.

 

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)  // config: string
  else console.log(config.path, config.state)  // config: Config
}

⚪  파라미터의 갯수가 다를 때도 오버로딩이 적용된다.

⚪  주로 마지막에 적힌 추가 파라미터를 옵션으로 사용할 때 발생한다.

 

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
}

add(1, 2)
add(1, 2, 3)

 

🟡  Polymorphism (다형성 = 여러 가지 다른 구조들)

 

// ⚠️ 여러 가지 타입들을 사용할 때마다 타입을 지정하기에는 비효율적이다.
type SuperPring = {
  (arr: number[]): void
  (arr: boolean[]): void
  (arr: string[]): void
}
// 💡 제네릭 타입을 사용해줌으로써 모든 concrete type을 받을 수 있다.
type SuperPrint = {
  <T>(arr: T[]): T
}

const superPring: SuperPrint = (a) => a[0]

// 🔉 파라미터로 들어온 타입을 제네릭이 감지하여 배열의 타입으로 적용한다.
const a = superPrint([1, 2, 3, 4])
// <number>(arr: number[]) => number
const b = superPrint([true, false, ture])
const c = superPrint(["a", "b", "c"])
const d = superPrint([1, 2, true, false, "hello"])

 

// 두 개 이상의 제네릭 타입을 사용하는 경우
type SuperPrint = <T, M>(a: T[], b: M) => T

const superPrint: SuperPrint = (a) => a[0]

const a = superPrint([1, 2, 3, 4], "x")
const b = superPrint([ture, false, true], 1)
const c = superPrint(["a", "b", "c"], false)
const d = superPrint([1, 2, true, false, "hello"], [])

 

🟢  Conclusion

 

type Player<E> = {
  name: string
  extraInfo: E
}
type RyongExtra = {
  favFood: string
}
type RyongPlayer = Player<RyongExtra>

const ryong: RyongPlayer = {
  name: "ryong",
  extraInfo: {
    favFood: "kimchi"
  }
}
const jeong: Player<null> = {
  name: "jeong",
  extraInfo: null
}