TypeScript and React: How to Use TypeScript with React

Are you interested in building modern web applications with React and TypeScript? TypeScript is a powerful programming language that adds static typing to JavaScript, providing developers with better code quality, faster feedback loops, and increased productivity. On the other hand, React is a popular JavaScript library for building user interfaces, providing fast and efficient rendering and a declarative programming model. In this article, we will explore how to use TypeScript with React and build a simple app step by step.

Prerequisites

Before we dive into TypeScript and React, we assume that you have basic knowledge of JavaScript, React and npm. You also need to have a working development environment with Node.js installed. If you are not familiar with these concepts, we recommend you to read the following resources:

• JavaScript Crash Course
• React Crash Course
• npm documentation

Creating a React App with TypeScript

Let's start by creating a new React app with create-react-app. We will pass the --template typescript flag to create-react-app to generate a new project with TypeScript support. Open your terminal and run the following command:

npx create-react-app my-app --template typescript

This will create a new React app in a folder called my-app and install all the required dependencies. Once the installation is complete, navigate to the my-app folder and open it in your favorite code editor.

cd my-app
code .

Understanding TypeScript Configuration

Before we start writing code, let's take a moment to understand how TypeScript works in a React project. TypeScript requires a configuration file called tsconfig.json, which provides TypeScript compiler with the necessary information to check your code and generate JavaScript output. When you use create-react-app with TypeScript, a default tsconfig.json file is generated for you. You can find it in the root directory of your project. The contents of the file should look like this:

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

Let's briefly go over the compiler options:

• "target" specifies the ECMAScript version to use as the output language level.
• "lib" specifies the libraries to implicitly include in your code.
• "allowJs" allows JavaScript files to be imported, checked, and used with TypeScript.
• "skipLibCheck" skips type checking of declaration files.
• "esModuleInterop" enables compatibility with CommonJS and AMD modules.
• "allowSyntheticDefaultImports" allows default imports from modules with no default export.
• "strict" enables all strict type checking options.
• "forceConsistentCasingInFileNames" ensures consistent casing of file names.
• "module" specifies the module format.
• "resolveJsonModule" allows importing JSON files as modules.
• "isolatedModules" enables file-level imports and exports.
• "noEmit" tells the TypeScript compiler not to write output files.
• "jsx" specifies how to handle JSX syntax in TSX files.

The include property specifies the files to include in the compilation process. In this case, we want to include all files in the src directory.

Creating a Simple React Component

Now that we have our TypeScript configuration set up, let's create our first React component. Create a new file called Hello.tsx in the src folder and type the following code:

import React from 'react';

export interface HelloProps {
  name: string;
}

export const Hello: React.FC<HelloProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

Let's go over the code:

• import React from 'react' imports the React library.
• export interface HelloProps defines the interface of our component props. In this case, we expect a name string as a prop.
• export const Hello: React.FC<HelloProps> defines the Hello component as a functional component that receives HelloProps as its props.
• ({ name }) => <h1>Hello, {name}!</h1> is the body of our component. It receives the name prop and renders it as a greeting.

Using a React Component

Now that we have our Hello component defined, let's use it in our app. Open App.tsx and replace its contents with the following:

import React from 'react';
import { Hello } from './Hello';

function App() {
  return <Hello name="TypeScript" />;
}

export default App;

Here, we import our Hello component and render it with a name prop equal to "TypeScript". Save the file and run your app with npm start. You should see the message "Hello, TypeScript!" being displayed in your browser.

Using React Hooks with TypeScript

React hooks provide a powerful way to manage state and behavior in your components. Here's an example of how to use the useState hook with TypeScript:

import React, { useState } from 'react';

export interface CounterProps {
  initialCount: number;
}

export const Counter: React.FC<CounterProps> = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Let's go over the code:

• import React, { useState } from 'react' imports the useState hook from React.
• export interface CounterProps defines the interface of our component props. In this case, we expect an initialCount number as a prop.
• const [count, setCount] = useState(initialCount) declares a state variable count initialized with the initialCount prop and a setter function setCount to update it.
• <p>Count: {count}</p> displays the current count state value.
• <button onClick={() => setCount(count + 1)}>Increment</button> defines a button that calls setCount to increase the count state value by one.

Using React Context with TypeScript

React context allows you to share data between components without having to pass it explicitly through props. TypeScript can help you provide type-safe data and interfaces. Here's an example of how to use context with TypeScript:

import React, { useContext } from 'react';

export interface Theme {
  background: string;
  foreground: string;
}

const defaultTheme: Theme = {
  background: '#ffffff',
  foreground: '#000000',
};

export const ThemeContext = React.createContext<Theme>(defaultTheme);

export const ThemedButton: React.FC = () => {
  const theme = useContext(ThemeContext);

  return (
    <button style={{ backgroundColor: theme.background, color: theme.foreground }}>
      Themed Button
    </button>
  );
};

Let's go over the code:

• export interface Theme defines the Theme interface, describing the background and foreground colors.
• const defaultTheme: Theme provides a default theme values.
• export const ThemeContext = React.createContext<Theme>(defaultTheme) creates a new context with a default theme.
• const theme = useContext(ThemeContext) retrieves the current theme using useContext.
• <button style={{ backgroundColor: theme.background, color: theme.foreground }}>Themed Button</button> uses the background and foreground properties from the theme props to set the button styles.

Conclusion

TypeScript and React are a great combination for building modern web applications. TypeScript's static typing and tooling can help developers catch errors early and increase productivity, while React's declarative programming model and fast rendering can help deliver a great user experience. We hope this tutorial helped you understand how to use TypeScript with React and showed how TypeScript can help you build type-safe and error-free applications. If you have any feedback or questions, feel free to leave them in the comments section below.

Editor Recommended Sites