01. React + TypeScript — What's Different?

Level: Beginner to Intermediate

ℹ️ What You'll Learn

• How TypeScript adds type safety to React
• Typing component props and state
• Type-safe API integration with School Management System
• Common React + TypeScript patterns
• When TypeScript saves you from bugs

The Problem

React JavaScript works fine for small apps. But in a School Management System with 10+ components, 20+ API endpoints, and complex form state, runtime errors are expensive. A prop is undefined. An API response shape changed. A form value is null. TypeScript catches these before they reach users.

Prerequisite: You should read React Introduction first. This article assumes you understand React concepts.

What is TypeScript?

TypeScript is JavaScript with types.

You already know JavaScript from the previous articles. TypeScript lets you add type information to your code so you catch errors before running the app.

// JavaScript — no types
function getStudentName(student) {
  return student.name; // Oops! What if student is null?
}

const name = getStudentName(null); // Crashes at runtime

// TypeScript — with types
function getStudentName(student: Student) {
  return student.name;
}

const name = getStudentName(null); // ❌ Error at write time
// "Argument of type 'null' is not assignable to parameter of type 'Student'"

TypeScript catches the error before you run the code. You don't debug at 2 AM because a null value crashed production.

Why TypeScript with React?

React components pass data through props. If you forget to pass a required prop or pass the wrong type, your component breaks.

// Without TypeScript — easy to mess up
function StudentCard({ student }) {
  return <div>{student.name}</div>;
}

<StudentCard /> // Oops! student is undefined
<StudentCard student="Ravi" /> // Oops! Passed a string, not a Student object

// With TypeScript — errors caught immediately
interface Student {
  id: number;
  name: string;
  rollNumber: string;
}

function StudentCard({ student }: { student: Student }) {
  return <div>{student.name}</div>;
}

<StudentCard /> // ❌ Property 'student' is missing
<StudentCard student="Ravi" /> // ❌ Type 'string' is not assignable to type 'Student'

Key Differences from JavaScript React

1. Typed Props

// JavaScript
function StudentCard({ student, onDelete }) {
  return (
    <div>
      <h3>{student.name}</h3>
      <button onClick={onDelete}>Delete</button>
    </div>
  );
}

// TypeScript
interface StudentCardProps {
  student: Student;
  onDelete: (studentId: number) => void;
}

function StudentCard({ student, onDelete }: StudentCardProps) {
  return (
    <div>
      <h3>{student.name}</h3>
      <button onClick={() => onDelete(student.id)}>Delete</button>
    </div>
  );
}

2. Typed State

// JavaScript
const [marks, setMarks] = useState(null);

// TypeScript
const [marks, setMarks] = useState<Exam[]>([]);
// or
const [marks, setMarks] = useState<Exam[] | null>(null);

3. Typed Event Handlers

// JavaScript
const handleClick = (e) => {
  console.log(e.target.value);
};

// TypeScript
const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value); // TypeScript knows this is a string
};

4. Interfaces vs Classes

In React with TypeScript, you use interfaces to describe object shapes:

interface Student {
  id: number;
  name: string;
  rollNumber: string;
  className: string;
  status: 'Active' | 'Inactive' | 'Graduated';
}

interface Teacher {
  id: number;
  name: string;
  employeeCode: string;
  qualification: string;
}

Interfaces are NOT classes. They don't create runtime objects — they're only for type checking.

Learning Path: JavaScript First, Then TypeScript

We recommend:

1. Master JavaScript React (articles 01-18) — Learn components, state, hooks, API integration without worrying about types
2. Learn TypeScript gradually (articles 01-TS onwards) — Same concepts, now with type annotations

Why?

• Fewer concepts at once
• Easier to debug
• Type errors can be confusing for beginners
• Once you understand React, adding types makes sense

It's like this:

• JavaScript React: Learn to drive
• TypeScript React: Now drive in a city with traffic rules and a copilot checking your moves

TypeScript Setup (We'll Cover This Later)

For now, just know:

• TypeScript files use .tsx extension (instead of .jsx)
• TypeScript requires a build tool (Create React App, Vite, Next.js)
• The build tool converts TypeScript to JavaScript before running

Common TypeScript Patterns in React

Pattern 1: Component Props Type

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean; // Optional (the ? means it's optional)
}

function MyButton({ label, onClick, disabled = false }: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

Pattern 2: Typed Hooks

const [students, setStudents] = useState<Student[]>([]);

const handleAddStudent = (student: Student) => {
  setStudents([...students, student]);
};

Pattern 3: API Response Types

interface ApiResponse<T> {
  success: boolean;
  data: T;
  message?: string;
}

const fetchStudents = async (): Promise<ApiResponse<Student[]>> => {
  const response = await fetch('/api/students');
  return response.json();
};

The Goal

By the time you finish both paths (JavaScript and TypeScript):

• ✓ You'll understand React deeply (concepts work in both)
• ✓ You'll be able to read and write both JavaScript and TypeScript React
• ✓ You'll know when types help and when they're overkill
• ✓ You'll be ready for any React job

Should You Use TypeScript?

Use TypeScript if:

• Building large apps (100+ components) — types prevent bugs
• Working in teams — types are documentation
• Your backend is C# or Java — familiar with types already
• You want IDE autocomplete — TypeScript enables this

TypeScript is optional if:

• Small projects (< 50 components)
• Solo developer
• Learning React for the first time (learn JS React first)

For the School Management System, TypeScript would be great for the production app, but for learning, start with JavaScript.

⚠️ Common Mistake

Don't try to learn React and TypeScript simultaneously if you're new to both. You'll confuse "Is this a React problem or a TypeScript problem?" Learn React first, then add types.

💡 You Already Know Types

As a C# developer, you already understand types. TypeScript syntax looks different, but the concepts are the same:

• C# string name → TypeScript name: string
• C# List<Student> → TypeScript Student[]
• C# void → TypeScript void

TypeScript is familiar territory.

🤖Use AI to Learn Faster

Use ChatGPT, Claude, or Copilot to go deeper on TypeScript Basics. Try these prompts:

• "In one sentence, what does TypeScript add to JavaScript?"
• "Why would types help catch bugs before running the app?"
• "What's the difference between a TypeScript interface and a C# interface?"
• "Quiz me on TypeScript patterns in React"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.

Quick Definitions

• React + TypeScript — What's Different- - The main React + TypeScript concept explained in this lesson.
• Type/interface - A contract that describes the shape of data.
• Typed props/state - React data with clear compile-time expectations.
• API DTO - The request or response shape shared with ASP.NET Core Web API.

Common Mistakes

• Using any too quickly instead of defining a useful type
• Typing props loosely and losing the benefit of TypeScript
• Forgetting that API data can still be missing or invalid at runtime
• Making types too complex before the component is stable
• Not sharing clear DTO shapes between frontend and backend teams

Practice Task

Create a small React TypeScript example using React + TypeScript — What's Different-. Keep it connected to a School Management System scenario.

Suggested practice:

1. Define a clear Student, Teacher, or Attendance type.
2. Build a small typed component or hook.
3. Add one valid example and one intentionally wrong example to see TypeScript errors.
4. Explain the type contract in your own words.
5. Rebuild the same example once without looking at the article.

Quick Revision

Question	Answer
What is the main idea?	Use TypeScript to make React + TypeScript — What's Different- safer in React.
Where is it used?	Props, state, forms, API responses, context, hooks, and routes.
What should beginners avoid?	Overusing any and ignoring runtime API validation.
What is the best debugging habit?	Read the TypeScript error, check the data shape, and fix the type contract.

🎯 How would you explain React + TypeScript — What's Different- in an interview?

React + TypeScript — What's Different- is a React + TypeScript concept that improves safety and maintainability. I would explain which values need types, how TypeScript catches mistakes early, and how it helps when consuming ASP.NET Core Web API responses.

🎯 Where is this used in a real React TypeScript project?

It is used in typed props, API response models, form state, route parameters, context values, custom hooks, and reusable UI components.

Next Article

TypeScript Essentials for React ->