使用TypeScript和Traceur的優點是什麼？

Question

您可以將TypeScript配置爲輸出ES5或ES6。只要你想在一個本來不支持ES6的平臺上運行你的應用程序，你就必須使用像Traceur這樣的編譯器（包括Traceur運行時庫）將ES6編譯成ES5。

有沒有這樣做的好處，而不是簡單地告訴TypeScript輸出ES5？ （我不希望該應用程序將永遠只針對本地ES6平臺）

據我所知，你不能在TypeScript（1.5）中編寫一個程序不能在ES5上運行（假設程序編譯和你包括正確的庫）。我錯了嗎？

Answer 1

理由使用巴貝爾或Traceur在打字稿

到目前爲止，打字稿的團隊選擇不使生成的代碼依賴於運行時的。通過polyfills可以輕鬆將TS6的某些功能用於TS（例如：ES6 Promises）。其他功能需要配合轉播機和polyfill（例如：ES6發電機）。使用帶有TS的發生器是可能的（自TS 1.6開始），但目標必須是ES6。這是使用Babel或Traceur的一個很好的理由。

理由不使用巴貝爾或Traceur在打字稿

但也有其他很好的理由不使用巴貝爾和Traceur。只是嘗試傳輸一些ES6代碼。

的ES6代碼：

let list = ['ab', 'cd']; 
for (let item of list) { 
    console.log(item); 
} 

ES5通過打字稿產生（使用the Playground）：

var list = ['ab', 'cd']; 
for (var _i = 0; _i < list.length; _i++) { 
     var item = list[_i]; 
     console.log(item); 
} 

ES5通過Traceur產生（使用the REPL）：

$traceurRuntime.ModuleStore.getAnonymousModule(function() { 
    "use strict"; 
    var list = ['ab', 'cd']; 
    var $__4 = true; 
    var $__5 = false; 
    var $__6 = undefined; 
    try { 
     for (var $__2 = void 0, 
      $__1 = (list)[$traceurRuntime.toProperty(Symbol.iterator)](); !($__4 = ($__2 = $__1.next()).done); $__4 = true) { 
     var item = $__2.value; 
     { 
      console.log(item); 
     } 
     } 
    } catch ($__7) { 
     $__5 = true; 
     $__6 = $__7; 
    } finally { 
     try { 
     if (!$__4 && $__1.return != null) { 
      $__1.return(); 
     } 
     } finally { 
     if ($__5) { 
      throw $__6; 
     } 
     } 
    } 
    return {}; 
}); 
//# sourceURL=traceured.js 

ES5通過產生巴別爾（使用the REPL）：

個

'use strict'; 

var list = ['ab', 'cd']; 
var _iteratorNormalCompletion = true; 
var _didIteratorError = false; 
var _iteratorError = undefined; 

try { 
    for (var _iterator = list[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { 
     var item = _step.value; 

     console.log(item); 
    } 
} catch (err) { 
    _didIteratorError = true; 
    _iteratorError = err; 
} finally { 
    try { 
     if (!_iteratorNormalCompletion && _iterator['return']) { 
      _iterator['return'](); 
     } 
    } finally { 
     if (_didIteratorError) { 
      throw _iteratorError; 
     } 
    } 
} 

從Traceur和巴貝爾的解決方案是醜陋的，因爲變量list可能是an ES6 iterable這些transpilers不知道的類型。 TypeScript推斷list的類型是一個數組string[]，它只產生數組的代碼。