Add Babel to Typescript React app

1
votes

I've created a React app with Typescript support using create-react-app.

I'm targeting ES5 with the Typescript transpiler, which gives me support for ES6 syntax, but doesn't add the polyfills for the enhanced Array features etc of ES6 like Babel does.

Is there a way to use both Typescript and Babel?

i.e. .ts > ES6 > babel > ES5.

2
reactjstypescriptbabeljs

2 Answers

0
votes

add the polyfills for the enhanced Array features etc of ES6 like Bable does.

Babel doesn't do that. core-js does that. You can use core-js with TypeScript. Just add the following to your code: 

import 'core-js'

More

0
votes

This is how I go about it:

  1. create-react-app your-app
  2. cd your-app
  3. tsc --init (initialize your Typescript config file)
  4. mkdir ts (create a ts folder to store your Typescript source code)
  5. Delete existing files in your src folder.

  6. Edit your tsconfig.json file and set the following options:

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

  7. tsc -w -p . (start Typescript compiler in watch mode)

  8. npm start (start React development script)

Now, create index.tsx in your ts folder and start building up your app. As you add and save files, they'll get compiled by Typescript compiler and copied into the src folder, where Babel/CRA will pick it up and transpile it to whatever CRA typically does. This method preserves the CRA (create-react-app) project structure, doesn't require substituting the react-scripts, etc. You just code in Typescript, the Typescript compiler will compile it to modern Javascript and CRA does the rest.

Caveat: While tsc will create the Javascript files in its output folder (src), you'll have to manually copy your css, images, and other static resources.