【TypeScript】TypeScriptの環境構築：tscコマンドとtsconfig.jsonの基本

JavaScript
2024.05.28

こんにちは、かつコーチです。

前回は「TypeScriptとは何か」「JavaScriptとの違い」について解説しました。

型があることでミスに気づきやすくなる、という話でしたね。

今回は実際に手を動かして、TypeScriptのコードをJavaScriptに変換するところまでやってみましょう。

環境構築は最初の壁になりやすいところですが、1つずつ確認すれば難しくありません。

TypeScriptを動かすために必要なもの

Node.jsが前提になる

TypeScriptを動かすには、まずNode.js（ブラウザの外でJavaScriptを実行できる環境）がパソコンにインストールされている必要があります。

TypeScriptのコンパイラ自体がNode.js上で動くツールだからです。

ターミナルで次のコマンドを実行して、バージョンが表示されればNode.jsは準備できています。

node -v
# v20.11.0 のようにバージョンが表示されればOK

もしコマンドが見つからない場合は、公式サイトからインストーラーをダウンロードしてインストールしておきましょう。

TypeScriptのインストール

Node.jsが使える状態になったら、npm（Node.jsに付属するパッケージ管理ツール）を使ってTypeScriptをインストールします。

npm install -g typescript

-gは「グローバルインストール」の意味で、パソコン全体でどこからでもtscコマンドを使えるようにするオプションです。

インストールが終わったら、バージョンを確認してみましょう。

tsc -v
# Version 5.4.5 のようにバージョンが表示されればOK

tscコマンドでコンパイルしてみる

最初のTypeScriptファイルを作る

適当な作業フォルダを作り、hello.tsというファイルを作成します。

拡張子が.tsなのが、TypeScriptファイルの目印です。

// hello.ts
const name: string = "かつコーチ";
console.log("こんにちは、" + name + "さん");

コンパイルしてJavaScriptに変換する

このファイルを、tscコマンドでコンパイルします。

tsc hello.ts

実行すると、同じフォルダにhello.jsというファイルが自動的に生成されます。

中身を見てみると、次のようなシンプルなJavaScriptに変換されています。

// hello.js（自動生成）
var name = "かつコーチ";
console.log("こんにちは、" + name + "さん");

型注釈の: stringの部分がきれいさっぱり消えているのが分かるはずです。

型はあくまで「開発中のチェック用」の情報で、実行時のJavaScriptには影響を与えません。

生成されたhello.jsは、これまで通りnode hello.jsで実行できます。

node hello.js
# こんにちは、かつコーチさん

tsconfig.jsonで設定をまとめる

ファイルを1つずつ指定するのは非効率

先ほどはtsc hello.tsと1ファイルずつ指定してコンパイルしましたが、実際の開発ではファイル数がどんどん増えていきます。

毎回ファイル名を指定してコンパイルするのは現実的ではありません。

そこで使うのが、プロジェクト全体の設定をまとめるtsconfig.jsonというファイルです。

tsconfig.jsonの作成

作業フォルダで次のコマンドを実行すると、tsconfig.jsonが自動生成されます。

tsc --init

生成されたtsconfig.jsonには大量のコメント付き設定項目が並んでいますが、最初からすべてを理解する必要はありません。

初心者のうちに押さえておきたい主要な項目だけ抜き出すと、こんな形です。

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  }
}
設定項目役割
target変換後のJavaScriptがどのバージョンに対応するか
moduleモジュール（import/export）の変換方式
outDirコンパイル後の.jsファイルの出力先フォルダ
rootDirコンパイル対象の.tsファイルがあるフォルダ
strict型チェックを厳しくするかどうか

tsconfig.jsonがあるフォルダで、ファイル名を指定せずにtscとだけ実行すると、設定に沿ってプロジェクト内の.tsファイルがまとめてコンパイルされます。

tsc

strictオプションはtrueのままにしておく

tsconfig.jsonの中でも、特に重要なのがstrictという項目です。

初心者向けのサンプルコードでは、これをfalseにして型チェックを緩めている例も見かけます。

ですが、私は初心者のうちほどstrict: trueのままにしておくことを強くおすすめします。

かつコーチが実際につまずいた話

私が最初のプロジェクトで、動かなくて困ったときに先輩から「strictをfalseにしたら？」とアドバイスされ、そのままfalseにして開発を進めてしまったことがあります。

その結果、TypeScriptを使っているはずなのにundefinedのエラーが実行時に何度も発生し、「型を書いているのに、なぜJavaScriptのときと同じミスをするんだろう」と混乱しました。

原因は単純で、strictをfalseにしたことで、TypeScript本来のチェック機能の多くが無効になっていたからです。

❌ Before：strictをfalseにして緩くする

{
  "compilerOptions": {
    "target": "ES2020",
    "strict": false
  }
}

これでは、nullやundefinedが入る可能性のある変数をチェックせずに使えてしまい、TypeScriptを導入した意味が半減してしまいます。

✅ After：strictをtrueのままにして厳格にチェックする

{
  "compilerOptions": {
    "target": "ES2020",
    "strict": true
  }
}

最初は赤い波線のエラーがたくさん出て戸惑うかもしれませんが、それこそがTypeScriptが「実行前にミスを教えてくれている」証拠です。

面倒に感じても、strict: trueのまま向き合う方が、結果的に早くTypeScriptの型の考え方に慣れられます。

watchモードで開発を効率化する

保存するたびに自動でコンパイルする

ファイルを保存するたびに毎回tscコマンドを打つのは手間です。

--watch（または-w）オプションを付けると、ファイルの変更を監視して、保存するたびに自動でコンパイルしてくれます。

tsc --watch

このコマンドを実行したまま作業を続ければ、.tsファイルを保存するたびに自動で.jsファイルが更新されるので、コンパイル作業を意識せずにコーディングに集中できます。

まとめ

この記事のポイント

  • TypeScriptを動かすにはNode.jsが必要で、npm install -g typescriptでインストールする
  • tsc ファイル名.tsでTypeScriptファイルをJavaScriptにコンパイルできる
  • tsconfig.jsonでプロジェクト全体のコンパイル設定をまとめて管理できる
  • strictオプションはtrueのままにしておくと、TypeScriptの恩恵を最大限に受けられる
  • tsc --watchで、保存するたびに自動コンパイルできる

次に読むべき記事

環境が整ったら、次は実際に同じ処理をJavaScriptとTypeScriptで書き比べてみましょう。

型があることの安心感を、具体的なコードで実感してもらえるはずです。

→ 次の記事：JavaScriptとTypeScript、同じコードを書き比べてみる

タイトルとURLをコピーしました