How to statically type React components with TypeScript

Key takeaways:

  1. Combining React with TypeScript enhances error detection, code quality, and developer productivity by adding static types to JavaScript.

  2. The benefits of static typing are:

    1. Early error detection: Catch type errors during development, reducing runtime bugs.

    2. Improved code autocompletion: IDEs offer better suggestions for props and states.

    3. Safer refactoring: TypeScript highlights potential issues during changes in props or states.

  3. .tsx files allow the use of JSX within TypeScript, with differences in type casting from .ts files. They are essential for TypeScript-enabled React components.

  4. To set up a react typeScript project we need npm, Node.js, TypeScript, React, and React-DOM to be installed.

  5. Command to create a TypeScript-based React project is npx create-react-app <app-name> --template typescript.

  6. Use npm start to run the app and view it locally at localhost:3000.

React and TypeScript are two robust technologies that provide a seamless development experience for modern web development. React is a famous JavaScript library for building UI (user interfaces), while TypeScript is a JavaScript superset that adds static types to Javascript. The React Typescript combination aids in catching errors early, improving code quality, and enhancing productivity. Here, we will explore how to statically type React components with TypeScript.

Benefits of static typing

Static typing means defining the types of props, states, and variables in the code at the time of compiling. It is beneficial for the following reasons:

  • Early error detection: Type errors are detected in the development phase, resulting in reduced runtime errors and enhanced code quality.

  • Code autocompletion: IDEs provide better auto-completion, which makes props and state exploration easy.

  • Improved refactoring: Changing a prop or state is safer because TypeScript underlines potential issues.

.tsx files

The .tsx files are introduced in React TypeScript to enable JSX in TypeScript files.

Two major differences between .tsx and .ts files are:

  • .tsx files use as as the default option when type casting, while <> is used in .ts files.

  • .tsx files enable JSX support in TypeScript, making development easier.

Setting up a React Typescript project

To set up a React TypeScript project, the prerequisites are:

  • npm must be installed (version > "8.x.x"). Here’s how we can install npm.

  • nodejs must be installed (version > "10.x.x"). Here’s how we can install Node.js.

  • typescript should be installed (version > "4.x.x"). Here’s how we can install TypeScript.

  • react should be installed (version > "10.x.x").

  • react-dom should be installed (version > "10.x.x").

We can create a new React TypeScript app by running the command:

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

In this command,

  • npx: This is a package runner, and it is used to install packages that are not installed globally on the system. npx installs packages temporarily if they are not present.

  • create-react-app: This is a command line tool to easily create a React application, and it configures the project structure and builds tools and the development server automatically.

  • ts-react-app: This is the name of the React application we create.

  • --template typescript: This shows that we are going to use the predefined TypeScript template for this application.

Go to the application directory with the command:

cd ts-react-app
Terminal command to enter application directory

In the directory, we can find a list of files including package.json and tsconfig.json and sub-directories like src and public.

In the package.json file:

  • "name": "ts-react-app": This is the name of the project/application.

  • "version": "0.1.0": This is the version number of the project.

  • "private": true: This indicates that the project is private and should not be published to any public package registry.

  • "dependencies": This lists the dependencies required for the project.

  • "scripts": This defines various scripts that can be executed using npm.

  • "eslintConfig": This configures ESLint for the project’s linting rules.

  • "browserslist": This specifies the browsers to target for compatibility in production and development.

In the tsconfig.json file:

  • "compilerOptions": This configures how TypeScript compiles your code.

  • "include": ["src"]: This specifies files to include in compilation from the src directory.

The src directory consists of 3 .tsx files:

  • src/index.tsx: This marks the entry point for the React application. It renders the main components.

  • src/App.tsx: This is mostly the main component of the application. It is the root component and holds the entire app’s structure, features, and layout.

  • src/App.test.tsx: This is a subcomponent of the app.tsx component. It is an example component that can be customized or replaced.

The public directory consists of 3 files:

  • index.html: It is the main HTML template that serves as an entry point for the application.

  • favicon.ico: This is an icon displayed in the browser’s tab when the app is open.

  • manifest.json: This is a metadata file for web applications that contains information about the app’s design.

We can run the application with the command:

npm start
Terminal command to start the application

This will start our application, and we can view it at localhost:3000 on the local browser.

To view the React TypeScript application, click “Run” and once the code compiles successfully, access it through the link.

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
Running newly build project

Conclusion

Statically typing React components with TypeScript enhances the overall development experience by providing early error detection, improving code quality, and making refactoring safer. By grasping TypeScript’s static typing and React’s component-based architecture, developers can create more reliable and maintainable web applications. Setting up a React project with TypeScript is straightforward, and once configured, it streamlines development through better IDE support and efficient code management.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved