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

 

TypeScript는 JavaScript의 슈퍼 셋, 즉 상위 확장자로 JavaScript 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그래밍을 하면 JavaScript로 컴파일되어 실행할 수 있다.

 

TypeScript는 정적 타입 언어로 변수의 타입을 명시적으로 지정해서 사용한다!

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

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

 

Rest parameters

const plus = (...nums: number[]): number => {
    return nums.reduce((a, c) => a + c, 0);
  };
  
  console.log(plus());
  console.log(plus(1, 2, 3, 4, 5));

plus라는 함수는 가변 인자(rest parameter)를 받는다.  ...nums: number[]에서 ...nums는 가변 인자를 의미하며, 입력받은 값들을 배열로 처리

즉, plus 함수는 원하는 만큼의 숫자 인자를 받을 수 있다.

 

return nums.reduce((a, c) => a + c, 0);
이 부분에서 nums 배열의 값을 모두 더해서 결과를 반환

이를 위해 reduce 함수를 사용.

reduce 함수는 배열을 순회하며 각 요소에 대해 누적 연산을 수행

구체적으로, 첫 번째 인자로 콜백 함수 (a, c) => a + c를 받고, 두 번째 인자로 초기값 0을 받는다.

reduce는 배열의 각 요소에 대해 다음과 같이 동작합니다:

a는 누적값, 즉 이전까지 더한 값
c는 배열의 현재 요소입
이 함수는 배열의 모든 요소를 순차적으로 더한 후 최종적으로 그 값을 반환