[TS] Overloading(오버로딩)이 발생하는 경우

Overloading(오버로딩)

function overloading이나, method overloading이라고 부르는데 핵심은 오버로딩이다.

오버로딩은 함수가 여러개의 Call Signatures를 가지고 있을 때 발생시킨다.

 

나쁜 예시

type Add = {
	(a:number, b:number) => number
	(a:number, b:string) => number
	//---> 두개의 Call Signatures를 갖고 있다.
}

const add:Add = (a,b) => a+b //error! b is string|number

//나쁜예시
const add:Add = (a,b) => {
	if (typeof b === "string") return a;
	return a + b;
}

 

 

실제 Next.js(ReactJs프레임워크)에서 오버로딩 방법 사용 예시

//string
Router.push("/home"); //페이지 이동

//object
Router.push({
	path: "/home",
	state: 1 //path이외에도 객체에 담아서 같이 보낼 수 있음.
})

👉 string으로 보낼 수도 있고, object로도 보낼 수 있다.

 

 

좋은 예시

type Config = {
	path: string,
	state: object
}

type Push = { 
	(path : string): void //첫번째 콜 시그니처 //void리턴타입(아무것도 반환 안함)
	(config : Config): void //두번째 콜 시그니처
}

//push 구현
const push:Push = (config) => { //(parameter)config : string | Config
	//config 타입체크. (parameter)config : string
	if(typeof config == "string"){console.log(config)}
	else{
		console.log(config.path, config.state) 
		//else에서 config가 Config타입 객체라는 것을 확실히 앎.
	}
}

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

 

이 경우, Push 타입에서 두 개의 콜 시그니처가 정의되어 있다.

즉, 하나의 콜 시그니처에 두 개의 파라미터가 있는 것이 아니라, 서로 다른 두 가지 방식으로 호출될 수 있는 함수를 정의하고 있다는 것이다.

이 말은 Push 타입의 함수가 하나의 문자열 인자를 받을 수도 있고, Config 타입의 객체를 받을 수도 있다는 의미입니다. 두 경우 모두 void를 반환합니다.

 

정리하면, 서로 다른 타입의 인자를 받을 수 있는 두 개의 콜 시그니처가 존재하는 것입니다.

(다른 콜 시그니처를 가지지만 같은 파라미터 개수를 갖고 있다. 파라미터 타입만 다름!)

 

 

💡 핵심은 만약 내가 string이나 Config타입을 가지고 있다면, TS는 내부에서 그 타입을 체크하도록 해준다는 것!

 

 

파라미터 개수가 다를 때 일어나는 경우

만약, 하나의 Call Signatures는 파라미터 두개를 가지고 있고 다른 하나는 6개의 파라미터를 가지는 경우가 발생한다면 어떡해야할까?

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

⇒ 위의 타입 Add는 두 개의 콜 시그니처가 있고 첫번째 시그니처는 파라미터 2개, 다른 하나는 3개의 파라미터를 가지고 있다.

⇒ Add를 부를 때 a,b를 부를 수 도 있고, a,b,c를 부를 수 있다. 그렇다면 c는 옵션이라는 의미로 볼 수 있음.

//error! c 파라미터 타입에러
const add:Add = (a, b, c) => {
	return a + b
}

const add:Add = (a, b, c?:number) => {
	if(c) return a + b + c
	return a + b
}

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