普段、開発時にTypeScriptを使用しているものの、どのように解析・実行されているのか今ひとつ理解できていなかったため、今回整理してみることにしました。

1. フロントエンドとバックエンドでのTypeScriptの使われ方

TypeScriptはフロントエンド・バックエンドの両方で利用されますが、それぞれの使われ方は異なります。また、開発時と本番環境でも異なるツールが使われるため、どのようにTypeScriptが実行されるのか整理していきます。
※ フロントエンドはNext.js、バックエンドはExpressを使用したケースを想定


・フロントエンド
・SWCを使って .ts → .jsに変換
・.jsに変換された後にブラウザで実行される
・ホットリロードにはFast Refreshを使用

・バックエンド
・ts-nodeを使い .tsファイルを即時実行
・.tsのままNode.jsで動作可能
・nodemonを利用してコード変更を監視しホットリロード

2.tscとts-nodeの違い

TypeScriptをJavaScriptに変換(トランスパイル)するツールとして、tscとts-nodeがありますがそれぞれの目的や動作は異なります。

・tscの特徴

• 本番環境でのビルトに使用
• .tsを.jsに変換し、Node.jsやブラウザで実行可能にする
• tsc --noEmitを使って型チェックとして使うことも可能

・ts-nodeの特徴
・開発時のみ使用
・.tsをそのまま実行できるため、ビルド不要で高速に開発できる
・nodemon --exec ts-nodeを使えばコード変更時に自動リロード可能

3.ts-nodeはフロントエンドでは使われない？

2で触れたts-nodeですがNode.js環境でTypeScriptを即時実行するためにツールなので、基本的にはフロントエンドでは使われません。
その理由は以下の通りです。

① ブラウザはTypeScriptを直接実行できない
② フロントエンドではSWCやBabelが主流
③ ホットリロードがフロントエンド向けてない

4.トランスパイルとコンパイルの違い

最後に、tsちゃts-nodeに関連するトランスパイルとコンパイルの違いを整理しておきます。

・トランスパイル (Transpile)

同じレベルの言語間でコードを変換すること
ex)
・TypeScript → JavaScript
・ES6 → ES5
変換することで互換性を保つことが出来ます。

・コンパイル (Compile)

高級言語(人間が書くコード)を低級言語(機械が実行できるコード)に変換すること
ex)
・C → バイナリ
・Java → バイトコード

5.まとめ

・フロントエンドではts-nodeは使われない
・.ts → .jsに変換するため、SWCやBabelが主流
・バックエンドではts-nodeが便利
・開発時に.tsを即時実行できる
・tscとts-nodeは目的が異なる
・tscは.ts → .jsに変換する本番環境向け
・ts-nodeは .tsをそのまま実行できる開発向け
・トランスパイルはコード変換、コンパイルは実行可能コードへの変換