TypeScriptはJavaScriptに静的型付け構文を導入し拡張した言語です。
TypeScriptを使うメリットとして、エディタ、デバッガ、各種ツールなどから支援を受けられることが挙げられます。
本記事では、筆者が使ってみて便利だったTypeScript周りのツールを紹介したいと思います。
typescript-eslint
eslintはTypeScript/JavaScriptのコーディングスタイルのチェックをしてくれるツールです。
eslintにはTypeScript用のプラグインがあります。それがこの「typescript-eslint」です。
このプラグインを使うと、
- Promiseのawait忘れの検知（no-floating-promise）
- 不要なnon-null-assertionの検知
- 不要な型宣言の検知（
string | "foo"など）
などが可能になるため、より堅牢なTypeScriptプログラムを記述することができます。
インストール方法
npm install --save-dev eslint @eslint/js typescript typescript-eslint
dprint（フォーマッター）
フォーマッターはソースコードの整形をしてくれるツールです。
エディタの設定で「Format on Save」を有効にしておくと、保存時に自動でソースコードが整形されるようになるので便利です。
TypeScriptのフォーマッターとしては、「prettier」「biome」なども有名かと思いますが、筆者のイチオシはdprintです。
dprintのメリットとして、改行の挿入位置を箇所によって変えられるというのがあります。
具体的には、1つのファイルの中で、「関数の括弧の後に改行する箇所」と「関数の括弧の後に改行しない箇所」を両方作ることができます。
例えば以下の例のように、上のconsole.logは改行なしでフォーマット、下のconsole.logは改行ありでフォーマットのようにすることができます。
▲フォーマット後のファイル
これを特に設定なしで実現できるところが、dprintのおすすめポイントです。
既存プロジェクトに後からフォーマッタを導入するときや、チームメンバーがフォーマッタの設定で喧嘩している時は、dprintを導入してみてはいかがでしょうか。
インストール方法
$ npm install dprint
$ npx dprint init
esbuild
esbuildはTypeScriptをJavaScriptに変換するツール（トランスパイラ）です。
「TypeScriptをJavaScriptに変換する」という作業は、esbuild以外のツール、例えばtscやwebpack、babel、swcなどのツールを使ってもできます。
これらの中でesbuildが優れている点は、
- 多様なオプションが指定できる
- プラグインがたくさん用意されている
- 高速（Go言語製）
- コマンドライン実行とプログラムからの呼び出しどちらも可能
- 開発が継続されている
という点です。
esbuildはとにかく指定できるオプションが多く、esbuildを使っていれば、コンパイルする際のユースケースは9割方カバーできるのではないかと思っています。
また、ESM対応などもしっかりされており、開発が継続している点もいいなと思っています。
プログラム上からimportして使用することもできるので、スクリプトなどに組み込んで使うこともできるのが便利です。
tsx（コマンドラインツール）
コマンドラインツールの方のtsxです。TypeScriptをトランスパイルなしで直接実行できます。
$ tsx index.ts
同種のツールのts-nodeよりも動かし方が簡単で、ESM対応もされているところがオススメポイントです。
vscodeのdebuggerとして仕込んでおくこともできます。
同種の（TypeScriptを直接実行する）ツールとしてはDenoもおすすめです。node_modulesが無いので、任意のディレクトリでちょっとした書き捨てスクリプトを動かす際に便利です。
TypeScript Playground
こちらはwebサイト上でTypeScriptコードが書けるPlaygroundです。
URLをコピペして他人に共有することができます。
型エラーが出て困っているとき、チームメンバー間でエラーが出ているスニペットを共有するのに使っています。
Pretty TypeScript Errors（vscode拡張）
TypeScriptのわかりづらいエラーをvscode上できれいに表示してくれる拡張機能です。
TypeScriptでは、ネストしたオブジェクトなどでエラーメッセージが長くなってしまうことがあります。この拡張機能を使うと、エラーのデバッグが捗ります。
参考記事
Prettify TypeScript (vscode拡張)
こちらはvscode上でTypeScriptの型情報を分かりやすく表示してくれる拡張機能です。
記事執筆時点ではまだpreview版ですが、変数の詳細な型を展開して表示してくれるので便利です。
zod（ライブラリ）
便利なTypeScriptライブラリはたくさんありますが、私がどのプロジェクトでも必ず入れているのがzodです。
zodはスキーマ検証ライブラリです。変数のバリデーションを行ったり、TypeScriptの型を生成したりすることができます。
import { z } from "zod";
// スキーマ定義
const schema = z.object({
foo: z.string(),
bar: z.number(),
});
// バリデーション（スキーマの定義に一致しなければエラーがthrowされる）
const data = schema.parse(input);
フロントエンドでのユーザー入力チェックや、バックエンドでのリクエストパラメータのバリデーションに使用しています。
また、OpenAPIのyamlスキーマを自動生成するのにも使っています。
honoなどのWebフレームワークとも組み合わせることができて便利です。
参考記事
type-fest
type-fectはTypeScriptのユーティリティ型を提供するライブラリです。
TypeScriptで型の操作をしたいときに使っています。
例えば
- 型Aと型Bをマージした型を作りたい
- 型Aからxxxを取り除きyyyを加えた型を作りたい
といった際に利用しています。
参考記事
まとめ
今回は、私が個人的にTypeScript周りで便利だと感じているツール・ライブラリを紹介しました。
皆さんもぜひこれらのツールを使って快適なTypeScriptライフを送ってください！