【最新版】Visual Studio CodeでTypeScriptのバージョンを確認・更新する方法2024年3月版

Visual Studio Codeで利用するTypeScriptのバージョン確認と更新方法

TypeScript バージョンの確認

方法1：コマンドパレットを使用する

1. Ctrl + Shift + P キーを押してコマンドパレットを開きます。
2. TypeScript: バージョン と入力してコマンドを実行します。
3. 現在のTypeScriptバージョンと、インストールされている他のバージョンのリストが表示されます。

方法2：ステータスバーを使用する

1. Visual Studio Code の下部にあるステータスバーを確認します。
2. TypeScript のバージョン情報が表示されているはずです。

方法3：tsconfig.json ファイルを使用する

1. プロジェクトフォルダにある tsconfig.json ファイルを開きます。
2. "compilerOptions" プロパティの中の "target" または "lib" の値を確認します。
3. これらの値は、使用されている TypeScript バージョンに対応しています。

TypeScript バージョンの更新

Visual Studio Codeで利用するTypeScriptバージョンを更新するには、以下の方法があります。

1. 使用可能なTypeScript バージョンのリストが表示されます。
2. 更新したいバージョンを選択してインストールします。

方法2：拡張機能を使用する

1. Visual Studio Code Marketplace で "TypeScript Version Manager" という拡張機能を検索してインストールします。
2. 拡張機能を有効化します。
3. ステータスバーにある拡張機能アイコンをクリックして、更新したいバージョンを選択します。

方法3：手動でインストールする

1. ダウンロードしたファイルを解凍します。
2. 解凍したフォルダ内の bin フォルダにある tsc.exe ファイルを、Visual Studio Code の extensions フォルダ内にコピーします。

注意事項

• TypeScript バージョンを更新すると、コードの互換性問題が発生する可能性があります。
• 更新前に、必ずプロジェクトをバックアップすることをおすすめします。

補足

• 上記の手順は、Visual Studio Code バージョン 1.72.0 以降で使用できます。
• TypeScript バージョン 4.7 以降では、tsc.exe ファイルの名前が typescript.exe に変更されています。

TypeScript サンプルコード

ファイル名：hello.ts

// Hello World プログラム

function helloWorld(): void {
  console.log("Hello, World!");
}

helloWorld();

実行方法

1. hello.ts ファイルを保存します。
2. ターミナルを開き、hello.ts ファイルがあるディレクトリに移動します。
3. 以下のコマンドを実行します。

tsc hello.ts

1. hello.js という名前のファイルが作成されます。
2. 以下のコマンドを実行して、プログラムを実行します。

node hello.js

出力結果

Hello, World!

• 上記のサンプルコードを参考に、TypeScript の学習を始めてみましょう。
• TypeScript に関する情報は、公式ドキュメントやサンプルコードなどを参考に学習することをおすすめします。

TypeScript バージョン確認と更新方法のその他の方法

バージョン確認

• VS Code の設定画面

  1. Ctrl + , キーを押して設定画面を開きます。
  2. 検索バーに typescript.version と入力します。
  3. "TypeScript のバージョン" という項目に、現在のバージョンが表示されます。

• package.json ファイル

  プロジェクトフォルダに package.json ファイルがある場合、以下の手順でバージョンを確認できます。

  1. "devDependencies" または "dependencies" プロパティの中に "typescript" キーがあるかどうかを確認します。
  2. キーが存在する場合、その値がインストールされている TypeScript バージョンです。

バージョン更新

• VS Code の拡張機能マネージャー

  1. "TypeScript" 拡張機能を選択します。
  2. "詳細" タブを開きます。
  3. "更新" ボタンをクリックして、最新バージョンに更新します。

• npm または yarn

  ターミナルを開き、以下のコマンドを実行して、TypeScript を更新できます。

  npm install -g typescript
  

  または

  yarn global add typescript
  

上記以外にも、さまざまな方法で TypeScript バージョンを確認・更新できます。

自分に合った方法を選択して、TypeScript 開発を快適に進めてください。