타입스크립트의 함수

웹 애플리케이션을 구현할 때 자주 사용되는 함수는 타입스크립트로 크게 다음 3가지 타입을 정의된다.

• 함수의 파라미터(매개변수) 타입
• 함수의 반환 타입
• 함수의 구조 타입

 

 

함수의 기본적인 타입 선언

아무런 타입을 정하지 않을때는 void이란 타입을 준다.

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

 

 

 

함수의 인자

타입스크립트에서는 함수의 인자를 필수적으로 줘야한다. 함수의 매개변수를 설정할때도 undefined나 null이라도 인자로 넘겨야하며, 컴파일러에서 정의된 매개변수 값이 넘어왔는지 확인해야한다. 정의된 값 이외로 추가적인 인자를 받을 수 없다.

function sum(a: number, b: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // 파라미터는 2개만 선언해서 매개변수 3개는 받을 수 없다.
sum(10); // 파라미터를 2개나 선언했는데 매개변수를 1개만 넣었다.

만약 자바스크립트처럼 인자 갯수만 넘지 않으면 실행되게 만들고 싶을때는 ?를 사용하면 된다.

function sum(a: number, b?: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // 타입 에러 없음

 

 

 

매개변수 초기화

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

// 매개변수 하나만 줘도 반환값을 받을 수 있는 방법
sum(10, undefined); // 110
sum(10); // 110

sum(10, 20, 30); // error, too many parameters

 

 

 

REST문법이 적용된 매개변수

Spread 연산자

객체 혹은 배열을 펼쳐서 사용하며, 원본을 건드리지 않고 새로운 객체를 반환한다.

인덱스 값을 각가 받아서 다루고싶을때 주로 사용한다.

 

REST문법이란?

Spread와 비슷하지만 여러 인자들을 하나의 배열을 만들어 새로운 객체로 반환하는게 REST문법이다.

선택한 나머지를 새로운 배열로 만들어서 반환한다고 생각하면 될듯.

const purpleCuteSlime = {
  name: '슬라임',
  attribute: 'cute',
  color: 'purple'
};

const { color, ...cuteSlime } = purpleCuteSlime;
console.log(color);
console.log(cuteSlime);

const { attribute, ...slime } = cuteSlime;
console.log(attribute);
console.log(slime);


-------------------------
> purple
> {name:'슬라임', attribute:'cute'}
> cute
> {name:'슬라임'}

객체 말고 배열에서도 사용이 가능하다.

const numbers = [0, 1, 2, 3, 4, 5, 6];
const [one, ...rest] = numbers;

console.log(one);
console.log(rest);


-------------------
> 0
> [1,2,3,4,5,6]

(참조 블로그)

 

REST문법을 적용한 타입스크립트

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

 

 

 

this

타입스크립트가 this가 가리키는 것을 명시할때 사용하는 문법형태 (this가 뭔지 모를때 볼 수 있는 자료)

function 함수명(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!

 

 

(출처 : 타입스크립트 공식 페이지 핸드북)