Create a React and Typescript app with Webpack

https://github.com/reactpractice-dev/basic-react-ts-boilerplate In a previous article, I went over how you can setup a simple React app with just Webpack and Babel. But what if you also want to enable Typescript for your project? This article goes over how to add Typescript support to a simple React + Webpack project. Step 1: Install Typescript and type definitions The first step is to just install Typescript: npm install typescript --save-dev Then, it helps to install the type definitions for all the libraries you already use. Usually, this would be: npm install @types/node @types/react @types/react-dom @types/jest --save-dev Step 2: Configure Webpack For Webpack to be able to process Typescript files, we will first need to install a custom loader. There are several available, but we’ll use ts-loader for our setup: npm install ts-loader --save-dev Next, we need to tell Webpack to process TS files as well. For this, we can update the webpack.config.js file to also support ts and tsx extensions: // webpack.config.js { // ..., module: { rules: [ // `js` and `jsx` files are parsed using `babel` { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ["babel-loader"], }, // `ts` and `tsx` files are parsed using `ts-loader` { test: /\.(ts|tsx)$/, loader: "ts-loader" } ], }, resolve: { extensions: ["*", ".js", ".jsx", ".ts", ".tsx"], }, } Step 3: Configure Typescript The Typescript compiler supports several options for how to treat the code, which are defined in a tsconfig.json file in the root of the project. Let’s create one for this project as well: // tsconfig.json { "compilerOptions": { "jsx": "react-jsx", } } For the purpose of this tutorial, I just added the minimal settings that are required for the React + TS + Webpack integration, but you can learn more about all the options available in the official documentation. Step 4: Start using Typescript If you already have some Javascript files in your project, now is a good time to change their extensions from js to ts and from jsx to tsx! Then, restart the app and you should see everything still working ✨ https://jsramblings.com/create-a-react-and-typescript-app-with-webpack/