목차

TS vs Es6

ECMAScript 호환성 표를 살펴보면 TypeScript는 ES6의 상당 기능을 지원(약 69%)합니다. Babel 컴파일러 지원율(약 72%)에 비해 다소 떨어지지만, ES6에서 지원하지 않는 강력한 기능을 TypeScript에서 활용할 수 있다는 점이 강점입니다.

1. 블록 영역 변수, 상수 선언

ES6부터 let, const 키워드를 사용해 변수, 상수를 정의할 수 있습니다. TypeScript 또한 마찬가지로 활용 가능합니다. let 변수는 var 변수가 불러오는 문제점(중복 선언, 호이스트에 따른 의도치 않은 동작 등)을 훌륭하게 해결 하므로 사용이 권장됩니다. 그리고 let, const 키워드를 사용하면 블록 스코프(Block Scope)를 사용할 수 있습니다.

작성 코드:

let context = document.querySelector('html');

{
  let context = document.querySelector('body');
  console.log('블록문 내부 context = ', context);
}

console.log('글로벌 context = ', context);

컴파일 코드:

var context = document.querySelector('html');

{
  var context_1 = document.querySelector('body');
  console.log('블록문 내부 context = ', context_1);
}

console.log('글로벌 context = ', context);

2. 템플릿 리터럴

ES6부터 템플릿 리터럴을 활용해 보다 손쉽게 ***템플릿 구문을 처리(문자열 접합)***할 수 있습니다. TypeScript에서도 템플릿 리터럴을 사용해 템플릿 구문을 손쉽게 사용할 수 있습니다.

작성 코드:

let nickname = 'yamoo9';

let greeting_message = `
  <p>
    안녕하세요 <strong>${nickname}</strong>님.
    가입을 환영합니다. :-)
  </p>
`;