[TS] 함수

함수 타입

기본적인 함수 타입 선언

매개변수와 반환 값에 타입 설정

// 숫자 a, b를 받아 숫자를 리턴하는 함수
function sum(a: number, b: number): number {
  return a + b
}

 

반환 값이 없는 경우 void

function sum(a: number, b: number): void {
  console.log(a + b)
}

 

타입이 정의된 인자만큼 전달해야 함

- 더 많이 전달해도, 더 적게 전달해도 타입 에러 발생

 

정의된 매개변수보다 적게 전달하고 싶은 경우 '?'를 이용

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

 

REST 문법

function sum(a: number, ...nums: number[]): number {
  return a + nums.reduce((acc, num) => acc + num, 0)
}

 

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

 

콜백으로 전달된 함수의 this

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

class Handler {
    info: string;
    onClick(this: void, e: Event) {        
        console.log('clicked!');
    }
}
let handler = new Handler();
uiElement.addClickListener(handler.onClick);

interface UIElement {
  addClickListener(onclick: (e: Event) => void): void;
}

class Handler {
    info: string;
    onClick(this: Handler, e: Event) {
        this.info = e.message;
    }
}
let handler = new Handler();
uiElement.addClickListener(handler.onClick);

 

 

 

 

* 참고

타입스크립트 핸드북

 

2023.04.26