【TypeScriptの基礎を学ぶ】JavaScriptと比較して起こりがちなミスを防ごう！

JavaScriptの限界を超える！TypeScript初めの一歩　第1回

第2章　TypeScriptとは何か？ なぜ必要か？

　TypeScriptは、JavaScriptのスーパーセットのプログラミング言語です。スーパーセットとは、既存の言語の仕様を全て含んだ上で、拡張された上位互換であることを意味します。TypeScriptは、JavaScriptに静的型付けの機能を加えてくれます。

　TypeScriptは、2012年にマイクロソフトによって公開されました。当時、JavaScriptを拡張したAltJSと呼ばれる言語が複数ありました。理由は、2005年に登場したGoogle マップに象徴されるAJAXブームで、JavaScriptによるクライアント側の処理のリッチ化が進められたことです。そうした環境の変化に対応するために、より生産性が高く、堅牢な言語が求めました。

　AltJSには、CoffeeScriptやDartなど複数ありましたが、現在ではTypeScriptが主流になっています。理由はいくつかありますが、型システムがユーザーの求めていたものであったこと、既存のJavaScriptの記法を破壊しないスーパーセットであること、マイクロソフトによる継続的で積極的なメンテナンスがあったことなどが挙げられます。

　TypeScriptの特徴を挙げます。

• JavaScriptのスーパーセット（完全な上位互換）
• 静的型付け言語（事前に静的に検査可能）
• エコシステムの充実（エディターのサポート、多数のライブラリ）

　「静的型付け」については、この中でも特に重要です。この連載では、静的型付けの書き方と、事前検査を含めた使い方を中心に話をしていきます。

　エディターのサポートは、VSCodeでのサポートが大きいです。TypeScriptとVSCodeは、同じマイクロソフト社製です。VSCodeでは、標準でTypeScriptの記法で書いたコードの型チェックをおこなえます。コンパイルするまでもなく、コードの問題部分を洗い出せます。

第3章　環境構築

　今回の記事では、開発環境としてVisual Studio CodeとNode.jsを使います。

Visual Studio Codeの導入

　Visual Studio Code（略称：VSCode）は、無料で利用できるコードエディターです。非常に多くの開発者に利用されています。最近はAIコードエディターとしても進化しています。

　VSCodeの導入は、ダウンロードしてインストールすれば終了します。

• Visual Studio Code - Code Editing. Redefined

Node.jsの導入

　Node.jsは、サーバーやローカルで動作するJavaScriptの実行環境です。

　JavaScriptはWebブラウザーで利用されることが多いです。しかしNode.jsを利用すれば、Webブラウザーなしで動作して、ファイルアクセスや通信を簡単におこなうことができます。

• Node.js — Run JavaScript Everywhere

　ダウンロードページでは、2025年現在2つの方法が紹介されています。

• バージョンマネージャーfnmを使ってダウンロードする方法
• ビルド済みのNode.jsを利用する方法

　バージョンマネージャーの設定に慣れていない場合は、ビルド済みのNode.jsを使うとよいです。ファイルをダウンロードしてインストールするだけで、環境構築が終わります。

fnm＋Windows＋PowerShellの場合

　fnmを使ってダウンロードする方法は、環境によっては手間が掛かります。Webページに記載されているコマンドだけでなく、他の設定も必要になります。WindowsのPowerShellでは、profileファイルを探して、コマンドを自分で書き加える（あるいは記入する）必要があります。

　念のために、fnmを、WindowsのPowerShellで使う場合の設定方法を書いておきます。

1. VSCodeを開き、「Ctrl+@」でターミナルを開く。
2. winget install Schniz.fnmを実行する。
   • 「ソース契約条件に同意しますか？」という質問が出る場合はYを選択。
3. fnm install 22を実行（数値はNode.jsのサイトを見て、最新のメジャーバージョンに差し換え）。
   • C:\Users\<ユーザー名>\AppData\Roaming\fnm\node-versionsにv22.15.1のようなフォルダー（100MB程度）がダウンロードされる。
4. $profileを実行して、PowerShellのプロファイル ファイルのパスを得る。
   • C:\Users\<ユーザー名>\Documents\PowerShell\Microsoft.PowerShell_profile.ps1のようなパスが表示される。このパスは、PowerShell 6.0以降と、それ以前では違う。
5. Microsoft.PowerShell_profile.ps1に、次の起動処理を追加。
   • fnm env --use-on-cd --shell powershell | Out-String | Invoke-Expression
6. いったんVSCodeを全て終了して再起動。「Ctrl+@」でターミナルを開く。
7. fnm currentを実行して、現在選択しているNode.jsのバージョンを確かめる。
   • バージョンの変更はfnm use 22のようにおこなう。
8. node -vを実行して、fnm currentと同じバージョンになっていることを確かめる。

　バージョンマネージャーfnmを使ってインストールした場合は、Windowsのコマンドプロンプト（cmd.exe）からは、Node.jsを利用できません。別途、環境設定を読み込む起動スクリプトを作成して、そのスクリプトからコマンドプロントを利用する必要があります。

　こうした細かな設定方法については、fnmのGitHubのページに詳細がまとまっています。

• Schniz/fnm: 🚀 Fast and simple Node.js version manager, built in Rust

TypeScriptの導入

　次は、TypeScriptの導入です。こちらは、VSCodeのターミナルから導入します。

• TypeScript: JavaScript With Syntax For Types.

　まずは開発用のフォルダーを作り、VSCodeで開きます。そして「Ctrl+@」でターミナルを開き、TypeScriptのインストールをおこないます。だいたい22MBほどのサイズになります。

ローカルに開発用としてインストール

npm install typescript --save-dev

　よく使うなら、グローバルにインストールする手もあります。

グローバルにインストール

npm install -g typescript

　プロジェクトごとにTypeScriptのバージョンが違う場合、それぞれのプロジェクトで使える機能が異なります。バージョン依存を考えて、ローカルにインストールする考えもあります。

　ローカルにインストールしている場合はnpx tsc -vでバージョンを確認できます。グローバルにインストールしている場合は、tsc -vで確認できます。

　無事にバージョンが表示されたら、TypeScriptの導入は成功です