【Parcel】型定義だけほしいときの対処法

環境

$ npx parcel --version
1.12.5
$ npx tsc --version
Version 4.3.5

事象

TypeScriptを使ってちょっとしたツールを書いていた。
始めはtscを使ってコンパイルを行なっていたのだが、出力を１つにまとめたいと思いparcelを用いてバンドルを行なった。

parcelはtsconfig.jsonを見てTypeScriptからのコンパイルからバンドリングまでよしなにやってくれる便利なツールであるが、型定義の出力はサポートしてくれないようである¹。
Issueに言われているようにparcelにプラグインをかませばできたようだが開発が止まっているようだ。

解決策

parcelによるビルドとは別にtscを動かし型定義を得ることにした。

package.json

    "scripts": {
        "build": "parcel build src/main.ts",
        "build:types": "tsc --declaration --emitDeclarationOnly --outdir './types'"
    },

tscを使って型定義を出力するにはtsconfig.jsonファイルで"declaration": trueとすればよい。

さらに"emitDeclarationOnly": trueと指定すると、型定義のみを出力することができる²。

parcelはtsconfig.jsonを読んではいるが、これらのオプションに関しては無視するようである。だからtsconfig.jsonにこれらを書いてしまっても構わないのだが、それは少し気持ち悪い。
そこで、次のようにtscコマンドのオプション引数として指定してやることにした。

npx tsc --declaration --emitDeclarationOnly

# --outDirオプションは本来生成物の出力先を指定するものだが、
# これらと組み合わせると、型定義のみを特定のディレクトリに保存するような使い方ができる
npx tsc --declaration --emitDeclarationOnly --outDir './types'

参考リンク

• https://qiita.com/akameco/items/bf2a837af4a79834672d
• https://github.com/parcel-bundler/parcel/issues/3162

---

1. Why parcel doesn't make declaration .d.ts file ・ Issue #2321 ↩

2. TypeScript Documentation: Creating .d.ts Files from .js files ↩