[TypeScript] 함수에서의 타입 사용 (ft. optional, default, rest)

이번에 정리할 글은 특정 타입이라기보다는 함수에서 타입을 지정해 사용하는 방법에 대해 정리하고자 한다.

---

▷ 일반적인 사용방법

const plus = (a: number, b: number): number => a + b;
function minus(a: number, b: number): number {
  return a - b;
}

plus(1, 2); // 3: number type
plus("1", 2); // error 'string' 형식의 인수는 'number' 형식의 매개 변수에 할당될 수 없습니다.
minus(3, 1); // 2: number type

보통 타입스크립트에서의 함수는 이런식으로 매개변수의 타입들과 반환 타입 이렇게 둘을 선언해주어야한다.

그리고 당연히 반환값과 동일한 타입의 변수에서 결과값을 받아야 한다.

---

Optional

이는 함수뿐만 아니라 다른 곳에서도 공통적으로 사용할 수 있는 특징인데,

매개변수나, 객체타입에서의 키값 등 필수가 아닌 경우 opional 특징을 사용하면 필수가 아닌 선택값으로 변경이 가능하다.

const divide = (a: number, b: number): number => {
  return a / b;
};
divide(4); // error : 2개의 인수가 필요한데 1개를 가져왔습니다.

const getFullName = (firstName: string, lastName?: string): string => {
  return `${firstName} ${lastName}`;
};

let fullname = getFullName("steve", "jobs");
console.log(fullname);  // steve jobs

fullname = getFullName("steve");
console.log(fullname);  //steve undefined

getFullName 함수를 보면 두번째 lastName 매개변수에 물음표(?)를 붙여주었는데, 이런식으로 사용하는게 바로 있을수도 있고 없을수도 있다 라는 표현이다.

 

그래서 물음표가 없는경우 필수값이여서 divide 함수의 경우 에러가 발생하였는데,

getFullName의 경우 에러가 발생하지 않는것을 볼 수 있다.

 

하지만 여기서 이상한 점이 하나 보이는데, 함수에서 optional을 사용하게되면 이게 undefined가 나오기 때문이다.

그 이유는 VSCode를 사용한다면 해당 변수에 마우스를 올려보면 lastName: string | undefined 이런식으로 나오기 때문이다. 

 

당연히 필수가 아니기때문에 해당 타입은 undefined까지 포함한 union type이 되는것이다.

 

undefined를 처리하는 방법이야 많겠지만

모던 자바스크립트에서 사용하는 방법인 default parameter를 사용하는 방법도 있다.

 

Default parameter

이 방법은 모던 자바스크립트에서 나온 default parameter인데, 당연히 타입스크립트에서도 사용이 가능하다.

const getFullName = (firstName: string, lastName: string = ""): string => {
  return `${firstName} ${lastName}`;
};

let fullname = getFullName("steve", "jobs");
console.log(fullname); // steve jobs

fullname = getFullName("steve");
console.log(fullname); //steve

Optional과 마찬가지로 필수값이 아니게 되며 기본값이 주어지기 때문에 undefined가 안나오는 것을 확인할 수 있다.

 

Rest parameters

이 방법은 모던 자바스크립트에서 나온 rest parameter인데, 당연히 타입스크립트에서도 사용이 가능하다.

const plus = (...nums: number[]): number => {
  return nums.reduce((a, c) => a + c, 0);
};

plus(); // 0
plus(1, 2, 3, 4, 5); // 15

이 방법을 쓰면 매개변수의 개수 제한 없이 자유롭게 사용이 가능하다.

---

참고: https://www.typescriptlang.org/docs/handbook/2/functions.html

Documentation - More on Functions