TypeScriptの環境構築：インストールから最初のコンパイル・実行まで

TypeScriptは、プロジェクトの開発用依存関係としてインストールすると、使うコンパイラのバージョンをプロジェクト単位で管理できます。ここではNode.jsとnpmを使い、TypeScriptを書いてJavaScriptへ変換し、実行するところまで確認します。

インストールと開発環境の設定

Node.jsとnpmを確認する

Node.jsが未導入の場合は、Node.js公式サイトで利用するOS向けのインストール方法を確認します。新しい学習環境では、サポート中のLTS版を選びます。2026年9月の確認時点ではNode.js 24系がLTSです。導入時には公式のリリース一覧も確認してください。

ターミナルで次のコマンドを実行します。コマンドの先頭にプロンプトを示す記号は含めていません。そのまま入力できます。

node --version
npm --version

両方のバージョンが表示されれば準備できています。npmを更新する必要がある場合は、使用しているNode.jsの対応範囲を確認します。TypeScriptの導入のために、npmを必ずグローバル更新する必要はありません。

プロジェクトへTypeScriptを追加する

既存のアプリとは別の場所に、学習用ディレクトリを作成します。

mkdir typescript-practice
cd typescript-practice
npm init -y
npm pkg set type=commonjs
npm install --save-dev typescript
npx tsc --version
mkdir src

--save-dev を指定すると、TypeScriptが package.json の devDependencies に登録されます。npx tsc は、このプロジェクトにインストールしたコンパイラを実行します。TypeScript公式のインストール案内

package-lock.json には解決された依存関係が記録されます。チームで共有する場合は package.json と一緒にバージョン管理し、再現する環境では npm ci を使います。グローバルインストールしたコンパイラへ依存しないため、別のプロジェクトで異なるバージョンを使いやすくなります。npm公式のインストールオプション

コンパイラの設定を書く

プロジェクトのルートに tsconfig.json を作成します。以下は、Node.js上で実行する学習用の設定です。既存のNext.jsなどのアプリに、そのまま上書きする設定ではありません。

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "rootDir": "src",
    "outDir": "dist",
    "strict": true,
    "noEmitOnError": true
  },
  "include": ["src/**/*.ts"]
}

strict は厳密な型チェック、noEmitOnError はエラーがあるときの出力抑止、outDir はJavaScriptの出力先を指定します。module の NodeNext は、Node.jsのモジュール規則に合わせて処理します。この例は package.json に "type": "commonjs" を設定しているため、通常の .ts ファイルからCommonJS形式の .js が生成されます。TypeScriptのモジュール設定

この設定とサンプルはTypeScript 4.9.4でも確認しています。新しいバージョンを導入した場合は、npx tsc --version の結果を控え、バージョンに応じた診断内容を確認してください。

最初のコードを書く

src/main.ts を作成します。

export {};

function greet(name: string): string {
  return `こんにちは、${name}さん`;
}

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

引数の name は string、戻り値も string と指定しています。例えば文字列の代わりに数値を渡すと、型チェックで呼び出しの間違いを検出できます。

ビルドして実行する

プロジェクトのルートで次を実行します。

npx tsc --project tsconfig.json
node dist/main.js

こんにちは、TypeScriptさん と表示されれば成功です。元のソースは src/main.ts、実行する生成物は dist/main.js です。

型チェックだけを行いたいときは npx tsc --project tsconfig.json --noEmit を使います。新しいNode.jsには一部のTypeScript構文を直接実行できる機能もありますが、この記事はコンパイラによる型チェックとJavaScript出力を明示的に行う流れです。

うまく動かない場合

• node が見つからない場合は、Node.jsの導入とターミナルの再起動を確認します。
• npx tsc が意図したバージョンにならない場合は、package.json のあるディレクトリで npm ls typescript を実行します。
• dist/main.js がない場合は、先にコンパイル時のエラーを解消し、src/main.ts の配置を確認します。
• 既存のプロジェクトでは、依存関係やモジュール設定を変更する前に、そのプロジェクトの実行手順を確認します。

開発環境をチームで再現する

コンパイラをプロジェクトで揃える

手元だけで動く状態を避けるには、package.jsonとpackage-lock.jsonを共有し、利用するNode.jsのバージョンも記録します。エディターでもプロジェクト内のTypeScriptを選ぶと、コマンドとの診断の違いを調べやすくなります。

最初の成功条件を小さくする

まず一つの関数をコンパイルして結果を表示し、次に引数を間違えたときの型エラーを確認します。フレームワークや多数のライブラリを追加する前に、この二つが再現できる状態を作りましょう。

関連記事

• 初めてのTypeScript：言語の特徴と基本例
• コンパイルと設定ファイルを詳しく理解する
• モジュールでファイルを分ける

TypeScriptとは・学習順・目的別の記事一覧へ戻る