10 steps to set up the Create React App + TypeScript + Ant-Design

At some point in the struggle with the Flow-Type on VSCode, I agreed to move to TypeScript. Support for Flow-Type is provided by third-party plug-in and does not suit at all. If the file is not valid from the point of view of Flow-Type, then transitions within the code between the files stop working, for example. And to return to WebStorm after exploring VSCode - I can not force myself. Microsoft, as usual, delays completely. Love VSCode, get TypeScript.

If someone told me a year ago that I would return to Microsoft fans, it was hard to imagine such a thing. But more amazing things happen. I am delighted with the quality of the Chinese set of React-components from Ant-Design . And although it is written in TypeScript, to fasten it, you need a babel-plugin-import .

But how to stay on the Create React App (CRA) - a fork for TypeScript (CRA-TS) sawed out Babel. Maintaining your own variation of the CRA seems insane. The promising Preact-CLI (as a replacement for the CRA) does not provide the necessary level of compatibility with React. But, playing with Preact-CLI, I noticed that preact.config.js is very similar to react-app-rewired , which I actively use to bypass the limitations of the Webpack configuration in the CRA. Compared this fact with the idea of ​​translating the CRA-TS with a ts-loader into an awesome-typescript-loader, within which you can turn on Babel. And voila!

0) install create-react-app

$ npm install -g create-react-app 

1) create a project

 $ create-react-app cra-ts-antd --scripts-version=react-scripts-ts $ cd cra-ts-antd/ 

2) add packages

 $ yarn add react-app-rewired react-app-rewire-less awesome-typescript-loader babel-core babel-plugin-import babel-preset-react-app -D 

3) add config-overrides.js

 module.exports = function override(config, env) { const tsLoader = config.module.rules.find(conf => { return conf.loader && conf.loader.includes('ts-loader') }) tsLoader.loader = require.resolve('awesome-typescript-loader') tsLoader.query = { useBabel: true, } const tsLintLoader = config.module.rules.find(conf => { return conf.loader && conf.loader.includes('tslint-loader') }) tsLintLoader.options = tsLintLoader.options || {} // FIXED Warning: The 'no-use-before-declare' rule requires type infomation. tsLintLoader.options.typeCheck = true const rewireLess = require('react-app-rewire-less') config = rewireLess(config, env) const path = require('path') // For import with absolute path config.resolve.modules = [path.resolve('src')].concat(config.resolve.modules) return config } 

4) change package.json; the code connects the react-app-rewired wrapper

  "scripts": { - "start": "react-scripts-ts start", - "build": "react-scripts-ts build", + "start": "BROWSER=none react-app-rewired start --scripts-version react-scripts-ts", + "build": "react-app-rewired build --scripts-version react-scripts-ts", } 

5) change tsconfig.json; the code includes settings for absolute import, among other things

 { "compilerOptions": { + "allowSyntheticDefaultImports": true, + "baseUrl": ".", + "paths": { + "*": ["*", "src/*"] + }, - "jsx": "react", + "jsx": "preserve", }, "exclude": [ + "config-overrides.js", ] } 

6) add .babelrc; the code assigns the required preset and connects babel-plugin-import

 { "presets": ["react-app"], "plugins": [ ["import", { "libraryName": "antd", "style": false }] ] } 

7) add antd; fixed version, because An error was found in the next version 2.12.3

 $ yarn add antd@2.12.2 

8) add src / resources / main.less; code overrides variable

 @import "~antd/dist/antd.less"; // import official less entry file @primary-color: #1DA57A; 

9) ... and connect to index.tsx; absolute path import from src

 + import 'resources/main.less'; 

10) change the App.tsx

  import * as React from 'react'; import './App.css'; + import { Button } from 'antd'; const logo = require('./logo.svg'); class App extends React.Component<{}, {}> { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React</h2> </div> <p className="App-intro"> To get started, edit `src/App.tsx` and save to reload. </p> + <Button type="primary">Test</Button> </div> ); } } export default App; 

Sources on GitHub