[Typescript] 타입스크립트로 블록체인 만들기_(3)

https://nomadcoders.co/typescript-for-beginners

타입스크립트로 블록체인 만들기 – 노마드 코더 Nomad Coders

 

 강의 내용 요약
#3.0 ~ #3.4

 

○ Typescript 함수

1️⃣ call signatures

• 우리가 Typescript에게 이 함수가 어떻게 호출되는지, 함수의 반환 타입은 뭔지 설명해주는 부분

---

2️⃣ overloading

• 함수가 서로 다른 여러개의 call signatures를 가지고 있을 때 발생시킨다.
• 간단히 생각해서 overloading은 여러 call signatures가 있는 함수일 뿐이다.

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

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

superPrint([1, 2, 3, 4])
superPrint([true, false, true])
superPrint([1, 2, true, false])

   * concrete type : 구체적인 타입.(number, string, void ...) ↔ generix

---

3️⃣ polymorphism(다형성)

   - poly = many 많은

   - morphism = structure 형태나 구조 혹은 모양

   ⇒ 여러가지 다른 모양 또는 다른 형태

---

4️⃣ Generic

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

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

superPrint([1, 2, 3, 4])
superPrint([true, false, true])
superPrint([1, 2, true, false])

• 모든 가능성을 다 조합해서 call signature을 만들어야함
• 개발하면서 케이스를 계속 만들고 있을 수 없으니 Generic을 사용해서 해결하자!

---

   ※ Generic : call signature를 작성할 때, 여기 들어올 확실한 타입을 모를 때 사용한다.

     → 우리는 단지, 이게 타입일 거라는 것만 알지 concrete type이 되겠지만 그 타입을 미리 알 수 없어

     ⇒ 그럼 어떻게 사용하는가?

          Typescript에 generic을 사용하고 싶다고 알려줘야한다!

type SuperPrint = {
	// 그 타입의 배열이 될 것이라는 것을 인지하고 그 타입 중 하나를 리턴하도록 한다.
    <TypePlaceholder> (arr: TypePlaceholder[]) : TypePlaceholder
}

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

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

 

 

• Typescript는 괄호 안 값들을 보고 타입을 유추하고 기본적으로 그 유추한 타입으로 call signature를 보여준다.
  (함수에 커서를 대보면 call signature를 확인할 수 있다.)

 

// 화살표 함수형
type SuperPrint = {
    <T,M> (arr: T[], b:M):T
}
const superPrint:SuperPrint = (arr) => arr[0]

// 일반 함수형
function superPrint2<T,M>(arr: T[], b:M) {
    return arr[0]
}

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

• 두 개의 generic을 사용하기

 

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

const tistory: TistoryPlayer = {
    name:"tistory",
    extraInfo: {
        favFood:"kimchi"
    }
}

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

• generic을 사용해 타입을 생성할 수도 있고 타입을 확장할 수도 있다.
• 타입을 생성하고 그 타입을 또 다른 타입에 넣어서 사용할 수 있다.
• tistory, naver과 같이 type들끼리 일종의 재사용이 가능하다.

---

✅ React에서는 어떻게 사용?

useState<number>()

• useState의 call signature이 number 타입의 useState가 된다.