tscコマンドの基本的な使い方を知りたい

#Typescript

2023/11/07

tscは、主にTypeScriptで書かれたソースコードをJavaScriptにトランスパイルするためのコマンドです。

TypeScriptの学習にあたり、基本的なtscコマンドの使い方を知りたい。

これまでに、tscについて学んだ内容を以下にまとめる。

📄 事前に準備すること

TypeScriptはローカルにインストールする。

$ npm init -y
$ npm install typescript
$ npx tsc --version
Version 5.2.2

また、説明用にトランスパイル対象の以下のソースファイルを作成する。

touch index.ts

デフォルトの`tsconfig.json`を作成する

まずはtsc --initでデフォルトのTypeScriptの構成ファイル(tsconfig.json)を作成する。

以下を実行すると、推奨設定でtsconfig.jsonが作成される。また、ドキュメントへのリンクや、その他の設定可能な項目の説明がコメントとして記載される。

$ npx tsc --init

Created a new tsconfig.json with:
                                                                                                                     TS
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig

構成ファイル`tsconfig.json`の内容を確認する

構成ファイルtsconfig.jsonの内容を確認するにはtsc --showConfigを使う。

npx tsc --initで作成したtsconfig.jsonはコメントが沢山あり内容を把握しにくいが、以下のコマンドにより、設定内容を確認できる。

files項目には、tsconfig.jsonの設定により、プロジェクト内で処理対象となるソースファイルが自動的に検出される。

$ npx tsc --showConfig
{
    "compilerOptions": {
        "target": "es2016",
        "module": "commonjs",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
    },
    "files": [
        "./index.ts"
    ]
}

tscコマンドには直接ソースファイルのパスを指定しない

tscコマンドの引数にソースファイルのパスは指定するとtsconfig.jsonの設定は無効になる。

引数にindex.tsを指定してtscを実行すると、トランスパイルされたindex.jsが作成されるが、この方法だと、tsconfig.jsonの設定が読み込まれない。

npx tsc index.ts

--showConfigをつけて確認すると、前述の設定が読み込まれていないことがわかる。

$ npx tsc index.ts --showConfig
{
    "compilerOptions": {},
    "files": [
        "./index.ts"
    ]
}

トランスパイルする場合は、シンプルに以下を実行する。

npx tsc

トランスパイルせずに型チェックのみ実施できる

TypeScriptの型チェックだけ行う場合は、npx tsc --noEmitを実行する。

以下を実行すると、トランスパイルせずに、型チェックのみ行う。

npx tsc --noEmit

`tsc`の監視モードを使うと便利である

毎回npx tscコマンドを実行したくない場合は、npx tsc --watchでソースファイルを監視し自動でトランスパイルさせる。

--watch(or -w)オプションをつけて実行すると、tscは監視モードになる。

監視モードでは、tscコマンドは終了せずに動き続け、tsconfig.jsonで処理対象となっているソースファイルに更新があった場合、自動的にトランスパイルする。

npx tsc --watch

`tsc`のビルドモードも便利である

--build(or -b)オプションを実行すると、tscはビルドモードになる。

npx tsc --build

ビルドモードは、他のプロジェクトを参照するようにtsconfig.jsonで設定した場合に、参照先の複数プロジェクトをまとめてトランスパイルするためのモードである。

毎回全てのプロジェクトをトランスパイルするのではなく、更新のあったプロジェクトのみを効率良くトランスパイルすることができる。

また、ビルドモードにはいくつかオプション機能を利用でき、複数のプロジェクトを参照しない場合でも有用である。

プロジェクト内の生成ファイルをまとめて削除できる

--cleanオプションにより、プロジェクト内のトランスパイルにより生成されたファイルをまとめて削除できる。

以下により、プロジェクト内のトランスパイル済みの*.jsをまとめて削除できる。

npx tsc --build --clean

また、--dryオプションを付けることで、実際には削除せずに、何が行なわれるかだけを確認できる。

$ npx tsc --build --clean --dry
[7:02:35] A non-dry build would delete the following files:
  * /Users/kanta/hacking/learning/006_learning-typescriptを学ぶ/01/index.js

監視モードも使える

--watch(or -w)オプションも使える。

通常の監視モードと同様に、更新のあったファイルを自動的にトランスパイルする。

npx tsc --build --watch

参考

tscの–showConfigオプション。これ、TypeScriptのコンパイル設定を確認するときに便利。 #TypeScript - Qiita
Build Mode for TypeSc… # TypeScript: Documentation - Project References
O’Reilly Japan - 初めてのTypeScript
- 13.1.2　監視モード
- 13.5.5　noEmit
- 13.10.3　ビルドモード

作成日: 2023/11/07