[TypeScript] 함수 오버로딩

🌻 함수 오버로딩

타입스크립트에서만 지원되는 기능

함수를 매개변수의 개수나 타입에 따라 다르게 동작하도록 만드는 문법이다.

 

오버로드 시그니쳐

함수 오버로딩을 하기 위해서는 함수에 어떤 버전들이 있는지 알려주어야 한다. 함수 구현부가 없이 함수 선언식으로 표시하며 이를 오버로드 시그니쳐라 한다.

// 함수 구현부가 없이 선언식만 써놓음 -> 오버로드 시그니쳐
function func(a: number): void;
function func(a: number, b: number, c: number): void;

func 함수는 매개변수를 1개 받는 버전과 3개 받는 총 2개의 버전이 있다는 것을 알려준다.

 

 

구현 시그니쳐

함수가 실제로 어떻게 실행될 것인지를 정의한 부분을 구현 시그니쳐라 한다.

// 함수의 실제 구현부 -> 구현 시그니쳐
function func(){};

// 함수 호출하기
func(); // ❌ -> 구현 시그니쳐는 오류가 발생하지 않았는데 왜? 오버로드 시그니쳐와 호환이 되야함 
func(1);
func(1, 2); // ❌
func(1, 2, 3);

구현부에서는 매개변수를 넘기지 않아도 오류가 발생하지 않았는데 아래 함수를 호출하는 부분에서는 오류가 발생했다.

이는 오버로드 시그니쳐에서 정의한 버전에 호환이 되지 않기 때문이다.

 

 

매개변수의 개수에 따라 다른 반환값을 출력하는 함수 만들기

/**
 * -> 하나의 함수 func
 * -> 모든 매개변수의 타입 number
 * -> ver1. 매개변수가 1개 => 이 매개변수에 20을 곱한 값 출력
 * -> ver2. 매개변수가 3개 => 이 매개변수를 다 더한 값을 출력 
 */

//오버로드 시그니쳐
function func(a: number): void;
function func(a: number, b: number, c: number): void;

// 버전에 따라 다르게 동작하는 기능 만들기
// 구현 시그니쳐에도 매개변수를 정의해줘야함
function func(a: number, b?: number, c?: number){ // 모든 매개변수가 들어온다면 첫 번째 오버로드는 의미가 없음
   if(typeof b === 'number' && typeof c === 'number'){
    console.log(a + b + c);
   } else{
    console.log(a * 20);
   }
};

구현 시그니쳐의 매개변수 타입은 모든 오버로드 시그니쳐와 호환되도록 만들어야 하기 때문에 매개변수 b와 c를 선택적 매개변수로 만들어 첫번째 오버로드 시그니쳐와 호환되도록 만든다.

 

 

---

🔗 타입스크립트 강의

한 입 크기로 잘라먹는 타입스크립트(TypeScript) - 인프런 | 강의