스트링 + 스트링, 또는 숫자 + 숫자의 연산을 하는 함수 만들기

• 잘못된 예시
• 오버로딩

오버로딩의 순서는 중요하다.

<aside> 📌 여러 오버로딩에 동시에 해당할 수 있는 경우는 제일 먼저 선언된 오버로딩이 적용된다.

</aside>

function example(a: string): string;
function example(a: string | null): number;
function example(a: string | null): string | number {
	if (a) {
		return 'string';
	} else {
		return 0;
	}
}

const result = example('example'); // const result: string

• 첫 번째 선언의 타입이 number로 바뀌면 result의 타입이 number가 될 것임
• 그러나 해당 타입이 구현부와 일치하지 않기 때문에 에러가 발생할 것
• 오버로딩의 순서는 좁은 타입부터 넓은 타입 순으로 오게 해야 문제가 생기지 않음

인터페이스로 오버로딩 표현하기

<aside> 📌 각 함수의 타입을 인터페이스의 각 항목으로 표현

</aside>

interface Add {
	(x: number, y: number): number;
	(x: string, y: string): string;
}

const add: Add = (x: any, y: any) => x + y;

타입 별칭으로 오버로딩 표현하기

<aside> 📌 각 함수 타입을 선언한 뒤 & 연산자로 하나로 묶으면 오버로딩과 같은 역할을 함

</aside>

type Add1 = (x: number, y: number) => number;
type Add2 = (x: string, y: string) => string;
type Add = Add1 & Add2;

const add: Add = (x: any, y: any) => x + y;

유니언이나 옵셔널 매개변수를 활용할 수 있는 경우는 오버로딩을 쓰지 말자