How to Write Typescript Into React

This blog is about the technical stuff which is related to how you can add TypeScript into your existing React js app

What do we want to do?

If you are starting a new project, create-react-app already includes the option to launch the project using TypeScript. To do this, simply use the flag - scripts-version = react-scripts-ts to run create-react-app and you can create a project with TypeScript for your connection. From then on, you can continue to process your application.

But most of us don't start new projects every day. This means that you either maintain the React application at this time or develop a React application without TypeScript. What happens if I want to add TypeScript support to an existing application? This is where the next steps will help you do this

TypeScript Webpack Loader and Adding TypeScript

First, you need to add TypeScript to your project. Open a command line and go to the root folder of your project. Run the accompanying order to introduce TypeScript and wonderful typescript-loader:

                npm install --save@types/react@types/react-dom@types/prop-types
        

Awesome-typescript-loader is a popular web package loader that allows you to compile and add transcribed TypeScript files to the compilation of JavaScript web packages.

Note: If you are not using Webpack, add a package loader that can transfer TypeScript to JavaScript to your project.

You will notice that I don't have a global installation of TypeScript (using the -g flag). The reason is that I want to manage my version of TypeScript in every project. If there are differences in the version or changes in the definition file, retransmissions in the global installation may introduce TypeScript compilation errors. Since both TypeScript and awesome-typescript-loader are used for development, I use bookmark-save-dev to add dependencies as development dependencies.

Now Add the TypeScript Configuration File

If you want to configure TypeScript compiler you have to add the tsconfig.json file  just like below

                
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}
        

Webpack configuration for Building the TypeScript

The last thing that you will have to do to enable TypeScript in your app is to add a build step in Webpack that transpires TypeScript code to JavaScript code.

Now last but not the least you hove to enable the typescript in your app. just like below file webpack.config.js 

         const path = require('path');
const webpack = require('webpack');
module.exports = {
    entry: './index.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    module: {
        rules: [
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
            { test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] }}
        ]
    },
    stats: {
        colors: true
    },
    devtool: 'source-map'
};
       
        

after all now your project is ready to use the typescript. You can compile a react component using .tsx file