TypeScriptは、JavaScriptを強力に進化させるツールとして、幅広い開発現場で利用されています。
本記事では、TypeScriptのプロジェクトを作成し、を設定する基本的な手順を解説します。
なお、使用するOSはWindows 11、IDEはVisual Studio Code（VS Code）を前提としています。
目次
はじめに
TypeScriptを使用して開発する際、プロジェクト単位で環境を整え、設定を管理することが重要です。
その中心的な役割を果たすのがという設定ファイルです。
本記事では以下の内容を扱います。
- TypeScriptプロジェクトを作成する
- 設定ファイル「tsconfig.json」を生成し、基本的な設定を行う
TypeScriptプロジェクトの作成
プロジェクト用のフォルダ（ディレクトリ）を作成する
Windowsのファイルエクスプローラーを使う方法と、コマンドプロンプトでの作成方法の２通りがあります。
エクスプローラーを使う方法
- Windowsのファイルエクスプローラーを開き、プロジェクトを作成したいディレクトリに移動します。
- 新しいフォルダを作成し、フォルダ名を設定します。
コマンドプロンプトを使う方法
コマンドプロンプトを開き、プロジェクトを作成したいディレクトリに移動します。
例として「tswork」というディレクトリにしています。
cd c:\xxx\tsworkプロジェクト用のディレクトリを作成するコマンドを実行します。
例として「myproject」という名前で作成しています。
mkdir myproject作成したプロジェクトディレクトリに移動します。
cd myprojectTypeScriptのセットアップ
ここからは、VS Codeを使って作業を進めていきます。
VS Codeでフォルダ（ディレクトリ）を開く
VS Codeを起動します。
図のとおり、「File」⇒「Open Folder…」の順にメニューを選択します。
前項で作成したフォルダ（ディレクトリ）を選択し、「フォルダの選択」ボタンをクリックします。
以上の操作で、プロジェクト用のフォルダをVS Codeで開くことができました。
TypeScriptのインストール
VS Codeのターミナルを開きます（ショートカット：Ctrl + @）。
グローバルにインストール済の場合
「TypeScriptの概要とインストール（Windows）」の記事ですでにインストールされている方は、インストールの必要はありませんので、次の作業を実施してください。
VS Codeのターミナルで、次のコマンドを実行してTypeScriptのバージョンを確認します。
tsc -vバージョンが表示されたら、間違いなくTypeScriptがインストールできているので、次のコマンドで tsconfig.json を生成します。
tsc --initまだTypeScriptがインストールされていない場合
VS Codeのターミナルで、次のコマンドを実行してTypeScriptをインストールします。
npm install typescript --save-dev上記のコマンドで、プロジェクト内の node_modules にTypeScriptがインストールされます。
続いて、次のコマンドで tsconfig.json を生成します。
npx tsc --init上記のコマンドで、プロジェクトルートに tsconfig.json が生成されます。
npx を使うことで、プロジェクト内にインストールされたTypeScriptを利用してコマンドを実行できます。
tsconfig.jsonの内容
作成された tsconfig.json を開き、内容を編集することにより、TypeScriptの各種設定が可能です。
あまりの行数に面食らうかもしれませんが、多くの行はコメントアウトされており、有効な設定は少ないはずです。
主な設定項目を説明します。
まず、私の環境で設定が有効になっていたものは以下のとおりです。
"target": "es2016"- TypeScriptコードをどのJavaScriptバージョン（ECMAScript仕様）にコンパイルするかを指定します。
- 私の環境では「es2016」となっていますが、環境によってデフォルト値が異なる場合があります。
"module": "commonjs"- モジュールの形式を指定します。
"esModuleInterop": true- ESモジュールスタイルの文を使いやすくし、CommonJSとの互換性を向上させる設定です。
"forceConsistentCasingInFileNames": true- ファイルやファイルパスの大文字・小文字を区別し、一貫性を強制するための設定です。
"strict": true- 型チェックを厳密にする設定です。
"skipLibCheck": true- 型チェック時に型定義ファイル（.d.tsファイル）の検証をスキップして、コンパイル速度を向上させる設定です。
次に、デフォルトでは無効（コメントアウト）されている設定ですが、有効にしておくと当ブログでの学習がスムーズにいく項目は次のとおりです。
"experimentalDecorators": true- デコレータの使用を有効にする設定です。
"emitDecoratorMetadata": true- デコレータのメタデータを出力する。
まとめ
TypeScriptプロジェクトの作成との基本設定を行う手順を解説しました。
この手順をマスターすることで、TypeScriptを使った開発を効率的に進められるようになります。
本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメントいただければ幸いです。
それでは、最後までお読みいただき、ありがとうございます。
コメント