記事の意図
tsconfig.jsonとかbabel.config.jsonとか何をしているのか不明だった。
だから、ざっくりと理解する。
TSCとBabelの共通機能
TSCもBabelも「TypeScritpからJavaScript」へのトランスパイル（翻訳作業）をしてくれる。
- TSCによる翻訳作業のルールを記述するのが、tsconfig.json。
- Babelによる翻訳作業のルールを記述するのが、babel.config.json。
（もちろんトランスパイルするだけではなく、他にもいろいろしてくれるけどざっくりとそう理解しました）
ここで新たな疑問
なんでtsconfig.jsonとbabel.config.jsonが両方あるの？
TSCとBabel、それぞれの特徴を生かして、役割分担をしているから
Using Babel with TypeScriptを読んでだいぶすっきりしました。
TSCとBabelはトランスパイル機能を持つけれど、それぞれに特徴がある。
TSC vs Babel
| .d.tsの作成 | トランスパイル時の型チェック | ビルドパイプラインを作成 | |
|---|---|---|---|
| TSC | 〇 | 〇 | × |
| Babel | × | × | 〇 |
※.d.tsファイル（宣言ファイル）、ビルドパイプラインについては割愛
ざっくり、このような特徴があるらしい。
これらすべての機能を使いたいから、TSCもBabelも採用しているプロジェクトが多いとのこと。
おわりに
tsconfig.jsonとbabel.config.jsonが両方ある理由がわかりました。
ざっくりと理解したので触りながら、その機能を少しずつ確かめていきます。