JiSoo's Devlog

[타입스크립트로 블록체인 만들기] Functions 본문

Frontend/Typescript

[타입스크립트로 블록체인 만들기] Functions

지숭숭숭 2024. 3. 31. 14:12

함수의 call signature 타입 만들기

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

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

a:number, b:number 이렇게 할 필요 X

 

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

직접 작성하기보다 외부 라이브러리에 자주 보이는 형태

다른 여러 개의 argument를 가지고 있을 때 발생하는 효과

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 Add2 = {
(a: number, b: number): number,
(a: number, b: number, c: number): number
}

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

 

polymorphism 다형성 (여러 타입을 받아들임으로써 여러 형태를 가지는 것)

concrete type -> number, boolean, void 등 지금까지 배운 타입

generic type -> 타입의 placeholder 같은 것으로 concrete type 대신 사용 가능

제네릭은 기본적으로 placeholder를 사용해 작성한 코드의 타입 기준으로 바꿔준다

type SuperPrint = {
  <TypePlaceholder>(arr: TypePlaceholder[]):void
}

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

superPrint([1, 2, 3, 4])
superPrint([true, false, true, true])
superPrint(["a", "b", "c", "d"])
superPrint([1, 2, true, false, "hi"])
type SuperPrint = {
 <T>(arr: T[]): T
}

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

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

타입스크립트에게 타입을 유추하도록 알려준 것

함수의 call signature을 입력할 때 placeholder 사용 -> 다형성

 

타입스크립트는 제네릭을 처음 인식했을 때와 제네릭의 순서를 기반으로 제네릭의 타입을 알게 된다

type SuperPrint = <T, M>(a: T[], b:M) => T

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

const a = superPrint([1, 2, 3, 4], "x")
const b = superPrint([true, false, true], 1)
function superPrint<T>(a: T[]){
  return a[0]
}

 

제네릭을 사용해 타입을 생성, 확장 가능

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

type JisooExtra = {
  favFood: string
}

type JisooPlayer = Player<JisooExtra>

const jisoo: JisooPlayer = {
  name:"jisoo",
  extraInfo: {
    favFood:"kimchi"
  }
}
const lynn: Player<null> = {
  name: "lynn"
  extraInfo: null
}

타입을 생성하고 그 타입을 또다른 타입에 넣어 사용도 가능

많은 것들이 들어있는 큰 타입을 가지고 있는데 그중 하나가 달라질 수 있는 타입이라면 제네릭 사용

type A = Array<number>

let a:A = [1, 2, 3, 4]
useState<number>()

useState의 call signature이 number 타입의 useState가 되는 것

 

728x90