함수 오버로딩
add 함수는 두 개의 매개변수를 갖고 있으며 각 매개변수의 타입이 Combinable 타입입니다.
함수 내부에서는 typeof 연산자를 사용하여 매개변수의 타입을 하나의 타입으로 특정하고 있습니다.
하지만 add 함수 호출문에 숫자 10과 20을 전달한 반환값이 number 타입이 아닌 Combinable 타입인 것을 확인할 수 있습니다.
결과적으로 타입스크립트가 result 변수의 타입이 string인지 number인지 알지 못합니다. 이는 Combinable 타입으로 인식되어 아래처럼 자동 완성이 표시되며 이외 프로퍼티나 메서드에 접근시 에러를 표시하게 됩니다.
이러한 이유는 함수의 반환값이 하나의 특정 타입으로 제한되지 않고 위 예제처럼 if 문으로 분기하는 경우의 반환값과 아닌 경우의 반환값 타입이 여러 가지이기 때문에 발생하게 됩니다.
이때 우리는 함수 오버로딩를 사용하여 해결할 수 있습니다.
타입스크립트에서 함수 오버로딩이란 동일한 함수에 전달되는 인수의 타입과 반환값의 타입을 여러 경우로 명시할 수 있습니다. 타입스크립트는 이러한 정보를 통해 전달되는 인수의 타입에 따라 반환되는 값의 타입을 특정할 수 있습니다.
참고로 함수 오버로딩의 경우 화살표 함수로 함수를 정의할 때는 사용할 수 없습니다.
함수 정의 위에 function 이름(매개변수: 타입): 타입;을 작성해줍니다. 이때 주의할 점으로는 함수 이름은 반드시 동일해야 하며, 매개변수의 경우 순서가 동일해야 합니다.
이후 호출문에서 두 인수가 모두 number 타입인 경우 반환값도 number 타입인 것으로 오버로딩했으므로 타입스크립트가 이를 인지하고 자동완성을 표시해주며 관련된 API에 대한 접근에도 에러를 표시하지 않습니다.
아래 그림은 add 함수가 전달받는 인수의 모든 경우의 수를 함수 오버로딩을 통하여 정의했습니다.
