함수와 타입 - 함수 오버로딩 ( Function Overloading )

 

함수 오버로딩

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

파라미터의 형태가 다양한 여러 케이스에 대응하는 같은 이름을 가진 함수를 만드는 것

!  function 키워드로만 함수 오버로딩을 할 수 있으며 arrow function으로는 오버로딩을 할 수 없다. !

 

 

타입스크립트에서 함수 오버로딩을 구현하려면 먼저 다음과 같이 버전별 오버로드 시그니쳐를 만들어 줘야 한다.

선언부에서는 가능한 매개변수 타입만 지정해주고 함수 구현은 구현부에서만 이루어진다.

// 버전들 -> 오버로드 시그니쳐 : 구현부 없이 선언부만 만들어둔 함수
function func(a: number): void;	// 매개변수를 1개만 받는 버전
function func(a: number, b: number, c: number): void;	// 매개변수를 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);
  }
}

func(1);        // ✅ 버전 1 - 오버로드 시그니쳐
func(1, 2);     // ❌ 
func(1, 2, 3);  // ✅ 버전 3 - 오버로드 시그니쳐

 

구현 시그니쳐의 매개변수 타입은 모든 오버로드 시그니쳐와 호환되도록 만들어야 한다.

( = 구현부는 모든 선언부를 표현할 수 있어야 한다 )

따라서 위 코드에서는 매개변수 b와 c를 선택적 매개변수로 만들어 매개변수를 하나만 받는 첫번째 오버로드 시그니쳐와도 호환되도록 만들어 주었다.

오버로딩된 함수를 사용할 때 매개변수 타입 규칙은 선언부를 따른다.

공식문서에 따르면 오버로드 보다는 유니온 타입을 쓰라고 한다. ( ..? 내공부는... ? )

 

 

 

 

 

 

 

 

 

 

reference.

한 입 크기로 잘라먹는 타입스크립트(TypeScript).섹션4-함수와 타입.https://www.inflearn.com/course/한입-크기-타입스크립트

한 입 크기로 잘라먹는 타입스크립트 핸드북.https://ts.winterlood.com/함수 오버로딩

기록의 힘.[TypeScript] 타입스크립트 함수 오버로딩 : Function Overloading(21.11).(23.12검색).https://lakelouise.tistory.com/194

운동개발좋아. [ TypeScript ]함수와 함수 오버로딩(22.05).(23.12검색).https://charles098.tistory.com/163

 

 

더 공부하면 좋을 만한 내용

공변성과 반변성

https://medium.com/@yujso66/%EB%B2%88%EC%97%AD-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EA%B3%B5%EB%B3%80%EC%84%B1%EA%B3%BC-%EB%B0%98%EA%B3%B5%EB%B3%80%EC%84%B1-82139f7

https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B3%B5%EB%B3%80%EC%84%B1-%EB%B0%98%EA%B3%B5%EB%B3%80%EC%84%B1-%F0%9F%92%A1-%ED%95%B5%EC

https://medium.com/@yujso66/번역-타입스크립트의-공변성과-반공변성-82139f7e5cc3