TypeScriptでコンパイルする方法10選！初心者でも分かる徹底解説！

はじめに

TypeScriptは近年、その堅牢な型システムやJavaScriptとの高い互換性から多くのエンジニアに採用されてきました。

特に、大規模なアプリケーション開発において、TypeScriptの型安全性はコードの品質を高め、保守性を向上させる強力なツールとなっています。

しかし、TypeScriptはそのままブラウザで動作することはできません。

そこで、コンパイルというプロセスが必要となります。

この記事では、TypeScriptのコンパイル方法について、初心者の方でもわかりやすく徹底的に解説していきます。

コンパイルの基本から、実際のサンプルコードを通じた応用テクニック、そしてカスタマイズのヒントまで、幅広く取り扱っていきます。

●TypeScriptとは

TypeScriptは、Microsoftによって開発されたオープンソースのプログラミング言語です。JavaScriptのスーパーセットとして設計されており、JavaScriptとの完全な互換性を持ちつつ、強力な型システムを提供しています。

この型システムにより、コードのエラーを早期に検出することができ、大規模な開発でも安全にコードを管理することが可能となります。

また、TypeScriptは独自の構文や機能を持ちながら、最終的にはJavaScriptにトランスパイルされることで、ブラウザやNode.jsなどの環境で動作します。

○TypeScriptの基本

TypeScriptのコードは、ファイル拡張子として.tsを持つファイルに保存されます。

JavaScriptには存在しない型アノテーションやインターフェースなど、TypeScript独自の機能を利用してコードを記述することができます。

例えば、次のコードではname変数に文字列型のアノテーションを追加しています。

// TypeScriptの変数宣言例
let name: string = "Yamada";

このコードでは、name変数を文字列として宣言しています。

この例では、name変数に文字列以外の値を代入しようとすると、TypeScriptのコンパイラによってエラーが検出されます。

しかし、このTypeScriptのコードをそのままブラウザで動かすことはできません。

そのため、実際に動作させるためには、このコードをJavaScriptにトランスパイルする必要があります。

そのトランスパイルの方法について、次のセクションで詳しく解説していきます。

●TypeScriptコンパイルの準備

TypeScriptのコードをJavaScriptにトランスパイルするには、まずTypeScriptのコンパイラをインストールする必要があります。

このコンパイラはNode.jsのパッケージマネージャであるnpmを通じて簡単にインストールすることができます。

まず、npmを使ってTypeScriptをインストールします。

npm install -g typescript

このコマンドを実行することで、TypeScriptのコンパイラがグローバルにインストールされます。

これにより、tscというコマンドが使用できるようになります。

このtscコマンドを使って、TypeScriptのコードをJavaScriptにトランスパイルすることができます。

具体的には、先ほどのname変数を宣言した.tsファイルをトランスパイルすると、次のようなJavaScriptのコードが出力されます。

// トランスパイル後のJavaScriptコード
let name = "Yamada";

TypeScriptの型アノテーションは、トランスパイル時に取り除かれ、純粋なJavaScriptのコードだけが残ります。

●TypeScriptコンパイルの基本

Web開発の現場でTypeScriptの導入が進む中、TypeScriptのコンパイル方法を知っておくことは必須と言えるでしょう。

今回は、TypeScriptのコンパイルの基本を中心に、実際のコード例を交えながら解説していきます。

○サンプルコード1：TypeScriptファイルのコンパイル方法

まず最初に、TypeScriptファイルの基本的なコンパイル方法について解説します。

// hello.ts
const greeting: string = "こんにちは、TypeScript!";
console.log(greeting);

このコードでは、変数greetingに文字列型の値を代入し、その値をコンソールに出力しています。

このTypeScriptファイルをコンパイルする場合、次のコマンドを実行します。

tsc hello.ts

このコマンドを実行すると、hello.tsと同じディレクトリにhello.jsというJavaScriptファイルが生成されます。

このJavaScriptファイルをブラウザやNode.jsで実行することで、TypeScriptのコードの実行結果を確認することができます。

○サンプルコード2：tsconfig.jsonの基本設定

次に、tsconfig.jsonの基本的な設定について理解しておきましょう。

このファイルはTypeScriptプロジェクトのルートディレクトリに配置し、コンパイルの設定や振る舞いを指定します。

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "strict": true,
        "esModuleInterop": true
    },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules"]
}

このコードでは、コンパイルオプションとして、出力するJavaScriptのバージョンをES5に、モジュールシステムをCommonJSに設定しています。

また、TypeScriptの厳格な型チェックを有効にし、ESモジュールのインターロップを有効にしています。

最後に、コンパイル対象と除外するファイルやディレクトリを指定しています。

このtsconfig.jsonの設定を元に、次のコマンドを実行すると、指定した設定でTypeScriptファイルがコンパイルされます。

tsc

このコマンドを実行することで、srcディレクトリ以下の全ての.tsファイルが指定された設定でコンパイルされ、JavaScriptファイルとして出力されます。

●TypeScriptコンパイルの応用

TypeScriptのコンパイルにおいて、基本的な方法を理解した後、さらに深く、効率的に活用するためのテクニックや設定を知ることは非常に重要です。

ここでは、TypeScriptのコンパイルを更に応用するためのサンプルコードとその解説を提供します。

○サンプルコード3：ソースマップの利用方法

このコードでは、TypeScriptのソースマップを生成する方法を表しています。

ソースマップは、トランスパイルされたJavaScriptコードと元のTypeScriptコードをマッピングするファイルで、デバッグを容易にするために使用されます。

// tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true
  }
}

上記の設定をtsconfig.jsonに加えることで、TypeScriptのコンパイル時にソースマップを生成します。

この例では、sourceMapオプションをtrueにしてソースマップを有効にしています。

コンパイルを行うと、TypeScriptファイルと同じディレクトリに.jsと.js.mapの2つのファイルが生成されることを確認できるでしょう。

この.js.mapがソースマップファイルとなります。

○サンプルコード4：特定のファイルのみコンパイル

TypeScriptで複数のファイルを管理している際、特定のファイルのみをコンパイルする方法も知っておくと便利です。

この例では、sample.tsというファイルのみをコンパイルする方法を紹介しています。

tsc sample.ts

コマンドラインから、tscに続けてコンパイルしたいファイル名を指定することで、指定したファイルのみがコンパイルされます。

この際、他のファイルに依存している場合、依存関係のあるファイルも自動的にコンパイルされます。

特定のファイルのみをコンパイルする方法は、大規模なプロジェクトで特定の部分をテストやデバッグしたいときなどに非常に役立ちます。

○サンプルコード5：外部ライブラリの取り込み

TypeScriptプロジェクトにおいて、外部のライブラリやフレームワークを利用する場合があります。

その際に、適切に型定義を取り込むことで、TypeScriptの型チェック機能をフルに活用することができます。

例として、lodashという外部ライブラリをプロジェクトに取り込む方法を紹介します。

npm install lodash
npm install @types/lodash --save-dev

上記のコマンドで、まずlodashライブラリをインストールし、次にその型定義をインストールします。このように型定義をインストールすることで、ライブラリの関数やメソッドを利用する際にも型チェックが行われ、コードの品質を保つことができます。

取り込んだlodashライブラリを使うと、例えば配列の操作などを簡単に行うことができるでしょう。

そして、TypeScriptの型チェック機能と合わせることで、より安全にコードを書くことが可能となります。

このように、外部ライブラリとその型定義をプロジェクトに取り込むことは、TypeScriptをより強力に、そして効果的に使用するための一つの手段です。

○サンプルコード6：出力先のカスタマイズ

TypeScriptのプロジェクトを構築する際、コンパイル結果のJavaScriptファイルを特定のディレクトリに出力したい場面が多々あります。

例えば、distやbuildなど、プロジェクトによっては特定の命名規則やディレクトリ構造を持っていることが一般的です。

このコードでは、tsconfig.jsonを使って、コンパイルされたJavaScriptファイルの出力先をカスタマイズする方法を表しています。

この例では、outDirオプションを用いて、出力先ディレクトリを./distに指定しています。

{
  "compilerOptions": {
    // 省略...
    "outDir": "./dist",  // 出力先ディレクトリを指定
    // 省略...
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

上記の設定を適用することで、srcディレクトリ内の.tsファイルをコンパイルすると、結果の.jsファイルはdistディレクトリ内に生成されます。

実際にこの設定を適用した後、TypeScriptファイルをコンパイルすると、指定したディレクトリ内にJavaScriptファイルが格納されていることが確認できるでしょう。

この機能は、ビルドツールやデプロイツールと組み合わせることで、効率的な開発フローを構築する際に非常に役立ちます。

さらなるカスタマイズとして、outFileオプションを使うことで、すべてのTypeScriptファイルを一つのJavaScriptファイルとして出力することも可能です。

ただし、この機能はmoduleオプションがSystemやAMDとして設定されている場合のみ利用できます。

{
  "compilerOptions": {
    // 省略...
    "module": "System",
    "outFile": "./dist/bundle.js",  // すべての.tsファイルを一つの.jsファイルにまとめる
    // 省略...
  },
  "include": ["src/**/*.ts"]
}

上記の設定では、srcディレクトリ内のすべての.tsファイルが一つのbundle.jsファイルとして出力されます。

○サンプルコード7：コンパイル時のエラーチェック

TypeScriptの主要な特徴の一つは、静的型付けです。

これは、コードが実行される前に、変数や関数の型に関するエラーを早期にキャッチすることができるという利点を持っています。

ここでは、TypeScriptのコンパイル時のエラーチェックの方法を解説します。

このコードでは、TypeScriptの静的型付けを使用してコンパイル時にエラーをチェックするコードを表しています。

この例では、変数の型を間違えて指定しているため、コンパイル時にエラーが発生します。

// TypeScriptのサンプルコード
let age: number;
age = "26";  // 文字列を代入しようとしているので、コンパイルエラーが発生する

上記のコードでは、ageという変数はnumber型として宣言されていますが、文字列の”26″を代入しようとしているため、TypeScriptのコンパイラはエラーを報告します。

実際に上記のコードをコンパイルすると、次のようなエラーメッセージが表示されるでしょう。

TypeScriptコンパイラは「Type ‘”26″‘ is not assignable to type ‘number’.」というエラーメッセージを出力し、age変数に文字列を代入することができないことを伝えています。

このような静的型チェックのおかげで、実行前に多くのミスを発見・修正することができ、バグの発生を大幅に減少させることができます。

注意点としては、TypeScriptの型システムは非常に柔軟で、型の間違いを避けるための多くのツールを提供しています。

しかし、それらのツールを活用するためには、型の基礎知識とTypeScriptの高度な型機能について学習することが不可欠です。

また、応用例として、TypeScriptにはstrictオプションという設定が存在します。

これをtrueに設定すると、より厳格な型チェックが行われ、未定義の変数やnull、undefinedの扱いに関してもエラーが検出されるようになります。

この機能を活用することで、更なる品質の向上が期待できます。

// tsconfig.jsonのサンプル設定
{
    "compilerOptions": {
        "strict": true
    }
}

この設定を加えることで、TypeScriptコードの安全性を一層高めることが可能です。

実際にこの設定を加えてコンパイルすると、更に多くの型関連のエラーが検出される可能性があるので、注意が必要です。

○サンプルコード8：特定のバージョンのJavaScriptへのトランスパイル

TypeScriptは現代の開発者にとって非常に強力なツールですが、WebブラウザやNode.jsのような実行環境は様々なJavaScriptのバージョンをサポートしています。

したがって、特定のバージョンのJavaScriptに変換することは非常に重要です。

ここでは、TypeScriptを古いバージョンのJavaScript、例えばES5にトランスパイルする方法を学びます。

このコードでは、TypeScriptをES5のJavaScriptにトランスパイルする方法を表しています。

この例では、tsconfig.jsonの設定を変更してES5に適応する方法を表しています。

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",  // 出力するJavaScriptのバージョンをES5に指定
    "module": "commonjs",
    "strict": true
  }
}

上記のサンプルでは、tsconfig.jsonのtargetオプションをes5に設定することで、TypeScriptコンパイラは生成するJavaScriptコードをES5構文に変換します。

その結果、ES6以上の新しい機能を使用しているTypeScriptコードも、古いブラウザや環境でも動作するJavaScriptに変換されます。

例えば、次のようなTypeScriptコードがあったとします。

// sample.ts
let message: string = `Hello, World!`;
console.log(message);

上記のコードをトランスパイルすると、テンプレート文字列が普通の文字列結合に変換されるなど、ES5互換のJavaScriptコードになります。

さて、この変換結果を見てみると、次のように変換されています。

var message = "Hello, World!";
console.log(message);

このように、TypeScriptは新しいJavaScriptの機能を使って書かれたコードも、設定に従って古いバージョンのJavaScriptに適切にトランスパイルすることができます。

しかし、すべての新しい機能が古いJavaScriptにトランスパイル可能なわけではありません。

特定の機能はポリフィルや外部ライブラリが必要となる場合があります。そのような場合、注意が必要です。

○サンプルコード9：ウォッチモードでの自動コンパイル

TypeScriptを使って開発を進める際、毎回手動でコンパイルを実行するのは少々煩雑です。

そこで、TypeScriptには「ウォッチモード」という機能が用意されています。

この機能を利用すると、ファイルの変更を検出するたびに自動でコンパイルを実行してくれます。

このコードでは、TypeScriptのウォッチモードを利用して、自動でコンパイルを行う方法を紹介しています。

この例では、ターミナルから特定のコマンドを使ってウォッチモードを起動し、ファイルの変更を監視して自動コンパイルを行います。

// example.ts
let message: string = 'こんにちは、TypeScript!';
console.log(message);

上記のコードは、シンプルなTypeScriptファイルの例です。

このファイルをウォッチモードでコンパイルする場合、次のコマンドをターミナルで実行します。

tsc example.ts --watch

このコマンドを実行すると、example.tsの変更を監視し始めます。

ファイルを編集して保存すると、即座にコンパイルが実行され、変更が反映されたJavaScriptファイルが出力されます。

例えば、example.tsのメッセージを「こんにちは、ウォッチモード!」に変更して保存すると、自動的にコンパイルが実行され、出力されるJavaScriptファイルにもその変更が反映されます。

こうした流れで、開発がスムーズに進められるようになります。

また、ウォッチモードはtsconfig.jsonが存在するディレクトリで次のコマンドを実行するだけで、設定に基づいて複数のファイルを監視・コンパイルすることも可能です。

tsc --watch

応用例として、特定のディレクトリ内のファイルのみをウォッチする場合は、tsconfig.jsonでincludeやexcludeオプションを適切に設定して利用します。

// tsconfig.jsonの例
{
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

上記の設定例では、srcディレクトリ内のファイルのみをウォッチの対象としています。

○サンプルコード10：TypeScriptでのモジュールコンパイル

JavaScriptとは異なり、TypeScriptはモジュールシステムを持つ言語として設計されています。

モジュールシステムは、コードの再利用性や管理性を向上させるための仕組みです。

今回は、TypeScriptでのモジュールコンパイルの方法を解説していきます。

このコードでは、TypeScriptのモジュール機能を使って、外部モジュールをインポートし、それをコンパイルするコードを表しています。

この例では、独自のモジュールを作成し、それを主要なファイルからインポートして使用しています。

// math.ts
export function add(a: number, b: number): number {
    return a + b;
}

// main.ts
import { add } from './math';

console.log(add(5, 3));  // このコードは8を出力する

上記の例では、math.tsというファイル内にaddという関数を定義し、その関数をexportしています。

次に、main.tsというファイルからadd関数をimportして使用しています。

このようにして、外部ファイルの関数やクラスをインポートすることができます。

TypeScriptをコンパイルする際、上記のようなモジュールのインポート・エクスポートを使用している場合は、コンパイラのモジュールオプションを適切に設定する必要があります。

tsconfig.jsonの例を紹介します。

{
    "compilerOptions": {
        "module": "CommonJS",
        "outDir": "./dist",
        "target": "ES6"
    },
    "include": ["*.ts"]
}

この設定により、TypeScriptのコードはES6の形式で、CommonJSモジュールシステムを利用してコンパイルされます。

そして、コンパイルされたJavaScriptファイルはdistディレクトリに出力されます。

この設定をもとにTypeScriptをコンパイルすると、main.jsは次のような形になります。

const math_1 = require("./math");
console.log(math_1.add(5, 3));

この例から、importとexportの文はCommonJSスタイルのrequireとexportsに変換されていることがわかります。

応用例として、異なるモジュールフォーマットや特定のバージョンのJavaScriptにコンパイルするための設定も可能です。

たとえば、AMDやUMD、ES6モジュールなど、様々なモジュールフォーマットがサポートされています。

これにより、ターゲットとなる環境やライブラリに合わせて柔軟にコンパイルすることができます。

また、モジュールのエイリアスを利用して、ディレクトリ構造の変更に強いコードを書くことも可能です。

tsconfig.jsonでpathsオプションを利用することで、特定のモジュールへのパスをエイリアスとして定義することができます。

●注意点と対処法

TypeScriptを使ってのコーディングは、JavaScriptよりも型安全性やモジュール化、そしてエディタの支援を受けやすくなるなどの利点があります。

しかし、その利点を享受する過程で、初心者が直面することが多い注意点や課題、そしてそれらの対処法について説明します。

○予期せぬエラーへの対応

□型エラーの対処法

TypeScriptの最大の特徴の一つは「静的型付け」です。

この機能のおかげで多くのエラーを事前にキャッチできますが、初心者には予期しない型エラーが発生することがあります。

このコードでは、string型の変数にnumber型の値を代入しようとするコードを表しています。

この例では、型エラーが発生することを示しています。

let myName: string;
myName = 123;  // エラー: Type 'number' is not assignable to type 'string'.

こちらのコードでは、型が不一致しているためコンパイルエラーとなります。

エラーメッセージをよく読み、適切な型に修正することで問題を解消できます。

□nullやundefinedに関するエラー

TypeScriptのstrictNullChecksオプションが有効になっている場合、nullやundefinedを予期しない変数に代入するとエラーが発生します。

このコードでは、strictNullChecksが有効時にnullをstring型の変数に代入しようとする例を表しています。

この例では、エラーが発生することを表しています。

let myString: string;
myString = null;  // エラー: Type 'null' is not assignable to type 'string'.

このようなケースでは、変数の型をstring | nullのように変更するか、変数に値を代入する際にnullを避けるように修正します。

○性能面での最適化

TypeScriptのコンパイルは、大きなプロジェクトになると時間がかかる場合があります。

特に、多くのモジュールや外部ライブラリを取り込んでいる場合、その影響でコンパイル時間が長くなることがあります。

□excludeオプションの活用

不要なファイルやディレクトリをコンパイルの対象から除外することで、コンパイルの速度を向上させることができます。

このコードでは、tsconfig.jsonで特定のディレクトリをコンパイルの対象から除外する設定を表しています。

この例では、node_modulesディレクトリを除外して、コンパイルの速度を向上させる方法を表しています。

{
  "compilerOptions": {
    // ... その他の設定
  },
  "exclude": ["node_modules"]
}

この設定を適用すると、node_modulesディレクトリ内のファイルはコンパイルの対象から除外され、コンパイルの速度が向上します。

□インクリメンタルコンパイルの活用

TypeScriptはインクリメンタルコンパイルをサポートしています。

これにより、変更されたファイルのみを再コンパイルすることができ、大幅な性能向上が期待できます。

このコードでは、tsconfig.jsonでインクリメンタルコンパイルを有効にする設定を表しています。

{
  "compilerOptions": {
    "incremental": true,
    // ... その他の設定
  }
}

この設定を適用することで、前回のコンパイル結果がキャッシュされ、変更された部分のみが再コンパイルされるため、コンパイルの速度が大幅に向上します。

●カスタマイズのヒント

TypeScriptのコンパイルプロセスは非常に柔軟です。

これにより、プロジェクトのニーズに応じてカスタマイズが可能となっています。

しかし、その柔軟性ゆえに多くの初心者はどのように設定を行うべきか迷ってしまうことが多いです。

ここでは、TypeScriptのコンパイルに関するカスタマイズのヒントを、詳細なサンプルコードとともに紹介します。

○高度なtsconfig.jsonの設定例

□変数の再代入を禁止する

このコードでは、noImplicitAnyオプションを使用して、型注釈が省略されている変数への任意の代入を禁止する設定を表しています。

{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

上記の設定を適用すると、明示的な型注釈がない変数に任意の値を代入しようとするとエラーが発生します。

これにより、型の安全性を高めることができます。

□プロパティの初期化を強制する

このコードでは、strictPropertyInitializationオプションを使用して、クラスのプロパティがコンストラクタ内で初期化されていない場合にエラーを発生させる設定を表しています。

{
  "compilerOptions": {
    "strictPropertyInitialization": true
  }
}

上記の設定を適用すると、クラスのプロパティがコンストラクタ内で初期化されていない場合、コンパイルエラーとなります。

これにより、意図しないプロパティの使用を避けることができます。

例として、次のTypeScriptコードを考えます。

class Person {
  name: string;
  age: number;

  constructor() {
    this.age = 30;
  }
}

上記のコードでは、nameプロパティがコンストラクタ内で初期化されていないため、コンパイルエラーが発生します。

初期化を忘れるというようなミスを防ぐために役立ちます。

□特定のライブラリの型定義を読み込む

TypeScriptの強力な型システムを活かすために、多くのJavaScriptライブラリには型定義ファイルが提供されています。

しかし、時には特定のライブラリの型定義のみを読み込む必要があることがあります。

このコードでは、typesオプションを使用して、特定のライブラリの型定義を読み込む設定を表しています。

{
  "compilerOptions": {
    "types": ["lodash"]
  }
}

上記の設定を適用すると、lodashライブラリの型定義のみを読み込むことができます。

他のライブラリの型定義を読み込まないように設定することで、コンパイルの高速化や型の競合を避けることができます。

まとめ

TypeScriptは、大規模なプロジェクトやチームでの開発を効率的に行うための強力なツールとなっています。

この記事では、TypeScriptのコンパイル方法を様々なサンプルコードを交えて徹底的に解説しました。

TypeScriptのコンパイルは、初心者には難しく感じるかもしれませんが、この記事を参考にしながら、少しずつ慣れていくことをおすすめします。

そして、TypeScriptの真価を十分に引き出すための知識と技術を身につけ、より質の高いコードを書くことができるようになることを期待しています。