[TypeScript] 함수의 Type, 선택적 매개변수 그리고 기본 매개변수

TypeScript

TypeScript에서의 함수의 타입

함수의 타입은 void, number, string 등 여러가지의 타입을 지정할 수 있습니다.
함수의 return 값이 없는 경우에는 void로 지정할 수 있고
함수의 return 값이 있는 경우에는 각 Type들로 지정할 수 있습니다.

TypeScript에서의 함수 매개변수

아래와 같이 message, userName의 두 개의 매개변수를 받는 함수가 있을 경우에
한개의 매개변수가 있는 상태에서 함수를 호출하게 되면 오류가 발생합니다.
userName이라는 매개변수가 없다는 오류가 출력하게 되는데, 한개의 매개변수로도 함수를 호출하고 싶을때는 선택적 매개변수를 사용할 수 있습니다. (Optional Parameter)

function sendMessage (message: string, userName: string): void {
  console.log(`${message}, ${userName}`)
}
sendMessage("hi")

매개 변수에 ?를 붙이면 선택적 매개변수를 사용할 수 있습니다.
즉, 선택적 매개변수는 userName이 없으면 없는대로 함수를 실행할 수 있습니다.
하지만 한가지 주의 사항이 있습니다.
(a: stirng, b: string, c: string, d: string) 이렇게 4개의 매개변수를 받는 함수가 있는데 b가 만약에 선택적 매개 변수로 설정되어 있다면 c, d도 자동으로 선택적 매개변수가 됩니다.
(a: stirng, b?: string, c: string, d: string) === (a: stirng, b?: string, c?: string, d?: string)

function sendMessage (message: string, userName?: string): void {
  console.log(`${message}, ${userName}`)
}
sendMessage("hi") // hi, undefined

위의 코드처럼 undefined가 출력이 되고 싶지 않을때에는 기본 매개변수를 사용하여 undefined가 아닌 다른 값을 출력시키도록 할 수 있습니다. 아래와 같이 기본값을 설정할 수 있습니다.
하지만 userName의 기본값이 string이기 때문에 타입추론에 의해서 userName이라는 값은 선택적 매개변수이고, string을 가지는 매개변수라는 것을 타입스크립트는 타입추론을 통해 확인할 수 있기 때문에 아래와 같이 코드를 수정할 수 있습니다.

function sendMessage (message: string, userName?: string = 'everyone'): void {
  console.log(`${message}, ${userName}`)
}
sendMessage("hi") // hi, everyone

function sendMessage (message: string, userName = 'everyone'): void {
  console.log(`${message}, ${userName}`)
}
sendMessage("hi") // hi, everyone
sendMessage("hi", "allDay") // hi, allDay