過去バージョン

この記事の要点

TypeScript は Node.js + npm があれば npm install 1 コマンドで導入できる インストール方法は 3 つ: グローバル（コマンドどこでも） / プロジェクトローカル（推奨） / npx（1 回だけ実行） 推奨はプロジェクトローカル: npm install -D typescript — バージョン固定で再現性高い 初期化: npx tsc --init で tsconfig.json が生成され、コンパイル設定の雛形ができる バージョン確認: tsc --version — 本番ではpackage.json で固定するのが鉄則

TypeScript のインストール

TypeScript は JavaScript に型を加えた言語で、tsc（TypeScript Compiler）を npm 経由でインストールして使います。本記事では 3 通りのインストール方法と、その後の tsconfig.json 初期化までを順に解説します。

前提環境

• Node.js がインストール済み（推奨は LTS 版、18 以上）
• npm（Node.js に同梱）または yarn / pnpm

# バージョン確認
$ node -v
v20.10.0
$ npm -v
10.2.3

Node.js がまだの場合はnodejs.orgからインストーラを取得するか、Volta / nvm / nvm-windows といったバージョン管理ツールで導入するのが現代的です。

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

プロジェクトの package.json に開発依存として記録する方式。チーム全員が同じバージョンを使えて再現性が高く、CI/CD でも安心です。

# プロジェクトディレクトリを作成
$ mkdir my-ts-app
$ cd my-ts-app
$ npm init -y                    # package.json を生成

# TypeScript をローカルインストール (devDependencies に追加)
$ npm install --save-dev typescript

# またはエイリアス
$ npm install -D typescript

インストール後、コマンドは ./node_modules/.bin/tsc もしくは npx 経由で起動します。

$ npx tsc --version
Version 5.4.3

# npm scripts 経由が一般的
# package.json 内:
# "scripts": { "build": "tsc", "watch": "tsc --watch" }
$ npm run build

方法2: グローバルにインストール

システム全体に 1 つだけ入れる方式。ちょっとした検証や、専用 IDE が不要なシンプルなセットアップに使えます。

$ npm install -g typescript

$ tsc --version
Version 5.4.3

グローバルだとプロジェクトごとに違うバージョンが使えないのと、CI 環境にも別途インストールが必要です。業務開発ではローカル推奨。

方法3: npx で都度実行（インストールしない）

1 度限りの試用なら、インストールせず npx で実行できます。

# インストールなしで TypeScript を実行
$ npx typescript app.ts

# tsc コマンドも同様
$ npx tsc --init

npx は初回だけ自動ダウンロードし、キャッシュされます。学習用途や CI のワンショット実行に便利。

tsconfig.json の初期化

インストール後は tsc --init でコンパイル設定ファイル tsconfig.json を生成します。

$ npx tsc --init

Created a new tsconfig.json with:
  target: ES2016
  module: CommonJS
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

You can learn more at https://aka.ms/tsconfig

生成された tsconfig.json をプロジェクトの規約に合わせて編集します。最低限よく触る項目:

{
  "compilerOptions": {
    "target": "ES2022",            // 出力 JS のバージョン
    "module": "NodeNext",          // モジュール形式
    "moduleResolution": "NodeNext",
    "strict": true,                // 厳格モード（推奨）
    "esModuleInterop": true,       // CommonJS 互換性
    "skipLibCheck": true,          // 型定義ファイルの検査をスキップ
    "outDir": "./dist",            // 出力先
    "rootDir": "./src",            // 入力ルート
    "sourceMap": true,             // デバッグ用ソースマップ
    "declaration": true            // .d.ts も出力
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

動作確認: Hello World

// src/index.ts
function greet(name: string): string {
    return `Hello, ${name}!`;
}

console.log(greet('TypeScript'));

$ npx tsc
$ node dist/index.js
Hello, TypeScript!

ウォッチモードで開発する

ファイル保存時に自動コンパイルするwatch モードが便利。

$ npx tsc --watch

# 別ターミナルでファイルを編集すると自動で再コンパイル

ts-node で .ts を直接実行

コンパイルせずに .ts ファイルを直接実行できる開発用ランナー。

$ npm install -D ts-node

$ npx ts-node src/index.ts
Hello, TypeScript!

Node.js 22.6+ には標準で .ts 実行サポート (--experimental-strip-types) が入っています。将来的にはこちらが主流に。

主要 npm scripts のテンプレート

{
  "scripts": {
    "build":   "tsc",
    "watch":   "tsc --watch",
    "dev":     "ts-node src/index.ts",
    "start":   "node dist/index.js",
    "clean":   "rm -rf dist",
    "type-check": "tsc --noEmit"
  }
}

バージョンの固定と更新

# 特定バージョンをピン留め
$ npm install -D typescript@5.4.3

# 最新版に更新
$ npm install -D typescript@latest

# package.json の指定範囲内で最新へ
$ npm update typescript

業務プロジェクトでは ~5.4.0 のようなマイナーバージョン固定で運用するのが鉄板。TypeScript は新バージョンで型が厳しくなることがあるため、勝手に上がるとビルドが落ちるリスクがあります。

FAQ

Q: tsc: command not found
A: グローバルでは PATH 不通、ローカルでは node_modules/.bin 経由のはず。npx tsc または npm run 経由で実行する。

Q: グローバルとローカル両方入れたら？
A: ローカルが優先される（npm scripts や npx 経由で実行する場合）。バージョン違いに注意。

Q: yarn / pnpm でもインストールできる？
A: 可能。yarn add -D typescript / pnpm add -D typescript。コマンドはそれぞれ yarn tsc / pnpm tsc。

Q: VS Code との連携は？
A: VS Code 内蔵の TypeScript は古いことがあるので、コマンドパレットで「TypeScript: Select TypeScript Version」→「Use Workspace Version」を選びプロジェクトのバージョンを使う。

Q: ブラウザ用には？
A: tsc で生成した JS をそのままバンドラ (Vite / Webpack) に渡すか、Vite / esbuild が TypeScript を直接処理できる構成にする。新規プロジェクトは Vite テンプレが手軽。