Using Typescript in Angular for years I am a big supporter of typescript. It really helps me write more reliable code and catch errors faster. Recently I got involved in React project that was created using react-boilerplate. Since the react boilerplate project does not have support of typescript I decided to add it using typescript documentation at https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

Here are the steps:

Add typescript, typescript loader and types for react, node, jest and styled components

2. Replace babel with typescript in internals/webpack/webpack.base.babel.js and source-map support for js file.

module: {

rules: [

{

test: /\.jsx?$/,

exclude: /node_modules/,

use: {

loader: 'ts-loader'

},

},

// addition - add source-map support

{

enforce: "pre",

test: /\.js$/,

exclude: /node_modules/,

loader: "source-map-loader" },

...

3. Add ts and tsx file extensions in resolve block in internals/webpack/webpack.base.babel.js

resolve: {

extensions: ['.js', '.jsx', '.react.js', '.ts', '.tsx']

}

4. Create tsconfig.json in the root of the project.

{

"compilerOptions": {

"baseUrl": "app",

"outDir": "build/dist",

"module": "esnext",

"target": "es5",

"lib": ["es6", "dom"],

"sourceMap": true,

"allowJs": true,

"jsx": "react",

"moduleResolution": "node",

"rootDir": "./",

"forceConsistentCasingInFileNames": true,

"allowSyntheticDefaultImports": true

},

"exclude": [

"node_modules",

"build",

"scripts",

"acceptance-tests",

"webpack",

"jest",

"internals"

]

}

Here are some points about the config:

a. You need to mix ts and js (especially in the begging of the conversion process. So use allowJs

b. To support imports like that use baseUrl

import HomePage from 'containers/HomePage/Loadable';

c. To be able to import react use allowSyntheticDefaultImports

import React from 'react';

5. Rename index.js to index.tsx and recompile.

That’s it. It works!