【TypeScript】インストール方法や開発環境構築を徹底解説！

本記事では、TypeScriptにてWebアプリケーションを動作させる開発環境構築を解説します。

上記の目的を達成したい人におすすめです。

TypeScriptの開発環境に必要なもの

TypeScriptを利用するためには、以下の開発環境を整える必要があります。

ここでは、最低限の開発環境構築について解説していきます。

Node.jsは、JavaScriptを動かす実行環境になります。

Node.jsをインストールすることで、JavaScriptを実行するnodeコマンド、パッケージをインストールするnpmコマンド（Node Package Manager）が使えるようになります。

TypeScriptをインストールするためには、npmコマンドを使います。

また、TypeScriptをインストールするとTypeScriptをコンパイルするtscコマンドが使えるようになります。

さらに、プログラミング用のコードエディタであるVSCode（Visual Studio Code）は、コマンドを実行できるターミナルが付属しているため、編集したソースコードのコンパイル/実行をVSCode上で実施できます。

tscコマンドとnodeコマンド

ターミナルにてtscコマンドを実行すると、TypeScriptがコンパイルされJavaScriptファイル（.jsファイル）が生成されます。

それをnodeコマンドで実行するのが最もシンプルな使い方になります。

各コマンドの例となる書式は以下になります。

tsc app.ts
node app.js

tscコマンドには様々なオプションが用意されており、設定ファイルを利用することでアプリ開発が捗るよう設計されています。

Node.jsのインストール方法

公式サイトから該当するPC向けのインストーラーをダウンロードしてください。

• https://nodejs.org/ja/download

インストーラーをダウンロードできたら、適宜PCにてインストールを開始してください。

インストール手順として、初期画面が表示されたら「Next」をクリックしてください。

ライセンス同意画面では、「I accept the terms in the License Agreement」にチェックを付け、「Next」をクリックしてください。

インストール先では、適宜フォルダーの指定を実施したのち、「Next」をクリックしてください。

インストール内容の選択画面では、基本的にデフォルトで問題ないため、「Next」をクリックしてください。

インストール開始画面まできたら、「Install」をクリックしてください。

インストールが完了したら、「finish」をクリックしてインストーラーを終了します。

Node.jsのバージョン確認方法

ターミナルから以下のコマンドを実行すると、インストールされているNode.jsのバージョンを確認できます。

node -v

実際に、バージョンが表示されたらインストール完了です。

TypeScriptのインストール方法

ターミナルからnpmコマンドを実行すると、最新バージョンのTypeScriptがインストールされます。

npm install -g typescript@latest

以下のコマンドを実行すると、バージョンを確認できます。

tsc -v

実際に、TypeScriptのバージョンが表示されたら、インストール完了です。

VSCodeのインストール方法

VSCodeのパッケージをダウンロードして、自身のPCにインストールします。

以下のURLからVSCodeをダウンロードできます。

• https://code.visualstudio.com/

PCのOSに合ったパッケージの安定版（Stable）を選択してインストーラーをダウンロードします。

ダウンロードしたインストーラーを起動すると、使用許諾画面が表示されるため、「同意する」にチェックし「次へ」をクリックします。

追加タスクの選択画面では、必要なオプションを選んだら「次へ」をクリックします。

インストール準備の完了画面で「インストール」をクリックします。

インストールを終えたら、「完了」をクリックします。

これで、VSCodeのインストールが完了します。

ここまでがTypeScriptにおける最低限の開発環境構築になります。

そのため、今後の開発環境を充実させるために必要なパッケージや拡張機能などを追加することで効率的なアプリケーション開発を実現できます。

TypeScriptにおけるおすすめの開発環境

TypeScriptを学習あるいは利用する際、TypeScript自体を深く理解する必要があります。

しかし、それだけでは実務上不十分になってしまいます。

そもそもTypeScriptだけでなく、数多くの技術スタックを組み合わせ開発を進めるためです。

そのため、TypeScriptを理解しながら、取り巻くエコシステムも理解すると最適な開発環境を構築できます。

UIライブラリ・フレームワーク

基本的にHTML/CSS/JavaScriptを利用すれば、UIを持つWebアプリケーションを作れます。

ただし、複雑なUIに対してJavaScriptのみで開発するのは作業効率が悪いです。

そのため、JavaScriptではUI作成がしやすいライブラリ/フレームワークが数多く存在します。

ライブラリ/フレームワークを活用すると、少量のコード実装や保守性が高いコードを記述できるメリットにつながります。

型定義ファイル

型定義ファイルは、ライブラリの型情報を記述したファイルです。

TypeScriptの強みとして、型チェックによりプログラムの不具合が発見できます。

しかし、JavaScriptのみのライブラリではちぇえく材料にする型情報が付いていません。

ライブラリと別で型定義ファイルを入手すれば、TypeScriptで型チェックができて保守性につながります。

実行環境

JavaScriptの実行環境は、ブラウザとサーバーの種類はあります。

レンダリングエンジン内部にあるJavaScriptエンジンにて評価/実行されます。

また、サーバーの実行環境はNodeやDenoが存在します。

Nodeは現在最も有名なJavaScript実行環境であり、DenoはTypeScriptのまま実行できる注目を集める環境です。

開発ツール

おそらく開発ツールは最も利用できるパターンが多く、何を選べばよいか初心者にとって迷うポイントです。

以下の項目をポイントに自身の環境を最適化していきましょう。

多くの開発ツールで迷ってしまいますが、開発環境を充実することで間違いなく開発効率が高まります。

TypeScriptの欠点とは

TypeScriptを利用する上で、TypeScriptで解決できない場面を把握しておくことは重要です。

開発時にTypeScriptの欠点を理解することで、改善策が立てやすいからです。

TypeScriptの言語特性からアプローチできるかどうかを知っておきましょう。

上記の各欠点をさらに詳しく理解したい人は、「【TypeScript】言語の難易度やJavaScriptと比較して徹底解説！」を一読ください。

あわせて読みたい

【TypeScript】言語の難易度やJavaScriptと比較して徹底解説！ TypeScriptは、プログラミング言語の中で静的型システムを備えたものになります。 フロントエンド言語としてJavaScriptが存在しますが、JavaScriptを一部強化するために…

TypeScriptの学習難易度

TypeScriptは、静的型付け以外の部分はJavaScriptであるため、JavaScriptと比較すると学習難易度高めです。

つまり、JavaScriptの学習＋型定義を理解すれば文法レベルであれば問題ないです。

また、学習難易度は比較的高めですが、利用するべきメリットも存在します。

さらに詳しくTypeScriptの人気を知りたい人は、「【TypeScript】難しい理由と解決策を徹底解説！」を一読ください。

あわせて読みたい

【TypeScript】難しい理由と解決策を徹底解説！ 昨今、トレンドはあれど様々なプログラミング言語が存在し利用されています。 また、議題に上がるTypeScriptに対して「難しい・わかりづらい」などの意見も目にします。…