typescriptlang.org のホームページにリストされている Typescript の主な利点の 1 つは、ES3 以降のターゲットにコンパイルされる「最先端の Javascript」を記述できることです。Typescript では、let
and const
、アロー関数、デストラクチャリング、テンプレート リテラルなど、多くの ES6 関数を使用できます。
特定の ES6 機能が Typescript で利用できない理由を理解しようとしています。特定の ES6 機能が Typescript に追加される時期を指定するロードマップ、または追加されない理由に関する説明はありますか?
たとえば、Typescript で String.includes を使用しようとするとエラーが発生し、結果の JavaScript はトランスパイルされず、メソッドをサポートしていないブラウザーでは失敗します。
これのトランスパイルされたバージョン (tsconfig.json でターゲットを ES5 に設定) は Opera で失敗します:
let homer = "homer simpson";
if(homer.includes("homer")) {
alert("Yes! We have a homer!");
}
私は自分のポリフィルを追加することができ、それは動作します:
// Polyfill for .includes
// Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes
if (!String.prototype.includes) {
String.prototype.includes = function(search, start) {
'use strict';
if (typeof start !== 'number') {
start = 0;
}
if (start + search.length > this.length) {
return false;
} else {
return this.indexOf(search, start) !== -1;
}
};
}
let homer = "homer simpson";
if(homer.includes("homer")) {
alert("Yes! We have a homer!");
}
Typescript に実装されている ES6 機能のいくつかの例
テンプレート リテラル
let myDiv = `
<div>
<h2>I am part of a template literal.</h2>
</div>
`
にトランスパイル
var myDiv = "\n <div>\n <h2>I am part of a template literal.</h2>\n </div>\n";
破壊
let [a,b] = [1,2,3];
にトランスパイル
var _a = [1, 2, 3], a = _a[0], b = _a[1];
アロー関数
const arrsq = [1,2,3];
const squares = arrsq.map(x => x*x);
にトランスパイル
var arrsq = [1, 2, 3];
var squares = arrsq.map(function (x) { return x * x; });