【環境構築】TypeScriptの開発環境

TypeScriptを使うには、まずNode.jsが必要です。Node.jsに付属する『npm』（パッケージマネージャ）を使ってTypeScriptをインストールします。

OS	インストール方法
Windows	nodejs.org からインストーラーをダウンロードして実行します。LTS版を選んでください。
macOS	公式サイトのインストーラーか、Homebrew で『brew install node』を実行します。

node --version
v20.14.0
npm --version
10.7.0

npm を使ってTypeScriptをグローバルにインストールします。

npm install -g typescript

インストール後、以下のコマンドでバージョンを確認します。

tsc --version
Version 5.5.3

TypeScriptは直接実行できません。『tsc』コマンドでJavaScriptにコンパイルしてから、『node』コマンドで実行します。

テキストエディタで以下の内容を『hello.ts』として保存します。

// hello.ts
const greeting: string = "Hello, TypeScript!";
console.log(greeting);

const add = (a: number, b: number): number => {
    return a + b;
};

console.log("1 + 2 =", add(1, 2));

ターミナルで以下のコマンドを順に実行します。

TypeScript を JavaScript にコンパイルします。

tsc hello.ts

コンパイルで生成された hello.js を実行します。

node hello.js
Hello, TypeScript!
1 + 2 = 3

コンパイルに成功すると、同じフォルダに『hello.js』ファイルが生成されます。

『ts-node』を使うと、コンパイルと実行を1コマンドで行えます。学習中や動作確認に便利です。

ts-node をインストールします。

npm install -g ts-node

TypeScript ファイルを直接実行します。

ts-node hello.ts
Hello, TypeScript!
1 + 2 = 3

ts-node は内部でコンパイルと実行をまとめて行うため、『tsc』→『node』の手順が不要になります。

プロジェクトが大きくなってきたら、『tsconfig.json』でコンパイル設定を管理します。以下のコマンドで初期設定ファイルを生成できます。

tsc --init

主な設定項目を紹介します。

オプション	説明
target	コンパイル先のJavaScriptのバージョンを指定します（例: "ES2020"）。
strict	厳密な型チェックを有効にします。『true』にすると型の安全性が高まります。
outDir	コンパイル後のJSファイルの出力先フォルダを指定します。

ターミナルで『tsc: command not found』と表示される場合は、npm のグローバルインストール先に PATH が通っていない可能性があります。以下の手順で確認・設定してください。

1. npm のグローバルインストール先を確認します

npm のグローバルインストール先を確認します。

npm config get prefix

tsc コマンドの場所を確認します。

which tsc

見つからない場合、よくあるインストール先を確認します。

ls $(npm config get prefix)/bin/tsc

2. 使用しているシェルを確認します

echo $SHELL

『/bin/zsh』と表示されたら『~/.zshrc』、『/bin/bash』と表示されたら『~/.bashrc』に設定を書きます。

3. PATH に追加します

npm のグローバルインストール先の『bin』フォルダを PATH に追加します。

macOS (zsh) の場合:

echo 'export PATH="$(npm config get prefix)/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

Linux (bash) の場合:

echo 'export PATH="$(npm config get prefix)/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

npx で回避する方法

PATH の設定が面倒な場合は、『npx』を使えばグローバルインストールなしで tsc を実行できます。

npx tsc hello.ts
npx tsc --version

Windows の場合は「システムの詳細設定」→「環境変数」→「Path」に npm のグローバルインストール先フォルダを追加します。npm のインストール先は『npm config get prefix』で確認できます。