TypeScript 'target'및 Babel

Question

나는 TypeScript과 Webpack을 사용하고 있으며 TypeScript 코드를 ES5 코드로 번역하는 것에 대해 질문이 있습니다.

target 옵션 (tsconfig.json)을 ES5으로 설정하면 정확하게 바벨 로더가 필요하지 않습니다. 권리?

그렇지 않으면 차이점은 무엇입니까?

Answer 1

답변은 다음과 같습니다. 사용하려는 ES6의 기능에 따라 다릅니다. TypeScript는 대부분을 처리하고 ES5로 잘 컴파일되지만 몇 가지 예외가 있습니다 (예 : for..of 루프). for..of 루프는 반복기를 기반으로하는 ES6 기능입니다. 모든 객체에 대해 메서드를 정의하고 [Symbol.iterator]이라는 키 아래에 배치하면이 메서드는 for..of 루프에 의해 객체를 반복하는 데 사용됩니다. 자세한 내용은 for example here을 참조하십시오. 그러나 TypeScript 대상을 ES5로 설정하면 작동하지 않습니다. 왜냐하면 ES5의 경우 TypeScript는 루프 반복을 반복하는 객체가 명시적인 length 속성을 가지고 있고 정수형 색인 (배열과 같은)이라고 가정하기 때문에 루프를 기본 for 루프로 컴파일하기 때문입니다. 예 봐 :

for (const a of someObject) { 
//some operations 
} 

을 당신이 0에서 해당 개체에 대한 length-1에 모두 length 및 정수 속성을 제공하기 위해 요구하는

for (var _i = 0; _i < someObject.length; _i++) { 
    var a = someObject[_i]; 
    //some operations 
} 

로 컴파일 될이 ES5하는 목표를 설정합니다. 이는 반복자 개념에 반대되는 것으로 ES6에서는 객체를 반복하는 방법을 자유롭게 정의 할 수 있습니다.

요약하면 ES5 대상의 TypeScript 코드에서 ES6 기능을 사용하려면 컴파일 할 대상을 확인하십시오. 출력 코드에 몇 가지 제한이있는 경우 대상을 ES6으로 설정하고 Babel을 결과에 사용하십시오.