함수

TypeScript의 함수는 JavaScript와 마찬가지로 기명 함수(named funcion)과 익명 함수(anonymous function)로 만들 수 있다.

또한 함수는 외부의 변수를 참조할 수 있다. 

 

기존 자바스크립트의 함수

// 기명 함수
function add(x, y) {
  return x + y;
}

//익명 함수
let z = 10;
let addF = (x,y) => x + y + z;

 

위 에제에서 addF라는 익명 함수는 외부의 변수를 참조 하는데, 이를 보고 변수를 캡쳐(capture)한다 라고 한다.  그리고 JavaScript의 함수에 타입을 추가하여 TypeScript에서의 함수로 사용할수 있다. 이것을 함수 타입(Function Type)이라고한다.

// 기명 함수
function add(x:number, y:number):number {
  return x:number + y:number;
}

//익명 함수
let z:number = 10;
let addF = (x:number, y:number):number => x + y + z;

 

함수의 전체 타입 작성

 

함수의 타입은 매개변수(parameter)의 타입과  반환 타입이 있으며, 전체 함수 타입을 작성하기 위해선 두가지 모두 타입이 필요하다.

let addF: (baseValue: number, increment: number) => number = function (
  x: number,
  y: number
): number {
  return x + y;
};

매개변수의 타입들이 올바르게 나열이 되있으면, 함수 타입에 이름을 붙여도 유효한 타입으로 간주한다. 

반환 타입은 위의 예시처럼 화살표 (' => ') 표기를 써서 반환 타입을 명확히 보여줄 수 있다. 함수 표기에 필요한 부분으로 반환 값이 없다면 void를 써서 표시한다.

let addF: (baseValue: number, increment: number) => number = function (
  x: number,
  y: number
): number {
  return x + y;
};

 

 

REST 문법이 적용된 매개변수

 

function sum(a: number, ...nums: number[]): number {
  const totalOfNums = 0;
  for (let key in nums) {
    totalOfNums += nums[key]
  }
  return a + totalOfNums;
}

 

THIS

TypeScript에서도 사용이 가능하며, JavaScript의 this가 잘못 사용되었을 때 감지할 수 있다. this가 가리키는 것을 명시하려면 아래 예제와 같은 문법을 사용한다.

 

function funcName(this: type) {
 ....
}