Configuring Typescript with React

In this part, let’s setup typescript in our React client app.

Step 1 : Install

yarn add -D typescript ts-loader @types/react @types/react-dom@types/react-hot-loader

Here’s what each package is for :

typescript – the library that converts Typescript files (file extension with .ts or .tsx) in to javascript.

ts-loader – webpack loader that integrates typescript in to webpack. webpack uses this loader to help convert TS file in to the JS and integrate into the final bundle.

@types/react – provide typing for React API. Also, provides intellisence and documentation

@types/react-dom – provide typing for React DOM API. Also, provides intellisense and documentation.

@types/react-hot-loader – provide typing for React Hot Loader API. Also, provides intellisense and documentation.

If your are using lerna :

 $ lerna add 'typescript' --scope '@fullstackopenjs/client'
 $ lerna add 'ts-loader' --scope '@fullstackopenjs/client'
 $ lerna add '@types/react' --scope '@fullstackopenjs/client'
 $ lerna add '@types/react-dom' --scope '@fullstackopenjs/client'
 $ lerna add '@types/react-hot-loader' --scope '@fullstackopenjs/client'

Add tsconfig.json to root directory.

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/", // put the compiled code in to dist folder
    "rootDir": "src", // compile every .ts file located in the src
    "noImplicitAny": true,
    "module": "commonJS",
    "target": "es2016",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],  // inclue files that are in the src directory
  "exclude": ["node_modules", ".vscode"] // exclude files from compiling
}

Configure Webpack

Webpack needs to be configured to process typescript files. We need to make the following
changes to webpack.config.js :

• add ts-loader and test for ts and tsx files:

...
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      }
...

• add ts and tsx to the list of extensions to resolve

...
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  }
...

• remember to rename the js files to tsx if they have React code, else ts and fix the entry point
  

…
entry: path.resolve(__dirname, 'src', 'index.tsx'),
…

Change File extensions of Javascript/JSX to TypeScript (ts/tsx)

App.tsx :

import * as React from "react";
import { hot } from "react-hot-loader";
import "./App.css";

const App: React.FC = () => {
  return(
    <div className="App">
    <h1> Hello this is Sujay Kundu ! </h1>
  </div>
  )
}

export default hot(module)(App);

index.tsx:

import * as React from "react";
import ReactDOM from "react-dom";
import App from './App';

const rootElement = document.getElementById('root');
ReactDOM.render(<App />,rootElement);

Now let’s test our client, start the App :

yarn client

It should start the localhost:3000, should give this output.

“Hello this is Sujay Kundu !”

Now for any changes, it will be hot reloaded in the client.

Great, we have successfully configured typescript with our react client. In the next step we will look at how we can util