타입스크립트 - 타입스크립트 - overloading

// Error!
// Operator '+' cannot be applied to types 'string | number' and 'string | number'.(2365)
function add(x: string | number, y: string | number): string | number {
  return x + y;
}

위와 같은 타입 오류를 해결하는 방법?

함수 오버로딩

• 호출할 수 있는 함수의 타입을 미리 여러개 타이핑해두는 기법

작성방법

1. 타입만 작성하고 구현부를 작성하지 않고 여러개의 함수를 작성하고
2. 마지막에 함수 구현부를 작성할 때 매개변수를 any로 지정하거나 위에 선언해둔 타입을 작성
3. any로 지정해도 위에 선언해둔 타입만 들어올 수 있음

매개변수가 다를 때의 함수 오버로딩

function add(a: string, b: string): string;
function add(a: number, b: number): number;
function add(a: any, b: any): any {
  return a + b;
}

add("hello", "world"); // function add(a: string, b: string): string (+1 overload)
add(1, 3); // function add(a: number, b: number): number (+1 overload)

매개변수가 다를 때의 함수 오버로딩 2

매개변수로 전달받은 string과 string 배열을 하나의 string으로 리턴하는 함수

// 매개변수에 직접적으로 타입 지정하기

function saySomeThing1(word: string | string[]): string {
  if (typeof word === "string") return word;
  if (Array.isArray(word)) return word.join(" ");
  throw new Error("unable to say something");
}

saySomeThing1(["안녕하세요", "World"]); // '안녕하세요 World'

매개변수에 직접적으로 타입을 지정할 수 있으나, 여러가지의 타입을 할당한다면 코드가 복잡해짐

// 함수 오버로드 사용

function saySomeThing2(word: string): string;
function saySomeThing2(word: string[]): string;
function saySomeThing2(word: any): any {
  if (typeof word === "string") return word;
  if (Array.isArray(word)) return word.join(" ");
  throw new Error("unable to say something");
}

saySomeThing2(["안녕하세요", "World"]); // '안녕하세요 World'

오버로딩이 동시에 해당될 수 있는 경우 제일 먼저 선언된 오버로딩에 해당됨

function example(param: string): string;
function example(param: string | null): number;
function example(param: string | null): string | number {
  if (param) {
    return "string";
  } else {
    return 1234;
  }
}
const result = example("what");
// const result: string

• 오버로딩 순서를 변경하면 number가 출력됨

function example(param: string | null): number;
function example(param: string): string;
function example(param: string | null): string | number {
  if (param) {
    return "string";
  } else {
    return 1234;
  }
}
const result = example("what");
// const result: number

타입 별칭으로 오버로딩 작성하기

각자 함수 타입을 선언하고, &연산자로 하나로 묶기

type Add1 = (x: number, y: number) => number;
type Add2 = (x: number, y: number) => number;
type Add = Add1 & Add2;
const add: Add = (x: any, y: any) => x + y;