[TypeScript] 함수

타입스크립트에서의 함수

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

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

함수의 기본적인 타입 선언

다음은 자바스크립트 함수의 선언 방식에 매개변수와 함수의 반환 값에 타입을 추가한 방식이다.

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

TIP : 함수의 반환 값에 타입을 정하지 않을 때는 void라도 사용

함수의 인자

타입스크립트에서는 함수의 인자를 모두 필수 값으로 간주한다.

따라서 함수의 매개변수를 설정하면 undefined 나 null 이라도 인자로 넘겨야 하며, 컴파일러에서 정의된 매개변수 값이 넘어왔는지 확인한다.

즉, 정의된 매개변수 값만 받을 수 있고 추가로 인자를 받을 수 없다.

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

sum(10);  // 타입 에러 없음
// 만약 선택적 프로퍼티 혹은 옵셔널 체이닝을 적용하지 않으면 error, too few parameters 발생

매개변수 초기화는 ES6 문법과 동일하다.

function sum(a: number, b = '100'): number {
	return a + b;
}
sum(10, undefined);  // 110
sum(10, 20, 30);  // error, too many parameters
sum(10);  // 110

REST 문법이 적용된 매개변수

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

this

타입스크립트에서 this가 잘못 사용되었을 때 감지할 수 있다.

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

아래 코드를 타입스크립트로 컴파일 했을 때, 만약 --noImplicitThis 옵션이 있더라도 에러가 발생하지 않는다.

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

일반적인 상황에서의 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!

만약 UIElement 인터페이스 스펙에 맞춰 Handler 를 구현하려면 아래와 같이 변경해야 한다.

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