How to set up a React application with TypeScript (and sass modules) using create-react-app

As the headline states, we will in todays guide show how we can set up a new project with create-react-app and add TypeScript to it so we can benefit from all the amazing things TS is giving us. We will also show how we can add TypeScript to an existing project which are using regular .jsx files.

As a bonus, we will also show how to use sass modules, for a smoother way of styling our components.

Prerequisites

• Run npm install -g npx in your terminal to get npx.

Setup a new project

• Navigate in your terminal to your workspace folder, and type following command

npx create-react-app example-app-ts --template typescript

Note - Change examle-app-ts to your preferred name of your project.

Start application

 cd example-app-ts
 npm start

And then navigate to http://localhost:3000/ and you should see your application up and running.

Add typescript to existing create-react-app application

Navigare in your terminal to your existing application and run following command

cd existing-application
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Cool. Now you should start changing the file types to .tsx instead of .js or .jsx.

Now when you restart your server, you will probably get a nice list of errors. I will go through how to fix the basics.

Add tsconfig.json

In the root of your project, create a file called tsconfig.json and add following configs

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

Super important

There will probably be some errors with imports, like import logo from './logo.png' etc. We need to declare some modules for this. Luckily, react scripts gives us what we need.

• In src folder, create a file called: react-app-env.d.ts. Note The naming is not that important, as long as it is ending with .d.ts.

Add this to the file:

/// <reference types="react-scripts" />

This will declare all necessary modules, like our style modules for example:

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

In index.tsx

Type the getElementById() to HTMLElement

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

If you just recently created your project, it might be working fine for now. If you have worked more on it, you will probably have more issues to solve for the compiler to be satisfied.

Adding sass

So, now when we got our TypeScript project set up, we want to give it some sass support as well.

npm install sass

And now we can use sass/scss files in our project. Example:

import styles from "./App.module.scss";

<div className={styles.div}>I'm a styled div!</div>

Outro

In this guide we learned how we can create a React application with support for TypeScript and also how we can use sass in the project. We also showed how we can migrate from a regular JavaScript/JSX project to a TypeScript supported one.

Learn more about css/sass modules here. Learn more about create-react-app here

Cheers!