How to Use React with TypeScript (Without Losing Your Mind)
May 16, 2025
“Hey, why use TypeScript with React?”
“Because chaos is only fun in movies, not in production code.”
A Quick Intro: What Are React and TypeScript?
React: The UI Library We All Love
React is a JavaScript library developed by Meta for building user interfaces. It's component-based, fast, and declarative — meaning you describe what you want, and React figures out the how. It's like giving directions with Google Maps instead of yelling from a moving car.
TypeScript: JavaScript with Superpowers
TypeScript is a superset of JavaScript that adds static typing, meaning you can catch bugs during development rather than in production. It turns your IDE into a super-powered assistant, giving you autocomplete, refactoring tools, and helpful error messages.
Together, React + TypeScript makes for safer, cleaner, and more scalable front-end code. It’s like pairing peanut butter with jelly — once you try it, you won’t want to go back.
Meet React’s New Best Friend: TypeScript
You’ve probably used React before. You’ve probably typed props as any and called it a day. And somewhere, a TypeScript fan quietly shed a tear.Â
But today, we're going full TypeScript. No more any, no more mystery props. Just clean, predictable code with IDE support that makes you feel like a genius.
Let’s dive in.
Setting Up: Your First Date with TypeScript (Using Vite!)
First things first — forget CRA. We’re going with Vite because it’s faster, more modern, and has better TypeScript support out of the box. Let’s get started.
Open your terminal and type:
This command will set up a new React project with TypeScript, powered by Vite. It’s like going from a 1990s flip phone to the latest iPhone. And who doesn’t want that?
TypeScript Basics in React: No More “Guess the Props”
Let’s say you have a simple Namaste component:
What just happened?
- We created a NamasteProps type.
- We used React.FC to type the component.
- age is optional, so we added the ?.
“But wait, I could just use PropTypes.”
Yeah… and you could also use a flip phone in 2025, but why would you?
Bonus: Use useState with Types Like a Pro
If you don’t provide the type, TypeScript will infer it — but if you need to be explicit (and you often should), this is the way.
For more complex state:
Boom. No more guessing what's inside your state.
Typing Events in React
Ever been confused by event types? You’re not alone.
“I used to just put any here…”
“Yeah, and now we don’t talk about that phase.”
Typing Props for Components with Children
Let’s say you have a layout component:
This makes sure that children are typed properly. No more warnings from your IDE or unhelpful runtime errors.
The Magic of useReducer with TypeScript
Here’s where TypeScript really shines — complex logic and state management.
It’s like React and TypeScript are reading each other’s minds here.
Generics in React: Making Your Code Reusable & Type-Safe
Once you’ve mastered typing individual components, generics are your next power-up.
Let’s say you’re building a reusable `Select` component:
Here, TypeScript knows exactly what type of value you're selecting — no casting, no `any`, just clean type inference.
Tip: Always define the generic type on both the props and the function component (`<T>`), or TypeScript will lose track.
This becomes really handy in custom hooks too.
Gotchas When Using React with TypeScript
"TypeScript will protect you from a lot, but it won’t protect you from yourself."
Even the best setups come with a few traps. Here's what to watch out for:
1. Â Overusing `any`
2. Â Forgetting to Type Props (and Thinking It'll Be Fine)
This will compile, but it's a hidden trap.
3. `useRef` and Null Values
React’s `useRef` can be confusing with TypeScript. Especially if you're referencing a DOM element.
If you try to access `.current` without checking for `null`, TypeScript will throw a fit — and rightly so.
4. Confusing Type Inference with Type Safety
Sometimes TypeScript infers types that are *technically correct* but *contextually wrong*.
Explicit types are your friend.
5. ‍Using `React.FC` Without Understanding It
While `React.FC` is handy, it also brings along implicit children and typing quirks. Use it *if* you need those features — otherwise, you can skip it.
6. Component Composition Issues with Generic Types
If you're building generic components like a reusable `Select<T>` — TypeScript gets *real* picky. Make sure to explicitly define generics:
Gotchas like these are where TypeScript goes from "magic" to "mystery box" — but once you get it, it clicks.
Best Practices for Using React with TypeScript
Here’s how to keep your code clean, safe, and scalable:
- Be explicit when it matters
TypeScript is great at inference, but don’t rely on it blindly — especially for props, state, and function return types. - Avoid `any` like it’s radioactive
If you must use it (temporarily), comment why. Otherwise, TypeScript can’t help you. - Prefer `type` for objects, `interface` for components (or pick one and stick to it)  Both are valid, but consistency helps maintainability.
- Use `React.ReactNode` for children, not `any`
Avoid lazy typing. Typing children properly gives you better tooling support. - Type hooks explicitlyÂ
`useState<Type>()`, `useRef<Type>(null)`, `useReducer<State, Action>()` — better DX, fewer bugs. - Name types clearly and consistentlyÂ
Instead of `Props`, use `UserCardProps`, `SelectProps<T>`, etc. It’s easier to trace. - Embrace composition and reusability with genericsÂ
Generics unlock powerful, reusable components and hooks. - Let your IDE helpÂ
Lean into autocomplete, inline docs, and TypeScript error messages. They’re annoyingly accurate for a reason. - Refactor types, not just codeÂ
As your app grows, extract and reuse types just like you would with functions or components.
Conclusion: Embrace the (Type)Script
React and TypeScript might feel like an arranged marriage at first. But give it time, and you’ll realize they’re actually soulmates. You’ll write fewer bugs, ship faster, and your future self will thank you.
“Wow, this code just works.”
“That’s TypeScript for you.”