함수

기본적인 함수의 타입 선언은 다음과 같다.

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

그냥 JS의 매개변수와 반환 값에 타입을 붙여준게 끝이다.

 

함수 파라미터

- TypeScript 에서 함수의 인자는 모두 필수값으로 간주되고, 컴파일러가 이를 꼭 확인한다.

- 따라서 undefined, null 이라 할지라도 인자로 꼭 넘겨줘야한다.

function sum(a: number, b: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error
sum(10); // error

* 파라미터 초기화는 JS랑 동일하다
function sum(a: number, b = '100'): number {
  return a + b;
}
sum(100, undefined); // 200
sum(10, 20, 30); // error
sum(10); // 110

 

- 만약 기존 JS처럼 파라미터 개수를 꼭 맞추지 않고 싶다면 ? 기호를 통해 우회 가능하다.

function sum(a: number, b?: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error
sum(10); // 10

 

ES6+ REST 문법이 적용된 파라미터

- REST 파라미터: 매개 변수의 수를 정해놓지 않고, 사용자가 넣고 싶은 만큼 넣게 해주는 기능

- 사용 방법은 JS랑 동일하다.

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

 

this

- 함수에서 this를 잘못 사용했을 때 감지할 수 있다.

- 아래와 같이 this가 가리키는 것을 명시함으로써 타입에러를 방지할 수 있는 것.

function 함수명(this: 타입) {
  // ...
}

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

let vm: Vue = {
  el: '#app',
  count: 10,
  init: function(this: Vue) {
    return () => {
      return this.count;
    }
  }
}

let getCount = vm.init();
let count = getCount();
console.log(count); // 10

- vue 인터페이스를 정의하고, vue 타입을 따르는 객체 vm을 생성함.

- vm의 init 함수는 this를 명시적으로 vue 라고 지정했기 때문에, this.count 는 vm.count 를 참조하게 됨.

- return () => {...} 은 자신이 정의된 위치의 this를 캡처하므로, this.count 는 vm.count 를 가리킴.

- 실행흐름 : vm.init() 실행 -> () => this.count 리턴 -> getCount() 실행 -> 내부에서 this.count 실행. (이때 this는 vm이므로 10을  출력함)

 

콜백으로 함수가 전달되었을 때의 this

- 일반적인 this와 다르게 콜백으로 함수가 전달됐을 때의 this는 다음과 같이 구분해줄 수 있다.

interface UIElement {
  // 아래 함수의 `this: void` 코드는 함수에 `this` 타입을 선언할 필요가 없다는 의미입니다.
  addClickListener(onClick: (this: void, e: Event) => void): void;
}

class Handler {
    info: string;
    onClick(this: Handler, e: Event) {
        // 위의 `UIElement` 인터페이스의 스펙에 `this`가 필요없다고 했지만 사용했기 때문에 에러가 발생합니다.
        this.info = e.message;
    }
}
let handler = new Handler();
uiElement.addClickListener(handler.onClick); // error!

 

애초에 interface의 스펙에 맞춰서 핸들러를 구현한다고 하면 아래와 같이 바꿔야한다.

class Handler {
    info: string;
    onClick(this: void, e: Event) {
        // `this`의 타입이 void이기 때문에 여기서 `this`를 사용할 수 없습니다.
        console.log('clicked!');
    }
}
let handler = new Handler();
uiElement.addClickListener(handler.onClick);