TypeScript 7회차 - 함수의 타이핑, 선택적 매개 변수, 기본 매개변수

https://youtu.be/SVtqhpboxGw

함수의 타입 명시

함수의 반환(Return) 타입 명시하기

function 함수이름 (매개변수1, 매개변수2): 함수의 반환타입{ }

ex) 함수의 return 값이 string 이면

function sendGreeting (message, userName): string {
     return 'Hello, Mark';
 }

ex) 함수의 return 값이 배열이면

 function sendGreeting (message, userName): string[] {
     return ['Hello', 'Mark'];
 }

매개변수를 이용한 출력

 function sendGreeting (message : string, userName: string):void {
     console.log (`${message}, ${userName}`);
 }
 
 sendGreeting('Hello', 'Mark');

매개변수가 2개 이상인 함수 호출 시 argument를 하나만 전달하고 싶을 때는 어떻게 해야할까?

그냥 하나만 쓴다고 해결되는 게 아니다.

sendGreeting('Hello'); 이런식으로 하나만 전달 시 타입스크립트는 함수에 정의된 모든 매개변수가 함수에 필요하다고 가정하기 때문에 에러 발생.

함수가 호출되면 타입스크립트 컴파일러는 함수에 정의 된 매개변수와 함수를 호출할 때 전달되는 argument를 비교 검사 하는데 이 때 매개변수와 argument의 수가 일치하지 않으면 Expected 2 arguments, but got 1. 같은 에러가 발생한다.

---

해결법

선택적 매개변수

매개변수 또한 객체에서의 선택적 property 처럼 물음표를 사용하여 선택적 매개변수가 될 수 있다.

function sendGreeting (message : string, userName?: string):void {
     console.log (`${message}, ${userName}`);
 } 
 
 sendGreeting('Hello');

전달되는 매개변수가 여러개이고 그 중 몇가지만 선택적 매개변수인 경우 선택적 매개변수들은 반드시 필수 매개변수 뒤에 위치해야 한다.
타입스크립트의 규칙상 하나의 매개변수가 선택적 매개변수가 되면 선택적 매개변수의 오른쪽에 위치한 다른 매개변수들 또한 선택적 매개변수가 되어야 하기 때문이다.

나머지 매개변수를 선택적 매개변수로 처리한 후 argument로 매개변수 message에 대한 값만 넘겨주면 node 파일명.js 실행시 콘솔창에 message값, undefined 이렇게 출력된다.

---

기본 매개변수

기본 매개 변수(Dfault Parameter)를 사용하여 이렇게 값이 주어지지 않은 선택적 매개변수가 undefined가 아닌 default 값을 갖게 할 수 있다.

/사용법은 간단하다. 그냥 선택적 매개변수 = '할당할 값' 이렇게 선언하면 된다.
ex) userName?: string = 'there'

function sendGreeting (message : string, userName?: string = 'there'):void {
     console.log (`${message}, ${userName}`);
 }

이렇게 하면 함수의 매개변수에 아무런 값이 할당되지 않더라도 'there'이라는 값이 할당된다.

값이 주어졌기 때문에 더이상 선택적 매개변수일 필요가 없으므로 물음표도 지워주고 타입추론에 의해서 기본값의 타입인 string 타입을 추론하므로 :string 도 지워준다.

function sendGreeting (message = 'Hello', userName = 'there'):void {
     console.log (`${message}, ${userName}`);
 }  
 sendGreeting();
 sendGreeting('Good morning'); //message값만 전달
 sendGreeting('Good afternoon', 'Jenny'); //message, userName 둘 다 전달

node 파일명.js 로 확인 시 순서대로
기본매개 변수 값 할당 돼서 Hello, there
message값만 전달 돼서 Good morning, there
msessage, userName 둘 다 전달 돼서 Good afternoon, Jenny 출력.

---

화살표 함수(Arrow Function) 활용
const sendGreeting = (message = 'Hello', userName = 'there'):void =>console.log (${message}, ${userName});

화살표 함수를 이용하면 이렇게 길이를 줄일 수 있다.