JavaScriptとTypeScriptのプロジェクト初期化の比較

基本的な違い

JavaScriptプロジェクトの初期化（最小限）

mkdir js-project
cd js-project
npm init -y
# 必要なパッケージをインストール
npm install <必要なパッケージ>
# コード作成開始

TypeScriptプロジェクトの初期化（最小限）

mkdir ts-project
cd ts-project
npm init -y
# TypeScriptをインストール
npm install typescript --save-dev
# TypeScript設定ファイルを作成
npx tsc --init
# 必要なパッケージと型定義をインストール
npm install <必要なパッケージ>
npm install @types/<必要なパッケージ> --save-dev
# コード作成開始

TypeScriptで追加で必要な操作

1. TypeScriptコンパイラのインストール

   npm install typescript --save-dev
   

   JavaScriptでは不要なステップです。
   
   

2. TypeScript設定ファイル（tsconfig.json）の作成

   npx tsc --init
   

   JavaScriptには設定ファイルが不要です。
   
   

3. 型定義ファイルのインストール

   npm install @types/node @types/<ライブラリ名> --save-dev
   

   JavaScriptでは型定義が不要です。
   
   

4. ビルドプロセスの設定
   TypeScriptではコンパイルが必要なため、package.jsonにビルドスクリプトを追加します：

   "scripts": {
     "build": "tsc",
     "start": "node dist/index.js"
   }
   

   JavaScriptでは直接実行できるため、コンパイルステップは不要です。
   
   

5. ディレクトリ構造の考慮
   TypeScriptでは通常、ソースコードとコンパイル後のコードを分けるため：

   • src/ - TypeScriptソースコード
   • dist/ - コンパイル後のJavaScriptコード

   JavaScriptでは単一ディレクトリでも問題ありません。

まとめ：JavaScriptに比べてTypeScriptで追加される操作

1. TypeScriptコンパイラのインストール
2. tsconfig.jsonの作成と設定
3. 使用するライブラリの型定義ファイルのインストール
4. コンパイル用のビルドスクリプトの設定
5. ソースコードとコンパイル後のコードのディレクトリ分け

これらの追加ステップは、TypeScriptが静的型付け言語であり、JavaScriptにコンパイルする必要があるためです。