[TypeScript | 타입스크립트 가이드북] TS vs ES6

화살표 함수 

ES6부터 식(expression)에 한해 화살표 함수식을 활용할 수 있다. 더 나아가 매개변수, 리턴타입을 명시적으로 선언해 컴파일 과정에서 타입 검사를 수행해 사전에 문제를 방지할 수 있다.

아래는 매개변수 url의 타입을 string으로 지정하여 명시적으로 표현하였다. 

//TS
let corsURL = (url:string): string => `https://crossorigin.me/${url}`;

corsURL('http://yamoo9.herokuapp.com/rest/ediya-menu');

Default Parameters

ES6 부터 함수 매개 변수의 기본값을 설정할 수 있다. TS는 매개 변수 타입 설정 후, = 뒤에 기본값을 할당하면 된다. 

컴파일된 코드를 보면 기본 값으로 할당된 매개변수는 void 0와 비교한 후, 조건이 참일 경우 기본 값을 설정한다. ( void 0는 undefined와 동일)

//TS
function countDown(start:number = 10): ()=>number {
  return () => start > 0 ? start-- : 0;
}

-> countDown의 매개변수 start는 number타입이며 10으로 기본값이 설정되었다. 

Spread Operator(전개 연산자)

let numbers:number[] = [101, 21, -12, 934, 87];

// 배열 내부 아이템으로 결합
numbers = [10, 31, 11, ...numbers, -2, 0];

// 배열 ⟹ 개별 아이템으로 순차적 제공
let min_number:number = Math.min(...numbers);
let max_number:number = Math.max(...numbers);

-> numbers라는 숫자타입을 담은 배열 타입을 지정해주고 그 값들을 배열 내부 아이템으로 결합했다. 

 

Rest Parameters(나머지 매개변수)

나머지 매개변수는 함수에서 활용되며 전개 연산자를 매개변수 앞에 붙여 사용한다.

function makeArray(...args:(number|string)[]): (number|string)[] {
  return args;
}

makeArray(11, 'eleven', 100, 'one hundred');

-> 몇 개가 들어올 지 모르는 매개변수의 타입을 number 혹은 string 배열로 받는다. 리턴 타입 역시 number 혹은 string으로 구성된 배열을 반환한다. 

 

비구조화 할당

비구조화 할당은 배열, 객체의 아이템 또는 속성을 변수에 할당할 때 유용

// 배열 비구조화 할당
let [html, , body] = [document.documentElement, document.head, document.body];

// 객체 비구조화 할당
let numbers_module = {
    multiplyNumbers: (...n:number[]):number => n.reduce((a, b) => a * b),
    sumNumbers: (...n:number[]):number => n.reduce((a, b) => a + b)
};

let { sumNumbers } = numbers_module;

-> 배열요소 각각을 변수명 html /암 것도 없는거/ body에 할당, numbers_module 이라는 객체에 담긴 2가지 함수를 { sumNumbers } 로 sumNumbers 함수만 뽑아낸다. 

 

?optional chaining을 적용하면 속성이 있을 경우 해당 속성에 할당하고, 없을 경우는 속성 할당을 하지 않는다는 의미이다. 즉, 선택적으로 존재할 경우 속성을 할당함(ES6에서는 지원하지않고 ES2020에서 지원하는 최신 문법임)

let numbers_module: { multiplyNumbers: () => number } = {
  multiplyNumbers: (...n: number[]): number => n.reduce((a, b) => a * b)
};

// ?는 선택적으로 설정할 때 사용합니다. (ES6에서는 지원하지 않습니다)
let o: { multiplyNumbers: () => number; sumNumbers?: any } = numbers_module;

// sumNumbers 속성이 없을 경우, sum 속성에 기본 값을 설정합니다.
let {
  multiplyNumbers: multiply,
  sumNumbers: sum = (...n: number[]): number => n.reduce((a, b) => a + b)
} = o;

-> 즉,  o 라는 객체에 sumNumbers가 없을 경우 기본값인 (...n:number[]):number => n.reduce((a, b) => a + b)을 설정(=)하고 :sum을 통해 속성 이름을 sumNumbers 대신 sum으로 사용

 

all ref: https://yamoo9.gitbook.io/typescript/classes/prop-acc-mod