TIL 46 | 함수 타입 이용(type, spread, default, rest)

일반 함수에서의 사용

• In javascript

function jsAdd(a, b) {
  return a + b;
}

• In typescript

function jsAdd(a: number, b: number): number {
  return a + b; // number값만 인자로 전달 가능
}
//
function jsAdd(a: string, b: string): string {
  return a + b; // string값만 인자로 전달 가능
}

• JS의 경우, 타입이 결정되지 않았기 때문에 string, number 등의 인자 타입에 제한을 받지 않고 해당 로직을 처리할 수 있다. (type으로 따지면, any에 속한다.)

• TS의 경우, 지정된 타입으로만 인자 전달 및 로직 처리가 가능하다.

• return값 또한, 전달된 인자에 따라서 type을 지정해주도록 한다.
  (argument: number => return: number, argument: string=> return:string)

Promise에서의 사용

• In javascript

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

• In typescript

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

• Promise에서도 마찬가지로, 인자의 해당 타입만 들어올 수 있다.

• return값은 number값을 가진 Promise이다.

Optional parameter(조건 매개변수)

function printName(firstName: string, lastName?: string): string {
  return firstName + lastName;
}
console.log(printName("yongmin", "Jeon")); // yongmin Jeon
console.log(printName("yongmin")); // yongmin undefined
console.log(printName("yongmin", undefined)); // yongmin undefined

• ?을 사용하여 해당 인자를 전달하거나 혹은 전달하지 않도록 조건을 지정할 수 있다. (위 함수에서는 lastName에 해당 조건을 지정하였다.)

• lastName?: string 는 lastName: string | undefined과 같다.

• 전달하지 않은 인자는, 해당 값에 undefined이 나타나게 된다. (undefined를 명시해서 전달했을 때에도 undefined가 뜨게된다.)

default parameter

const printMessage = (message: string = "default"): string => {
  return message;
};
console.log(printMessage("yongmin")); // yongmin
console.log(printMessage()); // default

• 자바스크립트와 동일하게 default parameter 사용이 가능하다.

• 인자를 전달하지 않을시, default값으로 지정했던 값이 나타나게 된다.

Rest parameter

function addNumbers(...numbers: number[]): number {
  return numbers.reduce(
    (accumulator, currentValue) => accumulator + currentValue
  );
}
console.log(addNumbers(1,2,3,4,5,6)); // 21

• 자바스크립트와 동일하게 Rest parameter 사용이 가능하다.

• 위 예시의 경우, number 값을 배열로 전달해야 하므로 타입을 number[]로 지정했다. (Array<number>로 지정해도 무방하다.)

Reference

• 타입스크립트 공식문서

• 드림코딩 엘리님의 TS 및 OPP 강의