타입스크립트, 함수와 매개변수 특성

타입스크립트에서 함수의 타입은 어떤 방식으로 선언되는지, 그리고 파라미터들의 특성에 대해서도 알아보자 :)

함수

1) 타입 선언

• 타입스크립트 함수에서는 총 3가지 타입을 정의할 수 있다.
  • 매개변수 타입
  • 반환값 타입
  • 구조 타입
• 이 중, 매개변수와 반환값 타입 선언에 대해 알아보자

(1) 매개변수 타입 설정

• js의 경우 타입을 선언하지 않고 함수를 정의한다.

//js
function sum1(a, b) {
  return a + b;
}

• 하지만 타입스크립트의 경우 매개변수:타입 형태로 타입을 선언한다.

//ts
function sum2(a:number, b:number) {
  return a+ b;
}

• 매개변수에서 spread 문법을 사용할 수도 있는데 방법은 아래와 같다.

//ts
function firstElement(...nums:number[]):number {
  return nums[0];
}

(2) 반환값 타입 설정

• 타입스크립트에서는 반환값에 대한 타입을 정의할 수 있다.

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

• 하지만 타입스크립트는 타입추론을 하므로, number타입인 a, b를 더했을 때 반환값이 number라고 추론한다.
• 아래와 같이 반환값에 대한 타입을 선언하지 않았지만, 반환값이 number라고 추론된 상태이다.

• 만약 반환값의 타입을 정하지 않을 때는 void라고 지정한다.

function func():void {
  console.log('gg')
}

2) 파라미터 특성

타입스크립트는 js와 달리 파라미터에는 여러가지 특성이 있는데, 아래에서 알아보자 :)

(1) 파라미터 제한성

• js는 파라미터를 제한하지 않는다.
• 이 말이 무슨 말이냐면, num이라는 함수는 총 2개의 인자를 받을 수 있다.

//js
function num(a, b) {   //인자 2개
  console.log(a, b) 
}

• 그런데 해당 함수에 여러 개의 인자를 넘겨도, js에서는 앞선 2개만 받고 별도의 에러를 띄우지 않는다는 말이다.

num(1, 2, 3, 4, 5);   // 1, 2

• 하지만 타입스크립트에서는 함수가 받을 수 있는 인자 개수를 초과할 경우 에러를 띄운다!

//ts
function num(a:number, b:number):void {
  console.log(a, b)
}
num(1, 2, 3, 4, 5);  //error!

(2) 옵셔널 파라미터

• 기본적으로 타입스크립트는 인자 개수에 엄격하다.

function text(a: string, b:string, c:string) {
  console.log(a, b, c);
}

• 그러므로 필요로 하는 인자보다 적은 개수를 넘기면 오류를 띄운다.

text('a', 'b');

• 하지만 인자를 선택적으로 넘기고 싶은 경우에 사용할 수 있는 방법이 있다.
• 파리미터?라고 하면 해당 파라미터를 넘기지 않아도 된다는 의미가 된다.

function text(a: string, b?:string, c?:string) {
  console.log(a, b, c);
}
text('a', 'b');   //a, b