react-app-rewire-typescript-babel-preset
Add TypeScript support to Create React App using @babel/preset-typescript
This is a plugin for react-app-rewired that adds support for TypeScript using the Babel preset @babel/preset-typescript.
Changelog
[2.2.1] - 2018-06-10
Fixed
- Resolve compatible issue between
@babel/core@7.0.0-beta.44
(used inreact-scripts@2.0.0-next.66cc7a90
) and@babel/preset-typescript@^7.0.0-beta.48
. Fixes #12.
[2.2.0] - 2018-05-19
Added
- Support for loading
src/setupTests.ts
(TypeScript). The rewire will load an existing Javascript version if no TypeScript version is present. Fixes #8.
[2.1.2] - 2018-05-15
Added
- Added missing README to published package.
[2.1.1] - 2018-04-05
Fixed
- Prefer files ending with TypeScript extensions over Javascript (#5).
[2.1.0] - 2018-03-22
Added
- Support for
react-scripts@2.0.0-next.b2fd8db8
(thanks @detrohutt)
Upgrading from v1
Update to the latest version of react-scripts@next
and replace react-app-rewired v1
with react-app-rewired@next
.
Issues and Limitations
This is experimental, should not be used for production, and will leave you without support from the create-react-app team. Use at your own risk.
For some background into the topic of using Babel to remove TypeScript type annotations, I recommend reading some of the following:
- http://artsy.github.io/blog/2017/11/27/Babel-7-and-TypeScript/
- https://babeljs.io/blog/2017/09/12/planning-for-7.0
The preset @babel/preset-typescript
is not included in this package at this time. Once react-scripts v2 and Babel 7 officially release, this choice will be revisited. What this means is that you can expect to see missing peer dependency warnings for @babel/core.
Installing / Getting started
Create a React project using version 2 of Create React App (currently beta).
$ create-react-app --scripts-version=react-scripts@next my-project
This will tell the create-react-app
tool to use the beta version of react-scripts
. When version 2 is officially released, the command will need to be run without --scripts-version=react-scripts@next
.
Follow the installation directions for react-app-rewired.
Important You will need to install v2 of react-app-rewired
, which at the time of writing can be installed using the command npm install --save-dev react-app-rewired@next
.
Create a config-overrides.js
in your project root with the following contents:
const {
rewireWebpack: rewireTypescript,
rewireJest: rewireTypescriptJest
} = require("react-app-rewire-typescript-babel-preset");
module.exports = {
webpack: function(config, env) {
return rewireTypescript(config);
},
jest: function(config) {
return rewireTypescriptJest(config);
}
};
Install typings for React and Jest:
$ npm install --save-dev @types/react @types/react-dom @types/jest
Install react-app-rewire-typescript-babel-preset and @babel/preset-typescript:
$ npm install --save-dev react-app-rewire-typescript-babel-preset @babel/preset-typescript
You can view an example project here.
Usage
Entry Point
Rename files ending in the extension ".js" to ".ts" and ".tsx".
The entry point src/index.js
must be renamed src/index.tsx
.
Type Definitions
You will need at a minimum the following type definitions:
- @types/react
- @types/react-dom
- @types/jest (for testing)
SVG
Two types of imports are supported for SVG.
import logoUrl from "./logo.svg";
gives you the URL.
import { ReactComponent as Logo } from "./logo.svg";
gives you a component.
The following type definition can be used to support this.
declare module "*.svg" {
import * as React from "react";
const value: string;
const ReactComponent: React.StatelessComponent<React.SVGAttributes>;
export default value;
export { ReactComponent };
}
tsconfig.json
Sample {
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"moduleResolution": "node",
"lib": ["es2017", "dom"],
"jsx": "react",
"baseUrl": "./src",
"noEmit": true,
"skipLibCheck": true,
"pretty": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true
}
}
Type Checking
Type checking largely relies on your editor's integration.
You can add a type check command to your package scripts:
package.json
{
"scripts": {
"type-check": "tsc"
}
}
For this to work you will need to install TypeScript as a dev dependency:
$ npm install --save-dev typescript
Developing
Built With
This project targets Create React App version 2 (with Babel 7 support) and uses Yarn for dependency management.
Prerequisites
This project uses Yarn for dependency management instead of npm. Ensure you are using Yarn when making modifications and improvements to this project.
Setting up Dev
The project is structured as a monorepo to ensure that packages resolve correctly when used in a monorepo environment.
Clone the project and install the dependencies using Yarn.
git clone https://github.com/strothj/react-app-rewire-typescript-babel-preset.git
cd react-app-rewire-typescript-babel-preset/
yarn
The project in the example directory can be used for testing.
cd packages/example
yarn
yarn start
That will install the dependencies for the example project and start Create React App's development server.
Style guide
This project uses a combination of TSLint (Airbnb config) and Prettier.