Lesson 32 — TypeScript Fundamentals for React (Practical & Essential)

by

🧭 Introduction

As React applications grow, JavaScript alone often leads to:

  • Runtime errors
  • Undefined props
  • Confusing component APIs
  • Hard-to-refactor code

This is why TypeScript has become the industry standard for React.

TypeScript doesn’t replace React — it enhances it by adding:
✅ Type safety
✅ Better editor support
✅ Early error detection
✅ Confidence during refactoring

In this lesson, you’ll learn only what React developers actually need from TypeScript — no unnecessary theory.

🎯 What You’ll Learn in This Lesson

By the end of this lesson, you will understand:

  • Why TypeScript is important in React
  • How TypeScript fits into React projects
  • Typing props, state, and events
  • Typing functional components
  • Common React + TypeScript patterns
  • Beginner mistakes to avoid

🧠 Why TypeScript with React?

JavaScript errors appear at runtime ❌
TypeScript errors appear at development time ✅

This means:

  • Bugs are caught early
  • APIs are self-documented
  • IDE autocomplete improves massively

In real companies, most new React code is written in TypeScript.

🧩 TypeScript in a React Project

Key differences:

  • .js → .ts
  • .jsx → .tsx

React components that return JSX must use .tsx.

🧠 Typing a Simple React Component

JavaScript Version

function Hello({ name }) {
  return <h2>Hello {name}</h2>;
}

Problem:
❌ name could be anything

TypeScript Version

type HelloProps = {
  name: string;
};

function Hello({ name }: HelloProps) {
  return <h2>Hello {name}</h2>;
}

Now:
✔ name must be a string
✔ Editor auto-suggests props

🧠 Typing Props (Most Important Skill)

Example — Multiple Props

type UserProps = {
  name: string;
  age: number;
  isAdmin?: boolean;
};

function UserCard({ name, age, isAdmin }: UserProps) {
  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
      {isAdmin && <span>Admin</span>}
    </div>
  );
}
  • ? makes a prop optional
  • Missing required props causes compile error

🧠 Typing Children

type CardProps = {
  children: React.ReactNode;
};

function Card({ children }: CardProps) {
  return <div className="card">{children}</div>;
}

This is extremely common in React.

🧠 Typing State with useState

Inferred Type (Recommended)

const [count, setCount] = useState(0);

TypeScript infers number automatically.

Explicit Type (When Needed)

const [user, setUser] = useState&lt;User | null>(null);

Used when state starts as null.

🧠 Typing Event Handlers

Button Click

function handleClick(
  event: React.MouseEvent<HTMLButtonElement>
) {
  console.log(event.target);
}

Input Change

function handleChange(
  event: React.ChangeEvent<HTMLInputElement>
) {
  setValue(event.target.value);
}

Correct event typing prevents mistakes.

🧠 Typing Forms (Common Pattern)

function handleSubmit(
  event: React.FormEvent<HTMLFormElement>
) {
  event.preventDefault();
}

🧠 Typing useRef

const inputRef = useRef&lt;HTMLInputElement>(null);

Now:
✔ inputRef.current?.focus() is safe

🧠 Typing Context

type AuthContextType = {
  user: string | null;
  login: (name: string) => void;
};

const AuthContext =
  React.createContext<AuthContextType | null>(null);

Always type context values clearly.

🧠 Typing Functions as Props

type ButtonProps = {
  onClick: () => void;
};

function Button({ onClick }: ButtonProps) {
  return <button onClick={onClick}>Click</button>;
}

🚨 Common TypeScript Mistakes in React

❌ Using any

Kills all benefits of TypeScript.

❌ Over-typing Everything

Let TypeScript infer when possible.

❌ Ignoring Nullability

Always handle null safely.

❌ Copy-Pasting Types Blindly

Understand before using.

🎯 Best Practices (Senior-Level)

✅ Type public APIs (props, context)
✅ Let inference handle internal logic
✅ Avoid any
✅ Use React.ReactNode for children
✅ Keep types close to components
✅ Prefer readability over clever types

❓ FAQs — TypeScript with React

🔹 Do I need TypeScript to use React?

No — but it’s strongly recommended.

🔹 Is TypeScript required in interviews?

Increasingly, yes.

🔹 Should I convert old JS code to TS?

Gradually — not all at once.

🔹 Is TypeScript hard?

No — especially with React.

🧠 Quick Recap

✔ TypeScript improves React reliability
✔ Props typing is critical
✔ State & events must be typed correctly
✔ Avoid any
✔ Let TypeScript work for you

🎉 Conclusion

TypeScript turns React from:

“Hope it works”
into
“I know it works”

With strong typing:

  • Bugs reduce
  • Refactoring becomes safe
  • Code becomes self-documenting

This lesson gives you the foundation you need to write professional React + TypeScript applications 🔷⚛️

👉 Next Lesson

Lesson 33 — Advanced TypeScript Patterns for React

Leave a Comment