TypeScriptの設定方法

nas2025/05/18

【STEP 1】Node.js と npm のインストール（未導入の場合）

TypeScriptはnpm経由で導入するため、Node.jsをインストールしておきます。
→ https://nodejs.org/ から最新版（LTS推奨）をインストール。

Node.jsのインストールとhello worldを表示する手順

 

【STEP 2】TypeScriptをグローバルまたはローカルにインストール

グローバルにインストール（システム全体で使える）

npm install -g typescript

 

 プロジェクトローカルにインストール（推奨）

npm init -y                 # プロジェクトのpackage.jsonを作成
npm install --save-dev typescript

 

【STEP 3】tsconfig.json を作成（TypeScriptの設定ファイル）

npx tsc --init

これにより、以下のような tsconfig.json が生成されます：

{
  "compilerOptions": {
    "target": "ES2020",            // 出力JSのバージョン
    "module": "commonjs",          // モジュールシステム（Node向けならcommonjs）
    "strict": true,                // 厳格な型チェックを有効化
    "esModuleInterop": true,       // CommonJSとの互換性
    "skipLibCheck": true,          // 型定義ファイルのチェックをスキップ
    "forceConsistentCasingInFileNames": true, // 大文字小文字の一貫性
    "outDir": "./dist",            // コンパイル後の出力先
    "rootDir": "./src"             // tsファイルのルートディレクトリ
  },
  "include": ["src/**/*"],         // コンパイル対象ファイル
  "exclude": ["node_modules"]      // 除外ディレクトリ
}

 

【STEP 4】ディレクトリ構成を作成

your-project/
├── src/
│   └── index.ts        ← TypeScriptのソース
├── dist/               ← コンパイル後の出力
├── tsconfig.json       ← 設定ファイル
├── package.json
└── node_modules/

index.tsも空ファイルで作成します。

 

【STEP 5】TypeScriptのコードをコンパイル

npx tsc

これにより、index.ts が index.js に変換されます。

 

tsconfig.json よく使うオプション一覧

オプション名 説明
target 出力するJavaScriptのバージョン（例: ES5, ES2015, ES2020）
module モジュール方式（例: commonjs, esnext）
strict 厳格な型チェックを有効にする
outDir コンパイル後の出力ディレクトリ
rootDir ソースファイルのルート
esModuleInterop import fs from 'fs' のような構文を許可
sourceMap .js.map ファイルを出力（デバッグ用）
noImplicitAny 型が明示されない any をエラーにする

rootDirとoutDirに目的の場所が指定されていることを確認します。

 

package.jsonにビルドスクリプトを追加（便利）

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

npm run buildで、index.ts が index.js に変換されます。

 

開発用：自動コンパイル監視

npx tsc --watch

TypeScriptファイルを自動で監視して、変更があるたびに自動でコンパイルしてくれます。

 

JavaScriptを実行して動作確認

node dist/index.js

上記コマンドで動作確認できます。

 

関連の記事

TypeScriptとは

△上に戻る