타입스크립트 함수에 타입 적용하기(매개변수 타입 지정)

타입스크립트에서는 함수의 파라미터, 반환, 구조 이렇게 3가지에 타입을 지정할 수 있다. 지금부터 함수의 기본적인 타입 선언에 대해 알아보자.

함수의 기본적인 타입 선언

기본적으로 자바스크립트로 이루어진 함수를 타입스크립트 타입을 부여한 형태로 바꾸는 것은 어렵지 않았다. 아래 예시를 보면 바로 이해할 수 있을텐데 기존 함수의 매개변수와 함수의 반환 값에 타입을 추가한 것이다.

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

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

함수의 인자

타입스크립트 내에서는 함수의 인자를 모두 필수 값으로 간주하기 때문에 매개변수를 설정하면 그에 따라 매개변수 값을 넘겨주어야한다. 하지만 어떤 값이 있을 수도 있고 없을 수도 있는 것이라면 옵셔널 체이닝으로 코드를 작성해주면 된다.

옵셔널 체이닝의 조건을 걸어주지 않은 코드는 매개변수대로 값이 넘어가야만 error를 반환하지 않는데 두개의 number 타입 변수를 넘겨주어야만 에러가 발생하지 않는다.

function sum(a: number, b: number): number {
  return a + b;
}
sum(20, 25); // 45
sum(14, 23, 31, 44); // error, 지정한 매개변수의 갯수보다 더 많은 것을 넘기기 때문
sum(34); // error, 지정한 매개변수의 갯수보다 적은 갯수를 넘기기 때문

반면에 아래의 코드는 a값은 필수로 들어가고 b에 ?를 사용한 조건을 걸어주었기 때문에 b는 있어도 되고 없어도 되는 매개변수가 된다.

function sum(a: number, b?: number): number {
  return a + b;
}
sum(20, 25); // 45
sum(14, 23, 31, 44); // error, 지정한 매개변수의 갯수보다 더 많은 것을 넘기기 때문
sum(34); // 34