BabelをTypescriptに追加するReact app

Question

create-react-appを使用してTypescriptをサポートするReactアプリを作成しました。

私はES6構文をサポートしていますが、BabelのようなES6の拡張された配列機能などのポリフィルを追加しません。

TypescriptとBabelの両方を使用する方法はありますか？

すなわち.ts> ES6>バベル> ES5。

Answer 1

これは私がそれについて移動する方法です：

1. create-react-app your-app
2. cd your-app
3. tsc --init（あなたの活字体のconfigファイルを初期化）
4. mkdir ts
5. は、あなたのsrcフォルダ内の既存のファイルを削除します（あなたの活字体のソースコードを格納するためのtsフォルダを作成します）。

6. 編集しtsconfig.jsonファイルと設定し、次のオプション：

   "target": "es2017", "module": "es2015", "jsx": "react-native", "outDir": "./src", "rootDir": "./ts", "moduleResolution": "node"

7. tsc -w -p .（ウォッチモードでの活字体のコンパイラを起動する）

8. npm start

（開始開発スクリプトと反応）これで、tsフォールドにindex.tsxを作成しますあなたのアプリを構築し始める。ファイルを追加して保存すると、Typescriptコンパイラによってコンパイルされ、srcフォルダにコピーされます。ここで、Babel/CRAがそれを受け取り、それを通常のCRAに置き換えます。このメソッドは、CRA（create-react-app）プロジェクト構造を維持し、react-scriptsなどを代用する必要はありません。Typescriptでコード化すれば、Typescriptコンパイラは現代のJavascriptにコンパイルし、CRAは残りを行います。

警告：tscは、その出力フォルダ（src）内のJavaScriptファイルを作成しますが、あなたは手動であなたのcss、画像、およびその他の静的リソースをコピーする必要があります。

Answer 2

BableのようにES6の拡張された配列機能などのポリフィルを追加します。

バベルはそれをしません。 core-jsです。 Type-Scriptでcore-jを使用できます。ちょうどあなたのコードに次の行を追加します。

import 'core-js' 

もっと

• Covered in the lib.d.ts option