TypeScriptのvarキーワードが非推奨となっていた件

オフ 投稿者: sesera

皆さんはvarを使って変数宣言をしていませんか?今回は、そのvarが非推奨となっている現状に関して書いていこうと思います。

目次

varの問題点

varを使用する事による問題としては以下のような物があります。

  • 関数スコープ:ブロックスコープではなく関数スコープで変数が定義される
  • 変数の巻き上げ:宣言前に使用可能
  • グローバルオブジェクトのプロパティになる可能性
  • 再宣言が可能
// 問題例
var x = 1;
if (true) {
    var x = 2; // 同じ変数を上書き
}
console.log(x); // 2が出力される

代替手段:let と const

本当にvarでないと成り立たない場合は別ですが、そのような場面ってかなり少ないと思うので、なるべくletかconstを使うよう心掛けてください。

それぞれの役割としては以下のようになります。

  • const:再代入が不要な変数(推奨)
  • let:値の変更が必要な変数
  • var:使用しない
// letの使用例
let count = 0;
if (true) {
    let count = 1; // 新しいスコープで別の変数
}
console.log(count); // 0が出力される

// constの使用例
const API_KEY = "abc123";
// API_KEY = "xyz"; // エラー:再代入不可

ESLintでの制限

{
    "rules": {
        "no-var": "error",
        "prefer-const": "error"
    }
}

まとめ

  • varは予期せぬバグを引き起こす可能性がある
  • 新規コードではconstを優先的に使用
  • 値の変更が必要な場合のみletを使用
  • 既存のvarは徐々にlet/constに移行する

リンク:TypeScriptで非推奨になっている機能一覧