〈
TypeScript 오버로딩
2024.02.18.

오버로딩
1. 오버로딩(overloading)
- function overloading, method overloading으로도 불림
- 프로젝트에서 이용하는 외부 패키지, 라이브러리에서 오버로딩을 매우 많이 사용함
- 함수가
서로 다른 여러 개의 호출 시그니쳐를 가지고 있을 경우, 발생시킴
type Add = {
(a: number, b: number): number
(a: number, b: string): number
}
const add: Add = (a, b) => a + b;
// a는 number, b는 number 또는 string일 수 있음
// 따라서 a + b에서 에러 발생
// 에러를 벗어나는 방법
// b의 타입에 따라서 분기처리
const add: Add = (a, b) => {
if (typeof b === "string") {
return a;
}
return a + b;
}1-1. Next.js 라우팅에서 오버로딩
// Next.js에서 라우팅하는 예시에서 오버로딩 필요한 예시
Router.push({
path: "/home",
state: 1
})
Router.push("/home")
// Router에 path와 state가 다 들어오거나(object), path만(string) 들어오는 경우, 타입 지정하기
//-----------------------------------------------------
type Config = {
path: string,
state: object
}
type Push = {
(path: string): void
(config: Config): void
}
// path는 string, state는 있을 수도 있고, 있으면, object 타입
const push: Push = (config) => {
if (typeof config === "string") {
console.log(config);
} else {
console.log((config.path));
}
}1-2. parameter의 개수가 다른 경우 오버로딩
// 호출 시그니쳐가 가지는 파라미터의 개수가 다름
type Add = {
(a: number, b: number): number
(a: number, b: number, c: number): number
};
// c 파라미터는 optional type
const add: Add = (a, b, c?: number) => {
if (c) {
return a + b + c;
} else {
return a + b;
}
};