TypeScript（タイプスクリプト）は、Microsoftによって開発されたオープンソース（＊１）のプログラミング言語です。TypeScriptはJavaScriptのスーパーセットであり、JavaScriptに静的型付けや最新のECMAScript機能を追加したものです。これにより、JavaScriptで書かれたコードがそのままTypeScriptとして動作し、追加の機能を利用することでより安全で生産的な開発が可能になります。
＊１：オープンソースとは、ソフトウェアのソースコードが公開されており、誰でも自由に使用、改良、再配布できるライセンス形態を指します。
TypeScriptの環境構築
1. Node.jsとnpmのインストール
TypeScriptをインストールするためには、まずNode.jsとnpm（Node Package Manager）が必要です。Node.jsにはnpmが含まれています。
Node.jsのインストール
Node.jsの公式サイトからインストーラーをダウンロードしてインストールします。
インストールが完了したら、以下のコマンドでインストールが成功したか確認します。
node -v
npm -v2. TypeScriptのインストール
npmを使用してTypeScriptをグローバル（-g）にインストールします。
TypeScriptをグローバルにインストールするとは、npm（Node Package Manager）を使用してTypeScriptパッケージをシステム全体にインストールすることを意味します。具体的には、次のようなことが行われます：
- コマンドラインからの使用可能化: ターミナルやコマンドプロンプトから、
tscコマンド（TypeScript Compilerの略）を直接実行できるようになります。 - パスの設定: TypeScriptの実行ファイルがシステムのパスに追加されます。これにより、どのディレクトリでも
tscコマンドを実行できるようになります。 - プロジェクトの独立性: グローバルにインストールすることで、特定のプロジェクトに対してTypeScriptのバージョンを気にせず、一貫した開発環境を維持できます。
グローバルインストールは、開発者が複数のプロジェクトで共通してTypeScriptを利用する場合や、コマンドラインでTypeScriptの機能を直接使用したい場合に便利です。
npm install -g typescript
インストールが完了したら、以下のコマンドでインストールが成功したか確認します。
tsc -v3. プロジェクトのセットアップ
次に、TypeScriptプロジェクトをセットアップします。mkdirで新しいディレクトリ（ディレクトリとは、コンピュータ上でファイルを整理・管理するための「フォルダ」のことです）を作成し、cdにてその中に移動します。
mkdir my-typescript-project
cd my-typescript-project
cd: これは「change directory」の略で、現在の作業ディレクトリを変更するためのコマンドです。
もし、デスクトップにフォルダを作りたい場合は、下記のように命令します。
各オペレーティングシステムでデスクトップにフォルダを作成するコマンドは次の通りです。
- Windows（コマンドプロンプトまたはPowerShell）
cd %USERPROFILE%\Desktopmkdir new-folder
%USERPROFILE%: これは環境変数と呼ばれるもので、現在ログインしているユーザーのプロファイルディレクトリのパスを指します。環境変数は、システム全体で共通して使用される特定の情報（パス、設定など）を格納するために使われます。
- ユーザーが
johnという名前でログインしている場合、%USERPROFILE%\DesktopはC:\Users\john\Desktopに展開されます。
new-folder は任意の名前に変更できますので、目的に応じて適切な名前を指定してください。
- Mac（ターミナル）
cd ~/Desktopmkdir new-folder
npmプロジェクトの初期化
npmプロジェクトを初期化します。これにより、「new-folderフォルダ」にpackage.jsonファイルが作成されます。
cd new-foldernpm init -y
npmプロジェクトを初期化する主な理由は、プロジェクトのメタデータを管理し、依存関係を追跡するためです。具体的な理由を以下に挙げます。
- パッケージ管理:
npm initコマンドを使用することで、package.jsonファイルが作成されます。このファイルにはプロジェクトのメタデータ（プロジェクト名、バージョン、作者情報など）が含まれます。また、依存関係やスクリプトなども定義することができます。 - 依存関係の追跡:
package.jsonにはプロジェクトが依存するライブラリやツールの情報が記録されます。これにより、他の開発者がプロジェクトをクローンしたり、再現したりする際に依存関係を一元管理できます。 - スクリプトの定義:
package.json内のscriptsセクションには、プロジェクトで使用するカスタムスクリプト（ビルド、テスト、デプロイなど）を定義することができます。これにより、開発フローを自動化し、コマンドラインから簡単に実行できるようになります。 - ツールの利用: npmを使用することで、プロジェクトに必要なパッケージやツールを簡単にインストールし、管理することができます。また、開発環境の標準化やメンテナンスが容易になります。
TypeScriptをプロジェクトに追加
プロジェクトにTypeScriptをローカルインストールします。これにより「package-lock.json」ファイルが作られます。
npm install typescript --save-devプロジェクトにTypeScriptをローカルインストールする理由は以下の通りです：
- バージョン管理: ローカルにTypeScriptをインストールすることで、プロジェクトごとに異なるバージョンのTypeScriptを使用できます。これにより、プロジェクトの依存関係や開発環境を一元管理し、バージョンの互換性を確保できます。
- プロジェクトのポータビリティ: ローカルにTypeScriptをインストールすることで、他の開発者がプロジェクトをクローンしたり、再現したりする際に、特定の環境に依存しないようにします。
- 依存関係の明確化:
package.jsonファイルにTypeScriptを含めることで、プロジェクトの依存関係が明確になります。新しい開発者がプロジェクトに参加したり、CI/CDパイプラインを構築したりする際に便利です。 - 開発環境の一貫性: ローカルにTypeScriptをインストールすることで、開発環境を一貫した状態に保ちます。すべての開発者が同じバージョンのTypeScriptを使用することで、開発の一貫性と品質管理が向上します。
これらの理由から、プロジェクトごとにTypeScriptをローカルにインストールすることが推奨されています。
4. TypeScriptコンパイラの設定
tsconfig.jsonファイルを作成して、TypeScriptコンパイラの設定を行います。
TypeScriptコンパイラとは、TypeScriptのソースコードをJavaScriptに変換するソフトウェアです。TypeScriptで書かれたコード（.tsファイル）を、ブラウザやNode.jsが理解できるJavaScript（.jsファイル）に変換する役割を持ちます。
npx tsc --initこれにより、基本的な設定が含まれたtsconfig.jsonファイルが生成されます。このファイルを編集して、プロジェクトに適した設定を行います。
5. エディタの設定
開発にはVisual Studio Code（VS Code）をおすすめします。VS CodeはTypeScriptのサポートが充実しており、インストールと設定が簡単です。
VS Codeのインストール
VS Codeの公式サイトからインストーラーをダウンロードしてインストールします。
TypeScriptプラグインのインストール
VS CodeにはTypeScriptのサポートが組み込まれていますが、必要に応じて追加の拡張機能をインストールすることもできます。
ESLint：コードの品質をチェックするための拡張機能。Prettier - Code formatter：コードの整形を自動化するための拡張機能。
6. TypeScriptファイルの作成とコンパイル
プロジェクトディレクトリにTypeScriptファイル（例：index.ts）を作成し、以下のように簡単なコードを書きます。
// index.ts
let message: string = "Hello, TypeScript!";
console.log(message);
コンパイルしてJavaScriptファイルに変換します。
npx tsc
これにより、index.jsファイルが生成されます。生成されたJavaScriptファイルをNode.jsで実行します。結果、Hello, TypeScript!と出力されます。
まとめ
以上の手順で、TypeScriptの開発環境を構築できます。これで基本的な環境は整いましたので、実際のプロジェクトでTypeScriptを使って開発を進めることができます。
