Introduction to TypeScript

This chapter introduces TypeScript. We will cover the basic skills that are required to use TypeScript with React and create our first React app with TypeScript.

In this chapter, we will look at the following topics:

• Understanding TypeScript
• Using TypeScript features with React
• Creating a React app with TypeScript

Technical requirements

For our work, React version 18 or higher will be required.

You can find more resources at the GitHub link for this chapter: https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-3-and-React-Fourth-Edition/tree/main/Chapter09.

Understanding TypeScript

TypeScript (https://www.typescriptlang.org/) is a strongly typed superset of JavaScript, developed by Microsoft. TypeScript adoption has grown a lot in recent years and it is widely used in the industry. It has an active development community and is supported by most popular libraries. In the JetBrains 2022 Developer Ecosystem report, TypeScript was named the fastest-growing programming language (https://www.jetbrains.com/lp/devecosystem-2022/).

TypeScript offers several advantages compared to JavaScript, mostly due to strong typing:

• TypeScript allows you to define types for variables, functions, and classes. This allows you to catch errors early in the development process.
• TypeScript improves the scalability of your app, as well as making your code easier to maintain.
• TypeScript improves code readability and makes your code more self-documenting.

Compared to JavaScript, the TypeScript learning curve can be steeper if you...

Using TypeScript features with React

TypeScript is a valuable addition to your React projects, especially when they grow in complexity. In this section, we will learn how we can get prop and state type validation in our React components and detect potential errors early in development.

State and props

In React, you have to define the type of component props. We have already learned that component props are JavaScript objects, so we can use type or interface to define the prop type.

Let’s look at one example where a component receives a name (string) and age (number) prop:

function HelloComponent({ name, age }) {
  return(
    <>
      Hello {name}, you are {age} years old!
    </>
  );
}
export default HelloComponent;

Now, we can render our HelloComponent and pass props to it:

// imports...
function App() {
  return(
    <HelloComponent name="Mary" age={12} />
  )
}
export default App;

If we use TypeScript, we can first...

Creating a React app with TypeScript

Now, we will create a React app using Vite, and we will use TypeScript instead of JavaScript. We will use TypeScript later when we develop the frontend for our car backend. As we mentioned earlier, Vite comes with built-in TypeScript support:

1. Create a new React app using the following command:

   npm create vite@latest
   

2. Next, name your project tsapp, and select the React framework and the TypeScript variant:

Figure 9.7: React TypeScript app

3. Then, move to your app folder, install dependencies, and run your app using the following commands:

   cd tsapp
   npm install
   npm run dev
   

4. Open your app folder in VS Code, and you will see that the filename of our App component is App.tsx:

   

   Figure 9.8: App.tsx

   The file extension of TypeScript React files is .tsx (combining JSX with TypeScript). The regular file extension of TypeScript files is .ts.

5. Locate the tsconfig...

Summary

In this chapter, we started to learn TypeScript and how to use it in our React apps. Now, we know how to use common types in TypeScript and how to define types for React component props and states. We also learned to define types for events, and created our first React app with TypeScript using Vite.

In the next chapter, we will focus on networking with React. We will also use the GitHub REST API to learn how to consume a RESTful web service with React.

Questions

1. What is TypeScript?
2. How do we define variable types?
3. How do we define types in functions?
4. How do we define types for React props and states?
5. How do we define types for events?
6. How do we create a React TypeScript app using Vite?

Further reading

Here are some other useful resources for learning about React with TypeScript:

• React TypeScript Cheatsheets (https://react-typescript-cheatsheet.netlify.app/)
• Learn React with TypeScript, Second Edition, by Carl Rippon (https://www.packtpub.com/product/learn-react-with-typescript-second-edition/9781804614204)
• Mastering TypeScript, by Nathan Rozentals (https://www.packtpub.com/product/mastering-typescript-fourth-edition/9781800564732)

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask the author questions, and learn about new releases – follow the QR code below:

https://packt.link/FullStackSpringBootReact4e