【TypeScript】コンパイル(トランスパイル)の方法とオプション

更新日:2023/02/06

TypeScriptファイルはJavaScriptファイルに変換してから、ブラウザやNode.js等で実行します。

このような、ある言語を他の言語に変換することをトランスパイルと呼びます。
そして、トランスパイルを行うツールをトランスコンパイラ(またはトランスパイラ)と呼びます。

今回は、TypeScriptのトランスパイル方法についてお伝えします。

 

トランスコンパイラ : tsc の使い方

TypeScriptファイルのコンパイルは、tscコマンド(TypeScriptコンパイラ)で行います。
tscコマンドをインストールしていない時は、次のページを参考にしてインストールしてください。

tscコマンドは様々なオプションがあります。
代表的なものをピックアップして、基本的な使用方法をお伝えします。

その他のオプションは、次のTypeScriptの公式ページを読んでみてください。
tsc CLI オプション
英語なので、Chromeで開いて翻訳しよう。

単純なコンパイル

TypeScriptファイルを作成します。

test.ts

function message(msg:string){
    console.log( msg );
}
const m: string = "ハロー";
message(m);

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

>tsc test.ts

TypeScriptファイルと同じディレクトリに、JavaScriptファイルが生成されます。

test.js

function message(msg) {
    console.log(msg);
}
var m = "ハロー";
message(m);

変換後のJavaScriptファイルは、Node.jsやhtmlのscriptタグ等で呼び出して実行できます。

Node.jsで実行

>node test.js

scriptタグ(html)で実行

<script src="test.js"></script>

複数ファイルの指定

複数のTypeScriptファイルを指定できます。

>tsc test.ts test2.ts

出力先の指定

--outDirオプションを指定すると、コンパイル後のJavaScriptファイル出力ディレクトリを指定できます。

>tsc test.ts --outDir 出力先ディレクトリ

マップファイルの作成

ブラウザはJavaScriptファイルが読み込まれるため、通常ならデバッグはJavaScriptで行います。
しかしマップファイルを生成することで、TypeScriptファイルでのデバッグが可能になります。

>tsc test.ts --sourceMap

実行すると、test.js と test.js.map が生成されます。
ブラウザがマップファイルを把握するために、test.js には次のようなコメントが挿入されます。

//# sourceMappingURL=test.js.map

 

構成ファイル(tsconfig.json)を使用したトランスコンパイル

tsconfig.jsonファイルにtscコマンドのオプションを記述しておくと、トランスコンパイル時にオプション指定する手間を省けます。

実行方法

次のコマンドを実行すると、カレントディレクトリのtsconfig.jsonファイルを読み込み、ファイルの内容を解釈してTypeScriptファイルをJavaScriptに変換します。

>tsc

--project オプションを使用すると、異なるディレクトリやファイルを指定できます。

>tsc --project tsconfig.v1.json

tsconfig.jsonの生成

tsconfig.jsonファイルは手動で作成するか、次のコマンドでひな型を作成します。

>tsc --init

コマンドを実行すると、次のような内容でtsconfig.jsonファイルが生成されます。
※長いので、省略しています。

tsconfig.jsonのひな型

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    /* Completeness */
    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

オプションの指定

環境に合わせて、オプションを設定します。
ひな型のコメントを読みながら自分で設定してもいいけれど、次のページを参考にした方が楽です。

上のページ内に記述されているインストール方法は、tsconfig.jsonに他の構成ファイルをマージします。
この方法でもいいですが、tsconfig.jsonのリンクをクリックして内容をコピペでもOKです。

https://github.com/tsconfig/bases

次に、必要に応じて"outDir"(出力先ディレクトリ指定)や"sourceMap"(ソースマップ生成)などを追加します。

■インストール方法に従った場合の例

インストール後のtsconfig.json

{
  "extends": "@tsconfig/esm/tsconfig.json",
  "compilerOptions": {
    "outDir": "out",
    "sourceMap": true
  },
}

■コピペした場合の例

コピペ後のtsconfig.json

{
    "$schema": "https://json.schemastore.org/tsconfig",
    "display": "ESM",
  
    "compilerOptions": {
      "module": "es2022",
      "outDir": "out",
      "sourceMap": true
    }
}

入力ファイルの指定

tscはフォルダを再帰的に検索して、対象ファイルを探してくれます。
しかし検索に時間がかかったり、意図しないファイルが対象となる可能性があります。

そのため、入力ファイルを指定した方がいいです。
"files"または"include"を使います。

"files"

"files"は、配列形式で入力ファイルを一つ一つ指定します。

"files"の例

{
  "extends": "@tsconfig/esm/tsconfig.json",
  "compilerOptions": {
    "outDir": "out",
    "sourceMap": true
  },

    "files": [
      "test.ts",
      "test2.ts"
    ]
}

"include"

"include"はファイルパスのマッチパターンで指定します。

■マッチパターン

  • "*" 0個以上の文字にマッチ
  • "?" 一文字にマッチ
  • "**/" 複数階層のディレクトリにマッチ

"include"の例

{
  "extends": "@tsconfig/esm/tsconfig.json",
  "compilerOptions": {
    "outDir": "out",
    "sourceMap": true
  },

    "include": [
      "*",
      "src/**/*"
    ]
}

除外ファイル・フォルダの指定

特定のファイルやフォルダをトランスコンパイルの対象から除外するときは、"exclude"を使用します。
"include"と同じマッチパターンを使用できます。

"include"の例

{
  "extends": "@tsconfig/esm/tsconfig.json",
  "compilerOptions": {
    "outDir": "out",
    "sourceMap": true
  },

    "include": [
      "*",
      "src/**/*"
    ],
    "exclude": [
      "*.old.ts",
      "src/old"
    ],
}

ソースコード上で読み込まれているファイルは除外されません。

更新日:2023/02/06

書いた人(管理人):けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。