[TypeScript] Placeholder

superPrint 타입의 add 함수를 생성할 때, call signature를 직접 작성해 주었다.
a는 number 타입으로,b는 boolean타입으로, c는 string 타입으로, 는 number || boolean || string 타입으로 리턴해주었다.

type SuperPrit = {
<T>(arr: T[]): T
}

const superPrit: SuperPrit = (arr) => arr[0]

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

 

const d = superPrit([1, 2, true, false, "heello"])

직접 모든 call signature를 작성해주는 방법은 좋은 방법이 아니다.
이 경우에 타입 정의를 작성했어야 했다.
그리고 다른 조합의 겨우를 가지면 타입 정의를 또 작성해야 한다.

 

그래서 좋은 방법은 제네릭(generic)을 사용해주며,

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

 

타입스크립트는 placeholder를 발견해 타입으로 대체한다.

 

T 라는 제네릭을 사용할 거라고 타입스크립트에게 알려주어 T는 배열에서 오고, 함수의 첫번째 파라미터에서 오는 거라고 타입스크립트에게 알려준 것이다. 타입스크립트는 이걸 기반으로 코드에서 살펴볼 것이고, 배열들을 보고 number, string, boolean의 타입이라는 것을 알게 된다. 그러면 타입스크립트는 T를 number, string, boolean 타입으로 대체한다.

 

기본적으로 call signature을 요청하면 스스로 생성해주는거와 같다.

타입이 number이면 number를 리턴하고 string이면 string으로 리턴한다. 함수에 해당하는 각각 call signature를 직접 작성한 거였다.

하지만 이제는 그럴 필요가 없다. 왜냐하면 placeholder를 사용하기 때문이다.  

 

제네릭은 placeholder를 사용해서 타입스크립에게 알려줘야한다.

type SuperPrit = <T>(a: T[]) => T

제네릭을 사용할 때, 타입스크립트가 "<T>(a: T[]) => T" 함수의 call signature을 만들어 주기 때문이다.

 

superPrint타입 제네릭 사용

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

제네릭을 사용할 것이라고 알려주는 이름 M(V, T, Y 등 상관없다.)을 추가해주고 어디서 제네릭을 사용 해 줄 것인지 작성해 주면 된다.

 

두번째 argument가 함수에서 제네릭으로 되어 있다는 것을 알게된다.

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


const superPrit: SuperPrit = (arr) => arr[0]

const a = superPrit([1, 2, 3, 4], "X")

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

T는 함수의 첫번째 파라미터로 배열이 올 거라고 말해주며, M은 두 번째 파라미터로 들어온다고 말해주는 것이다.

 

즉, 우리가 하는 요청에 따라 call signature를 생성는 것이 아닌 우리를 위해 요청에 따라 생성해 주는 것이다.

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


const superPrit: SuperPrit = (arr) => arr[0]

const a = superPrit([1, 2, 3, 4], "X")
const b = superPrit([true, false, true] ,1)
const c = superPrit(["a", "b", "c"], false)
const d = superPrit([1, 2, true, false, "heello"], [])

 

이것으로 typescript의 placeholder devstudy를 복습하였습니다.