타입스크립트 function

함수의 기본적인 타입 선언

JS

function addParams(num1, num2) {
  return num1 + num2;
};

TS

function addParams(num1:number, num2:number):number {
  return num1 + num2;
}

자바스크립트는 기명 함수로 표현하여 num1과 num2를 더하는 함수를 만들었다.

타입스크립트는 자바스크립트 함수에 타입을 더하여 위와 같이 사용한다.

 

차이점은, 타입스크립트에서 함수의 타입은 매개변수의 타입과 함수의 반환 타입을 추가한 것을 볼 수 있다.

 

JS

const addParams = function(num1, num2) {
  return num1 + num2
};

TS

const addParams = function(num1:number, num2:number):number {
  return num1 + num2
};

또한 익명함수로도 표현이 가능하다.

함수에 인자 전달

타입스크립트에서는 함수가 호출될 때, 컴파일러가 각 매개변수에 대해 값이 제대로 넘어왔는지 검사한다.함수에 주어진 인자의 수와, 함수가 기대하는 매개변수의 수가 같아야한다.

function fullMyName(firstName: string, lastName: string):string {
  return firstName + lastName;
}

fullMyName("gildong", undefined);
fullMyName("gildong", "hong");
fullMyName("gildong"); // error
fullMyName("gildong", "h", "ong"); // error

optional parameter

function fullMyName(firstName: string, lastName?: string):string {
  return firstName + lastName;
}

fullMyName("gildong", undefined);
fullMyName("gildong", "hong");
fullMyName("gildong");
fullMyName("gildong", "h", "ong"); // error

2번째 parameter인 lastName에  ?(optional parameter) 를 붙여줌으로써, 인자를 전달받을 수도 있고, 전달받지 않을 수도 있음을 알려준다. 

Default Parameter

function callMessage(message: string = "hello" ):string {
  return message;
}

callMessage();

아무런 인자도 전달하지 않아도, default parameter를 설정하였기 때문에,

에러가 나지 않고 string 형태의 "hello"가 반환되는 것을 알 수 있다.

Rest parameter

function addParams(...numbers: number[]):number {
  return numbers.redece((a,b) => a + b);
}

addParams(1, 2); // 3
addParams(1, 11); // 12
addParams(1, 11, 2, 22); // 36

function fullMyName(firstName: string, ...restOfName: string[]):string {
  return firstName + " " + lastName;
}

fullMyName("gildong", "h", "o", "n", "g"); // gildong h o n g

함수가 얼마나 많은 인자를 줄지 모르는 상황에서는 Rest parameter를 이용할 수 있는데,

타입스크립트에서는 이 인자들을 하나의 변수로 모을 수 있다.