Typescript Function Overloading의 설명과 사용법(Function return type based on input parameter)

왜 Overloading이 필요할까?

typescript에서 함수를 정의하다보면 인자를 어떻게 주느냐에 따라 return type이 다르게 잡혔으면 싶을 때가 있습니다. 예를 들면,

function read(str?: string) {
  return str
}
const word = read('hello world')  // string | undefined

여기서 함수 read의 return type은 str에 의해 결정되는 것이 아니라 항상 string|undefined 형태의 union type을 갖습니다.
즉, word의 type은 string | undefined 입니다. 'hello world'의 type은 string인데도 말이죠.
이럴때 함수를 여러번 쌓아서 정의하면(overloading) 문제를 해결할 수 있습니다.

overloading 사용법

// 타입 선언 with overloading
function read():void
function read(str:string):string

// 실제 함수 선언
function read(str?:string){
  return str
}
const withoutInput = read()  // void
const withInput = read('hello world')  // string

// 화살표 함수 형태로는
const read:{():void; (str:string):string} = (str?:string) => str

위 예시에서 withoutInput은 void type을, withInput은 string type을 갖게 됩니다.