JS ES6 with TS

• https://kangax.github.io/compat-table/es6/
⇒ 어떤 브라우저(/컴파일러가)가 모던 자바 스크립트의 어떤 기능을 지원하는지 나열
⇒ ts는 Type-Script +core-js 3 를 보면 됨, ts가 컴파일 할 수 있는 것을 설명

• 차세대 자바스크립트 : es6 이상

• 여기서는 차세대 자바스크립트에서 나타난 문법들을 알아보려고 한다.

화살표 함수

• 화살표 함수에서 보통 매개변수가 하나면 매개변수의 소괄호를 생략할 수 있지만, ts에서 타입을 명시하면 하나여도 생략할 수 없다.

• 매개변수에 기본값 할당은 마지막 변수에서부터 채워져야 한다.매개변수:타입 = 기본값

스프레드 연산자

• 매개변수를 무한개로 받을 수 있게 함

• 엄밀하게 말하면 배열이 아님, 쉼표로 구분된 데이터들의 모음임

const add = (...numbers: number[]) => {
	for (const number of numbers){
			console.log(number)
	}
}

add(1,2,3)

• 무제한이 아니면, 인수가 몇개인지 알고 있다면 튜플과 같이 사용되기도 한다.

const add = (...numbers: [number,number,number]) => {

배열 및 객체 비구조화 할당

• destructuring : 배열에 요소를 꺼내어, 왼쪽의 대괄호 사이에 변수/상수 값으로 저장

const [a, b, ...c] = [1,2]

const {a, b} = {a: 1, b: 2} //a,b 순서 상관 없음
const {a: ayoso, b } = obj //할당 후에 상수 이름은 바꿀 수 있음, 선언된 변수로 값 할당 가능
//a라는 이름의 상수는 선언되지 않고 ayoso만 선언된 상태

코드 컴파일 및 마무리 방법

• 해당 내용들은 es6에서만 가능 ⇒ js 버전이 es6이면 위의 코드들은 그대로 컴파일 됨

• compileOptions에서 버전을 es5이하로 했다면, 좀 더 길게 풀어서 컴파일 될 것임