web-dev-qa-db-ja.com

'letと' var 'はTypescriptで同じですか？

私はAngularJS2とTypeScriptを調べていましたが、TypeScriptの基本を学ぶためだけに、これを使って何かを作ることにしました。多くの調査で、モジュール、TypeScriptに関する優れたトピックを見つけました。そのうちのひとつは、変数を宣言するための「let」および「var」コマンドについて話していました。 this の質問によると、以下のTypeScriptコードは、アラートを1つだけ表示し、コンソールにエラーをスローする必要があります。

test.ts：

for(let i = 0; i < 1; i++) {
    alert(i);
}
alert(i);

コンパイルされたtest.js：

for(var i = 0; i < 1; i++) {
    alert(i);
}
alert(i);
//# sourceMappingURL=test.js.map

しかし、そうではありません。コンパイラは「let」コマンドを「無視」し、「var」コマンドに変換します。なぜこれが起こるのですか？ TypeScriptはクラスでのみ正しく機能しますか？

'npm start'にAngularJS構成を使用しているので、 'test.ts'ファイルが自動的にコンパイルされます。

  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
javascripttypescriptvarlet
10
Edie Johnny

しかし、そうではありません。コンパイラは「let」コマンドを「無視」し、「var」コマンドに変換します。なぜこれが起こるのですか？ TypeScriptはクラスでのみ正しく機能しますか？

コンパイラはデフォルトでES3にトランスパイルします。 letキーワードはES3に存在しないため、エミッターはES3で使用可能な構文を使用してコードを出力する必要があります...この場合、letキーワードの最適な代替はvarキーワード。

letキーワードを使用して送信する場合は、ES6をターゲットにする必要があります—"target": "es6" in tsconfig.jsonまたはコマンドラインオプション--target es6。これを行うと、入力したのと同じコードで出力されます。

コードは実行時に機能しますが、コンパイル時に間違いを犯したことを知らせるエラーがスローされることに注意してください。

for(let i = 0; i < 1; i++) {
    alert(i);
}
alert(i); // compile error: cannot find name 'i'
15
David Sherret

この例では、varとletの効果は同じで、ほとんどのJSエンジンでvarの方が少し速いため、TypeScriptはこれを次のように変更することでパフォーマンスの最適化を行います。 var。

別の例を試してみると、letがvarに変更されただけでなく、さらに魔法が発生することがわかります。

for (let i = 0; i < 3; i++) {
  setTimeout(function() { alert(i); });
}

実際、この例では、letとvarは同じ効果を持ちません。 letは1 2 3を表示し、varを使用すると3 3 3が表示されます。 ES6で導入されたletキーワードについて詳しく知りたい場合は、以下を確認してください。

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/let

2
floribon

それらは同一ですが、関数内で使用するとの違いがあります。

[〜＃〜] let [〜＃〜]

function theDifference(){
    for(let emre = 0; emre < 10; emre++){
    // emre is only visible inside of this for()
    }

// emre is NOT visible here.
}

[〜＃〜] var [〜＃〜]

function theDifference(){
    for(var emre = 0; emre < 10; emre++){
    // emre is visible inside of this for()
    }

// emre is visible here too.
}
0
Emre Bolat