[TypeScript 기본 이론] #4 Function

mechaniccoder·2020년 7월 2일

TypeScript 기본이론

목록 보기

4/6

함수 타입 작성하기

지금까지 배웠던 함수의 타입을 표현하는 방식은 다음과 같았다.

let add = function(x: number, y: number): number { return x + y };

다음과 같이 반환타입 전에 =>을 사용하는 표기법도 있다. 타입을 좀 더 명확하게 선언할 수 있다.

let add: (first: number, second: number) => number = 
	function(x: number, y: number): number { return x + y};

타입 추론

위의 예제로 설명하면 방정식의 한 쪽에만 타입을 선언해도 TS 컴파일러가 알아서 타입을 추론할 것이다. 이를 contextual typing이라고 부른다.

let add: (first: number, second: number) => number = 
	function(x, y){ return x + y};

선택적 매개변수, 기본 매개변수

함수에 인자를 전달할 때 TS는 반드시 인자의 수가 일치해야만 한다. JS의 경우는 인자의 수가 일치하지 않더라고 매개변수가 선택적으로 적용됐다.

let add = function(x: number, y: number): number {
  return x + y;
}

add(1); // 에러
add(1, 2, 3); // 에러

TS에서도 이 처럼 선택적으로 인자를 전달하고 싶으면 ?를 사용하면 된다.

let add = function(x: number, y?: number): number {
  return x + y;
}

add(1); // 에러
add(1, 2, 3); // 에러

TS도 인자의 초깃값을 설정할 수 있다.

function buildName(firstName = "Will", lastName: string) {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");                  // 오류, 너무 적은 매개변수
let result2 = buildName("Bob", "Adams", "Sr.");  // 오류, 너무 많은 매개변수
let result3 = buildName("Bob", "Adams");         // 성공, "Bob Adams" 반환
let result4 = buildName(undefined, "Adams");     // 성공, "Will Adams" 반환

Rest Parameters

함수가 얼마나 많은 인자를 받을지 모르는 상황에서 spread operator를 통해 이를 표현할 수 있다.

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}

// employeeName 은 "Joseph Samuel Lucas MacKinzie" 가 될것입니다.
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

...restOfName은 나머지 인자들을 문자열 배열로 받아서 블럭 구문에 넘긴다. 여기서는 ['Samuel, 'Lucas', 'MacKinzie']가 될 것이다.

함수의 타입에서도 이를 표현한다.

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}

let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;

This

일반적인 함수 표현식에서의 this와 화살표 함수에서의 this는 다르다.

ES5에서는 보통 this를 호출한 객체로 바인딩하지만 ES6 화살표 함수에서는 this가 상위 컨텍스트에서 캡쳐된다. 쉽게 말해서 한 단계 위에서 this를 썼다고 생각하면 된다.

let cat = {
	sound: "meow",
  	soundPlay: function () {
		setTimeout(() => {
			console.log(this.sound);
		}, 1000);
    }
}

cat.soundPlay();
// 1초 후에 ... "meow"