If you're learning React with TypeScript, you've probably encountered code like this:

type User = { name : string ; age : number ; };

function UserCard ({ user }: { user : User }) { return < h2 > { user . name } </ h2 >; }

Enter fullscreen mode

Exit fullscreen mode

But what exactly is type ? Why do we use User ? What does : User mean? What's the difference between type and interface ? And how do TypeScript, React props, state, events, and hooks work together?

This guide covers the TypeScript fundamentals you actually need to build React applications confidently.

We'll start with the basics and gradually move into real-world React patterns.

Table of Contents

What Is TypeScript?

JavaScript vs. TypeScript

Type Annotations

Basic Types

Type Inference

Arrays and Objects

type vs.…