TS 함수의 타이핑, 그리고 선택적 매개 변수와 기본 매개변수

📃 함수의 타입 명시

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

함수의 반환 값을 명시하기 위해서 매개변수를 포함하고 있는 괄호 뒤에 콜론 (:)을 찍고 반환 타입을 명시할수 있습니다.

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

아래 예시 함수를 보면 console 외에는 아무것도 반환하지 않습니다.
이런경우 아무것도 반환하지 않는다는 void 타입을 명시해줄수 있습니다.
🎈void 타입은 아무것도 반환 하지 않는 함수의 반환 값으로만 사용될 수 있는 타입입니다.

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

아래 예제에는 return 값이 문자열이라면 string으로 명시할수 있습니다. 문자열 배열이라면 string[]으로 명시 할수 있습니다.

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

✔ 함수의 매개변수 타입을 명시

변수에 타입을 명시할수 있듯 매개변수에도 타입을 지정할수 명시할수 있습니다. 만약 전달값이 string이 아닌 다른 값이라면 에러를 발생합니다.

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

sendGreeting;("hello", "sim")

만약 예시에서 함수를 호출할때 첫번째 매개변수인 message 값만을 아규먼트로 전달하고 싶다면 어떻게 할가요?

userName 값을 지우고 message 값만 전달한다면 에러가 발생합니다.
이러한 이유는 타입스크립트는 함수에 정의된 모든 매개 변수가 함수에 필요하다고 가정하기 때문입니다.

즉 함수가 호출되면 타입스크립트 컴파일러는 함수에 정해진 매개변수와 함수를 호출할때 전달되는 아규먼트를 비교 검사하게됩니다.
매개변수와 아규먼트의 수가 일치하지 않으면 에러를 발생합니다.

이럴때 사용하는것이 선택적 매개변수(Optional Parameter) 입니다.

📃 선택적 매개변수

매개변수 이름 뒤에 ? 표를 붙이면 선택적 매개변수가 되면서 에러가 사라지게 됩니다.

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

sendGreeting;("hello")

🧨 만약 전달되는 매개변수가 여러개이고 몇가지만 선택적 매개변수 경우, 선택적 매개변수들은 반드시 필수 매개변수 뒤에 위치해야합니다. 아래 예시에서 param2가 선택적 매개변수가 된다면 오른쪽에있는 param3, param4도 선택적 매개변수가 되어야합니다.

function sendGreeting(param1: string, param2?: string, param3: string, param4: string) {
}

📃 기본 매개 변수 (Default Parameter)

아래 예시를 실행해보면 userName 매개변수는 선택적 매개변수이기 때문에 잘 실행됩니다. 하지만 값으로는 undefined가 출력됩니다.
이렇게 아무런 값이 전달되지 않을때 undefined대신 할당된 기본값을 출력할수 있다면 어떨가요?

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

sendGreeting;("hello")

// Hello, undefined

이럴때 기본 매개 변수를 사용할수 있습니다.
사용방법은 간단합니다. 매개변수 뒤에 = 기본값을 할당해줍니다.
이렇게 기본 매개 변수를 사용할 때에는 더이상 선택적 매개 변수를 사용하지 않기때문에 ? 표시를 지워줍니다.
그리고 매개변수의 타입도 지워줍니다. 매개변수의 타입을 지우는 이유는 타입스크립트의 타입 추론과 연관이 있습니다.
매개변수의 기본 값이 주어지는 코드를 통해서 타입스크립트는 타입 추론으로 해당 매개변수의 값이 지정해준 기본 매개 변수의 타입인걸 알게 됩니다. 따라서 보다 간결한 코드를 위해서 매개변수의 타입을 생략해주었습니다. 아래 예시를 보고 결과 값을 추론해보세요.

function sendGreeting(message = "Hello", userName = "jun"): void {
  console.log(`${message}, ${userName}`);
}

sendGreeting();
sendGreeting("hello");
sendGreeting("hi", "sim");

// Hello, jun
// hello, jun
// hi, sim   

📃 화살표 함수 (Arrow Function)

함수 이름 앞에 function 키워드를 지워주고 const,let을 입력해 줍니다.
그리고 매개변수 반환되는 함수의 타입뒤에 화살표를 넣어주겠습니다.

function sendGreeting(message = "Hello", userName = "jun"): void {
  console.log(`${message}, ${userName}`);
}
const sendGreeting = (message = "Hello", userName = "jun"): void => console.log(`${message}, ${userName}`);;