LoginSignup
33
14

More than 1 year has passed since last update.

まだts-node使ってるの?tsxの紹介

Last updated at Posted at 2022-12-09

これは 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の機能で型チェックを走らせる必要があります。

より細かい点は作者が比較を出しているのでそちらを参照してください。

33
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
33
14