第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の導入は、ダウンロードしてインストールすれば終了します。
Node.jsの導入
Node.jsは、サーバーやローカルで動作するJavaScriptの実行環境です。
JavaScriptはWebブラウザーで利用されることが多いです。しかしNode.jsを利用すれば、Webブラウザーなしで動作して、ファイルアクセスや通信を簡単におこなうことができます。
ダウンロードページでは、2025年現在2つの方法が紹介されています。
- バージョンマネージャーfnmを使ってダウンロードする方法
- ビルド済みのNode.jsを利用する方法
バージョンマネージャーの設定に慣れていない場合は、ビルド済みのNode.jsを使うとよいです。ファイルをダウンロードしてインストールするだけで、環境構築が終わります。
fnm+Windows+PowerShellの場合
fnmを使ってダウンロードする方法は、環境によっては手間が掛かります。Webページに記載されているコマンドだけでなく、他の設定も必要になります。WindowsのPowerShellでは、profileファイルを探して、コマンドを自分で書き加える(あるいは記入する)必要があります。
念のために、fnmを、WindowsのPowerShellで使う場合の設定方法を書いておきます。
- VSCodeを開き、「Ctrl+@」でターミナルを開く。
-
winget install Schniz.fnm
を実行する。- 「ソース契約条件に同意しますか?」という質問が出る場合はYを選択。
-
fnm install 22
を実行(数値はNode.jsのサイトを見て、最新のメジャーバージョンに差し換え)。-
C:\Users\<ユーザー名>\AppData\Roaming\fnm\node-versions
にv22.15.1
のようなフォルダー(100MB程度)がダウンロードされる。
-
-
$profile
を実行して、PowerShellのプロファイル ファイルのパスを得る。-
C:\Users\<ユーザー名>\Documents\PowerShell\Microsoft.PowerShell_profile.ps1
のようなパスが表示される。このパスは、PowerShell 6.0以降と、それ以前では違う。
-
-
Microsoft.PowerShell_profile.ps1
に、次の起動処理を追加。-
fnm env --use-on-cd --shell powershell | Out-String | Invoke-Expression
-
- いったんVSCodeを全て終了して再起動。「Ctrl+@」でターミナルを開く。
-
fnm current
を実行して、現在選択しているNode.jsのバージョンを確かめる。-
バージョンの変更は
fnm use 22
のようにおこなう。
-
バージョンの変更は
-
node -v
を実行して、fnm current
と同じバージョンになっていることを確かめる。
バージョンマネージャーfnmを使ってインストールした場合は、Windowsのコマンドプロンプト(cmd.exe)からは、Node.jsを利用できません。別途、環境設定を読み込む起動スクリプトを作成して、そのスクリプトからコマンドプロントを利用する必要があります。
こうした細かな設定方法については、fnmのGitHubのページに詳細がまとまっています。
TypeScriptの導入
次は、TypeScriptの導入です。こちらは、VSCodeのターミナルから導入します。
まずは開発用のフォルダーを作り、VSCodeで開きます。そして「Ctrl+@」でターミナルを開き、TypeScriptのインストールをおこないます。だいたい22MBほどのサイズになります。
npm install typescript --save-dev
よく使うなら、グローバルにインストールする手もあります。
npm install -g typescript
プロジェクトごとにTypeScriptのバージョンが違う場合、それぞれのプロジェクトで使える機能が異なります。バージョン依存を考えて、ローカルにインストールする考えもあります。
ローカルにインストールしている場合はnpx tsc -v
でバージョンを確認できます。グローバルにインストールしている場合は、tsc -v
で確認できます。
無事にバージョンが表示されたら、TypeScriptの導入は成功です