[노마드코더스] Typescript - call signature & generic

Call Signature

인자의 타입과 함수의 반환타입을 알려줌. 마우스를 올렸을 때 뜨는 타입에 대한 정보.

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

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

오버로딩 (overloading)

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

// 예시 1
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)
  	console.log(config.path)
}

// 예시 2 - 파라미터의 개수가 다를 떄
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;
} // 파라미터 개수가 다를 떄 마지막에 적힌 추가 파라미터가 optional이며 아마도 number일거라고 얘기해줘야 에러표시가 없어짐

다형성 (polymorphism)

generic

call signature을 작성할 때 들어올 인자의 확실한 타입을 모를 때 사용
concrete type(number, string, boolean, ..)인건 알지만 그 타입을 미리 알 수는 없을 때 => 타입스크립트가 알아서 추론하게 하는 것

type SuperPrint = {
	//(arr: number[]): void
 	//(arr: boolean[]): void
  	//(arr: string[]): void
  
  //generic을 쓸 거라는 것을 알려줘야 함
  <TypePlaceholder> (arr: TypePlaceholder[]): void
}

const superPrint: SuperPrint = (arr) => {
	arr.forEach(i => console.log(i))
}
    
superPrint([1, 2, 3, 4])
superPrint([true, false, true])
superPrint(["a", "b", "c"])
superPrint([1, 2, true, false, "hello"]);

결과값을 리턴할 때

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

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

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

인자가 여러개일 때

type SuperPrint = {
	<T, M>(arr: T[], b:M) : T
}

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

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

재사용 및 타입 커스텀

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

type NicoExtra = {
	favFood: string
}

type NicoPlayer = Player<NicoExtra>

const nico: NicoPlayer = {
	name: "nico"
  	extraInfo: {
		favFood: "kimchi"
	}
}

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

함수 외에 generic을 쓰는 경우

type A = Array<number>

let a: A = [1, 2, 3, 4]
function printAllNumbers(arr: Array<number>) {
  ...
}