Function

Typescript에서 사용되는 Function의 Type 지정

Javascript만이 아닌, 웹 애플리케이션을 구현할 때 자주 사용되는 함수는 Typescript에서 아래와 같은 3가지 타입을 정의할 수 있다.

• Parameter 타입
• Return 타입
• Structure 타입

Function Type Declaration

기존 Javascript의 함수는 다음과 같이 선언하여 사용했다.

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

Typescript의 함수는 기존 Javascript의 함수에 매개변수, return 값에 타입을 추가한다.

만약 함수 return값이 없다면 void 타입을 지정한다.

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

Function Arguments

Typescript에서는 함수의 인자를 모두 필수 값으로 간주한다.

그래서 함수의 매개변수를 설정하면 undefined, 혹은 null이라도 인자로 전달해야 컴파일러에 정의된 매개변수 값이 넘어 왔는지 확인한다.

즉, Typescript는 정의된 매개변수 값만을 받으며 추가로 인자를 받을 수 없다.

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

sum(1, 2); // 3
sum(1, 2, 3); // error, too many parameters
sum(1); // error, too few parameters

만약 정의된 매개변수를 포함하지 않거나, 이외의 다른 값을 전달하고 싶다면 '?'기호를 사용해 선택적 프로퍼티(Optional Properties)를 지정한다.

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

sum(1, 2); // 3
sum(1); // 1

Parameters with REST

ES6에서 지원하는 Rest 문법은 Typescript에서 다음과 같이 사용할 수 있다.

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

This

Typescript는 다음과 같이 Javascript의 this 값을 명시할 수 있으며, this를 확인하여 에러를 감지한다.

interface Model {  
  count: number;
  init(this: Vue): () => {};
}

let model: Model = {  
  count: 1,
  init: function (this: Model) {
    return () => {
      return this.count;
    }
  }
}

let getCount = model.init();
let count = getCount();
console.log(count); // 1

참고 자료

TypeScript: JavaScript With Syntax For Types.
React TypeScript Tutorial for Beginners - Codevolution
타입스크립트 입문 - 기초부터 실전까지 - 장기효