TypeScript + React is a power combo. If you’ve been building React apps in plain JavaScript and wondering whether to switch to TypeScript — short answer: yes, you should.
But we get it — TypeScript can feel overwhelming at first. Don’t worry — this post will help you master TypeScript in React, fast. No theory overload. Just clear examples and tips that actually make sense.
🤔 Why TypeScript with React?
- Catch errors at compile-time, not runtime
- Better code autocomplete & IntelliSense
- Self-documenting components
- Easier to scale large apps
If you've ever passed the wrong prop type and spent hours debugging… TypeScript saves you.
🚀 Step 1: Create a React + TypeScript App
The easiest way to start:
\bash
npx create-react-app my-app --template typescript
\\
Or with Vite (faster!):
\bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
\\
🧱 Step 2: Typing Props in Functional Components
Let’s say you have a simple Greeting\ component.
🛑 JavaScript way:
\jsx
const Greeting = ({ name }) => {
return <h1>Hello, {name}</h1>;
};
\\
✅ TypeScript way:
\`tsx
type GreetingProps = {
name: string;
};
const Greeting: React.FC = ({ name }) => {
return
Hello, {name}
;};
`
\
Easy, right? Now TypeScript will complain if name\ is not a string. 🛡️
🧠 Step 3: Typing useState
Without types:
\tsx
const [count, setCount] = useState(0);
\\
With types (custom):
\tsx
const [user, setUser] = useState<{ name: string; age: number } | null>(null);
\\
Or define a type:
\`tsx
type User = {
name: string;
age: number;
};
const [user, setUser] = useState(null);
`\
No more guessing what’s inside your state 🔍
📥 Step 4: Typing useEffect + Events
useEffect:
\tsx
useEffect(() => {
console.log(\"Component mounted\");
}, []);
\\
👉 You usually don’t need to add types unless you're using external values.
Typing events:
\tsx
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
console.log(e.target.value);
};
\\
Yes, TypeScript can infer event types — but for custom logic, it's safer to be explicit.
📦 Step 5: Typing Children Props
Sometimes your component wraps other elements:
\`tsx
type CardProps = {
children: React.ReactNode;
};
const Card = ({ children }: CardProps) => {
return
};
`
\
Use React.ReactNode\ for anything rendered inside components — text, JSX, even arrays.
🧩 Step 6: Optional & Default Props
\`tsx
type ButtonProps = {
label: string;
onClick?: () => void; // optional
};
const Button = ({ label, onClick = () => {} }: ButtonProps) => {
return {label};
};
`\
Use ?\ for optional props, and assign defaults if needed.
🧙♂️ Step 7: TypeScript Utility Types
These built-in TypeScript types make your life easier:
-
Partial<T>\– All properties optional -
Pick<T, K>\– Pick specific keys -
Omit<T, K>\– Remove specific keys -
Record<K, T>\– Object with typed keys/values
Example:
\tsx
type User = { id: number; name: string; email: string };
type SafeUser = Omit<User, \"email\">; // no email
\\
Super useful for APIs and forms!
🛠 Bonus: TypeScript Tips for Real-World React Devs
- Use
interface\for public types (like props),type\for unions/utility types - Create a
types.ts\file for shared types - Use
zod\oryup\for runtime validation alongside TypeScript - Use
as const\for strict literal types - Leverage IDE suggestions — TypeScript shines with VSCode
🧠 Final Thoughts
TypeScript might look verbose at first, but trust me — it pays off big time as your codebase grows.
You’ll write more predictable, safer, and self-documenting code — and your future self (or your team) will thank you.
Have questions or want a follow-up on TypeScript + Redux, React Query, or API typing?
Let me know in the comments 💬
Happy Typing! ⌨️🚀
Top comments (0)