[TIL] Typescript - 함수

타입스크립트에서 함수 이용하기

기본 함수

• JavaScript 💩 - 숫자 2개를 더하고 싶은데, 원치 않게 문자열을 이어서 더하는 경우가 발생할 수 있다.

function jsAdd(num1, num2) {
  return num1 + num2;
}

• TypeScript ✨

funtion tsAdd(num1: number, num2: number): number {
  return num1 + num2;
}

fetch함수

• JavaScript 💩 - 어떤 타입이 들어오고 나가는지 명확하게 알 수 없다.

funtion jsFetchNum(id) {
  // code...
  // code...
  return new Promise((resolve, reject) => {
    resolve(100);
  });
}

• TypeScript ✨

funtion tsFetchNum(id: string): Promise<number> {
  // code...
  // code...
  return new Promise((resolve, reject) => {
    resolve(100);
  });
}

Javascript와 Typescript에서 둘 다 사용 가능한 유용한 문법

Optional parameter

전달해도 되고, 안해도 되는 인자가 있을 때 사용할 수 있다.
전달 받지 않아도 되는 인자가 있다면 그 인자 뒤에 '?' 를 붙여준다.

function printName(firstName: string, lastName?: string) { 
  // 전달 받지 않아도 되는 인자가 있다면 그 인자 뒤에 '?'를 붙여준다
  console.log(firstName);
  console.log(lastName);
}
printName('Steve', 'Jobs');   // 오류가 발생하지 않는다
printName('Dannie');          // 원래 오류가 발생하지만, optional parameter 덕분에 발생하지 않는다
printName('Anna', undefined); // 마찬가지로 undefined를 인자로 전달해도 오류가 발생하지 않는다

Default Parameter

인자를 전달받지 않아도 기본값으로 인자를 설정할 수 있다.
기본값으로 설정하고 싶은 인자 뒤에 '=' 를 사용해서 할당해준다.

function printMessage(message: string = 'default message') {
  // 기본값으로 설정하고 싶은 인자 뒤에 '=' 를 사용해서 할당해준다.
  console.log(message);
}
printMessage(); // 아무 것도 전달하지 않아도 'default message'가 넘겨진다

Rest parameter

갯수와는 상관 없이 동일한 타입의 인자를 함수에 전달해주고 싶을 때 사용할 수 있다.
'...'을 붙여 배열의 형태로 인자를 전달해준다.

function addNumbers(...numbers: number[]): number {
  return numbers.reduce((a, b) => a + b);
}
console.log(addNumbers(1, 2));             // 3
console.log(addNumbers(1, 2, 3, 4));       // 10
console.log(addNumbers(1, 2, 3, 4, 5, 0)); // 15