TypeScript - 함수의 오버로딩

함수의 오버로딩

function addString(x: string, y: string) {
  console.log(x, y);
  return x + y;
}

function addNumber(x: number, y: number) {
  console.log(x + y);
  return x + y;
}

addString("Hello", "World");
addNumber(12, 34);
addString("Hello", 34);
addNumber(12, "World");

• 위의 코드를 함수의 오버로딩을 사용해서 표현할 수 있다

function add(x: string, y: string): string; // 선언부
function add(x: number, y: number): number; // 선언부
function add(x: any, y: any): any { // 구현부
  console.log(x + y);
  return x + y;
}

addString("Hello", "World");
addNumber(12, 34);
addString("Hello", 34);
addNumber(12, "World");

• 문자만 또는 숫자만 받게 되고 서로 다른 섞으면 에러가 발생한다.

---

인터페이스 메소드의 오버로딩

• 객체 데이터 안에서 정의하는 메서드를 오버로딩을 통해서 여러 개의 타입으로 정의하는 방법

interface UserBase {
  name: string;
  age: number;
}

interface User extends UserBase {
  // 오버로딩
  updateInfo(newUser: UserBase): User; // UserBase의 객체의 속성을 받는다
  updateInfo(name: string, age: number): User;
} // 같은 updateInfo가 두번 선언되었음. 속성 순서는 중요!!!!

const user: User = {
  name: "Baek",
  age: 27,
  updateInfo: function (nameOrUser: UserBase | string, age?: number) {
    if (typeof nameOrUser === "string" && age !== undefined) {
      this.name = nameOrUser;
      this.age = age;
    } else if (typeof nameOrUser === "object") {
      this.name = nameOrUser.name;
      this.age = nameOrUser.age;
    }
    return this; // 현재 객체 User 반환
  },
};

console.log(user.updateInfo({ name: "Neo", age: 22 })); // UserBase 객체를 받아 else if 부분에 들어간다
// {naem : 'Neo', age : 22, updateInfo: f} // 객체데이터 반환

console.log(user.updateInfo("Leon", 49)); // if에 들어간다
// {naem : 'Leon', age : 49, updateInfo: f} // 객체데이터 반환