[TS] 함수의 타입 정의

함수 타입 정의

함수의 타입은 매개 변수와 반환값의 타입으로 결정된다.

기본 함수 타입

function func(a: number, b: number): number {
  return a + b;
}

매개변수 a와 b는 number타입이고, 반환값도 number타입이다.

 

함수의 반환값 타입은 자동으로 추론되기 때문에 다음과 같이 생략해도 된다.

function func(a: number, b: number){
  return a + b;
}

 

 

화살표 함수 타입

const add = (a: number, b: number): number => a + b;

const add = (a: number, b: number) => a + b;

 

매개변수 타입 정의

매개변수 기본값 설정

함수의 매개변수에 기본값이 설정되어 있으면 타입이 자동으로 추론되며, 이 경우 타입 정의를 생략해도 된다.

function introduce(name = "woodstock") {
  console.log(`name : ${name}`);
}

 

 

선택적 매개변수 설정

매개변수 이름뒤에 ?를 붙여주면 선택적 매개변수가 되어 생략이 가능하다.

function introduce(name = "woodstock", mbti?: "ESTJ") {
  console.log(`name : ${name}`);
  console.log(`MBTI : ${mbti}`);
}

introduce("woodstock", "ESTJ");
introduce("woodstock");

 

 

선택적 매개변수는 타입 | undefined 형태가 된다.

따라서 해당 값을 사용하기 전에는 타입을 좁혀야 한다.

function introduce(name = "woodstock", mbti?: "ESTJ", hp?: number) {
  console.log(`name : ${name}`);
  console.log(`MBTI : ${mbti}`);
  if (typeof hp === "number") {
    console.log(`HP : ${hp + 30}`);
  }
}

 

 

또한, 선택적 매개변수는 반드시 필수 매개변수의 뒤에 위치해야 한다.

 

나머지 매개변수

...rest를 사용하면 가변 개수의 인수를 배열로 받을 수 있다.

function getSum(...rest) {
  let sum = 0;
  rest.forEach((it) => (sum += it));
  return sum;
}

 

나머지 매개변수는 배열 타입으로 정의한다. ...rest: number[]는 number 타입의 요소를 가진 배열을 의미한다.

function getSum(...rest: number[]){
  let sum = 0;
  rest.forEAch((it) => (sum += it));
}

 

만약, 나머지 매개변수의 길이를 고정하고 싶다면 튜플 타입을 이용하면 된다.

function getSum(...rest: [number, number, number]) {
  let sum = 0;
  rest.forEach((it) => (sum += it));
  return sum;
}

위 코드처럼 튜플 타입을 사용하면 나머지 매개변수의 개수를 정확히 3개로 제한할 수 있다.

이렇게 5개의 인수를 전달하면 오류가 발생한다.