これは ZOZO Advent Calendar 2022 カレンダー Vol.3 の 10日目の記事です。
ts-node 便利ですよね。
TypeScriptで書いてトランスパイルをしないで動かせるので簡単なスクリプトやデバッグで用いることがあると思います。
でも、遅いですよね。
そんなあなたにtsx
tsxといっても App.tsx みたいな TypeScript+JSX の話ではないです。
tsxとは
ts-nodeのように使えるコマンドです。
内部的にはトランスパイルにesbuildが用いられており、ts-nodeより早く速くTypeScriptファイルを実行できます。
v.s. esbuild-register
ts-nodeより早くてTypeScriptを実行するesbuildなパッケージにesbuild-registerというものもあります。（ほかにも様々ありますが検索した感じ日本で一番メジャーなように感じました）
概ねゴールは同じですが、esbuild-registerの起動は
node -r esbuild-register some/typescript/file.ts
のように --require オプションで利用されるのに対しtsxではts-node同様
npx tsx some/typescript/file.ts
といったようにコマンドとして利用でき、ts-nodeをほぼそのまま置き換えることができます。
ダウンロード数を見ても、後発のtsxがesbuild-registerに追いついていることがわかります。(2022/12/08現在)
その他比較
ts-nodeになく、tsxにある機能として Watch mode があります。
ts-nodeではnodemonなどと併用する必要がある変更検知ですが、tsxでは tsx watch some/typescript/file.ts と実行することで、インポートされているファイル含め変更を検知して自動で再実行を行えます。
またモダンフロントエンド開発でハマりやすいモジュール解決なども、他のソリューションに比べうま〜くやっているのでハマりづらくなっています。
ts-node から切り替える際に注意が必要な点としては、tsxは型チェックを行わないという点です。
別途 tsc --noEmit やIDEの機能で型チェックを走らせる必要があります。
より細かい点は作者が比較を出しているのでそちらを参照してください。