TypeScriptでのBabelの使用

TypeScriptにおけるBabelとtscの比較

最新のJavaScriptプロジェクトを作成する場合、TypeScriptからJavaScriptにファイルを変換する適切な方法は何だろうかと自問するかもしれません。

ほとんどの場合、答えは「場合による」、あるいはプロジェクトによっては「誰かが決めているかもしれない」ということになります。 tsdx、Angular、NestJS、またははじめにに記載されているフレームワークのような既存のフレームワークでプロジェクトを構築している場合、この決定は自動的に処理されます。

ただし、有用なヒューリスティックは次のとおりです。

• ビルド出力がソース入力ファイルとほぼ同じですか？tscを使用してください。
• 複数の潜在的な出力を持つビルドパイプラインが必要ですか？トランスパイルにはbabel、型チェックにはtscを使用してください。

トランスパイルにはBabel、型にはtsc

これは、JavaScriptコードベースからTypeScriptに移植された可能性がある既存のビルドインフラストラクチャを持つプロジェクトで一般的なパターンです。

この手法は、Babelのpreset-typescriptを使用してJSファイルを生成し、TypeScriptを使用して型チェックと.d.tsファイル生成を行う、ハイブリッドアプローチです。

BabelのTypeScriptサポートを使用することで、既存のビルドパイプラインと連携でき、Babelはコードの型チェックを行わないため、JSの出力時間が速くなる可能性が高くなります。

型チェックとd.tsファイル生成

Babelを使用することの欠点は、TSからJSへの移行中に型チェックが行われないことです。 これは、エディターで見逃した型エラーが、実稼働コードに紛れ込む可能性があることを意味します。

それに加えて、BabelはTypeScript用の.d.tsファイルを作成できないため、プロジェクトがライブラリである場合に、プロジェクトの作業が難しくなる可能性があります。

これらの問題を修正するには、TSCを使用してプロジェクトの型チェックを行うコマンドを設定する必要があるでしょう。 これは、Babelの構成の一部を対応するtsconfig.jsonに複製し、これらのフラグが有効になっていることを確認することを意味するでしょう。

"compilerOptions": {
  // Ensure that .d.ts files are created by tsc, but not .js files
  "declaration": true,
  "emitDeclarationOnly": true,
  // Ensure that Babel can safely transpile files in the TypeScript project
  "isolatedModules": true
}

これらのフラグの詳細については、

• isolatedModules
• declaration、emitDeclarationOnly