[TS] TypeScript 개론 (4)

안녕하세요. 어느덧 TypeScript 개론 4번째 포스팅이네요 ㅎㅎ
이번 포스팅에서는 TypeScript 함수의 타이핑과 선택적 매개 변수/매개 변수에 default 값을 주는 방법에 대해 알아보도록 하겠습니다. 오늘 배울 내용은 다소 간단하니 안심해도 좋습니다:)

함수 반환 타입 / 매개 변수 반환 타입

아래 코드를 살펴보도록 하겠습니다.

//app.ts

function sendMessage(message, userName){
   console.log(`&{message},${userName}`);
}

sendMessage('Hello','Swim')

sendMessage라는 함수의 반환타입을 명시해주는 방법 다들 지난 포스팅들을 잘 보셨다면 할 줄 아실 것이라고 생각이 드는데요. sendMessage 함수의 반환 값은 존재하지 않으므로 여기서는 void를 반환해주는 것이 옳겠네요. 만약 함수의 반환 값이 문자열일 경우 반한 값을 string으로 명시해줘야 한답니다.

//app.ts

function sendMessage(message, userName):void{   // 함수의 반환 타입 명시
   console.log(`&{message},${userName}`);
}

sendMessage('Hello','Swim')

위와 같은 방법으로 함수의 매개 변수에도 Type을 명시해줄 수 있습니다.

//app.ts

function sendMessage(message: string, userName: string):void{   // 함수의 반환 타입 명시
   console.log(`&{message},${userName}`);
}

sendMessage('Hello','Swim')

이제 이러한 것들은 많이 익숙해지셨죠?
조금 더 나아가서 만약 setMessage의 매개변수로 한가지만 넣어주고싶다면 어떻게 해야할까요?
TypeScript는 기본적으로 함수에 정의된 모든 매개 변수가 함수에 필요하다고 가정하기때문에, 아무런 동작 없이 setMessage의 매개변수 값으로 한가지만 넣어줄 경우 에러가 발생합니다.
즉, 함수가 호출되면 TypeScript는 함수를 선언할 때의 argument와 함수 호출의 argument를 비교 검사한다는 의미입니다.
이런 경우에 바로 선택적 매개변수를 사용합니다.

선택적 매개변수

선택적 매개변수의 사용방법은 상당히 간단합니다. 다음과 같이 정리하면 되는데요.

//app.ts

function sendMessage(message: string, userName?: string):void{   // 물음표 사용
   console.log(`&{message},${userName}`);
}

sendMessage('Hello')

이렇게 userName이라는 argument 뒤에 간단하게 물음표 하나만 붙여주면 된답니다.
그렇지만 주의할 점!
전달되는 arguments가 여러개이고 몇가지만 선택적 매개변수인 경우에는
반드시!!!!
선택적 arguments가 비선택적 arguments보다 뒤에 선언되어야 한다는 점입니다.
즉 아래와 같은 코드는 잘못되었고, 에러를 발생시킨다는 의미입니다.

//app.ts (잘못된 코드)

function sendMessage(userName?: string , message: string ):void{  // 잘못된 선언 
   console.log(`&{message},${userName}`);
}

sendMessage('Hello','Swim')

이러한 점을 여러분들이 유념하셨으면 좋겠습니다:)

Hello, undefined

자 이러한 잘못된 코드들을 피해서 compile에 성공한 경우 다음과 같은 결과물을 볼 수 있습니다. undefined라는 것이 보기 불편하죠? argument 값을 주지 않았다고 undefined라고 보이게 하는 것보다 더 좋은 방법이 있지 않을까 하는 생각이 드실겁니다.
이럴 때 사용하는 것이 기본 매개 변수 입니다.

기본 매개 변수

이 역시 사용법이 간단합니다.

//app.ts

function sendMessage(message: string, userName='Hmm'):void{   // 물음표 사용
   console.log(`&{message},${userName}`);
}

sendMessage('Hello')

이런 식으로 userName에 아무 값도 할당되지 않을 시에 미리 지정해둔 'Hmm'이라는 단어가 나오도록 기본 배개 변수를 설정할 수 있습니다. 이것이 바로 기본 매개 변수입니다.

어?? 근데 userName이 선택적 argument라고 했는데 물음표도 없고, type에 대해 명시하지도 않았네요? 그냥 저렇게만 선언하면 되는건가요?

아주 좋은 지적입니다.
이렇게 기본 argument를 사용할 시에는 물음표를 사용하여 선택적 매개 변수임을 명시해주는 코드가 필요하지 않습니다. 또한 userName이 string이라는 것에 대해 명시해줄 필요또한 존재 하지 않아요.
물음표를 사용하지 않는 이유는, 우리가 저 argument의 기본 값을 지정해주었기에, 별다른 선언을 하지 않아도 기본 값이 들아간다는 일종의 약속을 했기 때문입니다.
또한 type에 대해 명시하지 않는 이유는 필자가 TypeScript 개론 2편에서 말했던 타입추론과 관련있는데요.
우리의 똑똑한 TypeScript는 default 값의 type이 'string'이라는 것을 추론하고 그에 대해 적용할 준비를 이미 마쳐 놓았기 때문에 우리가 별도의 Type 선언을 해주지 않아도 되는 것이랍니다:)

arrow function

필자는 arrow fuinction이 여태껏 JavaScript의 업데이트 중 최고의 업데이트라고 생각합니다. TypeScript는 JavaScript의 superset이라고 TypeScript 개론 1장에서 제가 언급했죠? TypeScript에서 또한 이러한 arrow function을 사용할 수 있습니다.
위에서 만들어진 sendMessage라는 함수를 arrow function으로 만들어보도록 하겠습니다.

// app.ts
const sendMessage=(message:string, userName='Hmm'):void=>{
   console.log(`&{message},${userName}`);
}

이런 식으로 간단하기 함수를 arrow function으로 만들 수 있습니다. 이를 잘 알아두는 것이 중요합니다. arrow function에 대해서는 제가 다른 시리즈인 개발 상식에서 조만간 depth 있게 다룰 예정입니다:)
기대해주세요.

마무리

오늘은 정말 가볍게 지난 3개의 포스팅에서 배운것들과 유사한 것들에 대해 배워보았는데요. 사실 TypeScript의 내용은 난이도가 많이 높거나 한 부분은 없다고 생각합니다. 다만 기업에서 TypeScript를 선호하는만큼 여러분들이 제 포스팅을 보고 TypeScript에 대한 learning curve의 부담감을 조금 떨쳐내실 수 있다면 좋겠습니다. 이제 TypeScript 개론은 한편 남았습니다. ㅎㅎㅎ class에 대해 다룰 예정이라 다소 무거울 수 있지만 제가 쉽게 여러분들에게 알려줄 수 있도록 노력하겠습니다.
긴 포스팅 글 일어주셔서 감사합니다.!