TypeScript with Popular Frameworks

The React Bug That Would Have Cost $2M

9:47 AM, production deploy day. E-commerce checkout redesign ready to ship. 200 hours of development. Marketing campaign scheduled for noon.

Final QA check. Everything looked perfect. Then Sarah (our most thorough QA) noticed something:

"The cart total seems... off?"

I checked. Cart showed $147.99. Should be $847.99. Missing $700. On a production deploy about to go live to 50,000 daily users.

If this shipped, customers would see incorrect prices. Complete orders at wrong amounts. Financial chaos. Estimated loss: $2M+ before we caught it.

Found the bug in 5 minutes thanks to TypeScript:

// The bug - without TypeScript
function CartSummary({ items }) {
  const [total, setTotal] = useState(0);
  
  useEffect(() => {
    // Accidentally using string concatenation instead of addition!
    const sum = items.reduce((acc, item) => acc + item.price, '0');
    setTotal(sum);  // "0123.99..." instead of 847.99
  }, [items]);
  
  return <div>Total: ${total}</div>;
}

With TypeScript, this never compiles:

// TypeScript catches it immediately
function CartSummary({ items }: { items: CartItem[] }) {
  const [total, setTotal] = useState<number>(0);
  
  useEffect(() => {
    // Type error: Type 'string' is not assignable to type 'number'
    const sum = items.reduce((acc, item) => acc + item.price, '0');
    //                                                         ^^^
    setTotal(sum);
  }, [items]);
}

TypeScript saved us $2M and our reputation.

This article covers using TypeScript with React, Express, and other frameworks - and why proper typing is non-negotiable for production apps.

---

TypeScript with React

Component Props

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
}

function Button({ label, onClick, variant = 'primary', disabled = false }: ButtonProps) {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
      disabled={disabled}
    >
      {label}
    </button>
  );
}

// Usage - autocomplete and validation!
<Button 
  label="Submit" 
  onClick={() => console.log('clicked')}
  variant="primary"
/>

// Error: Type '"danger"' is not assignable to type '"primary" | "secondary"'
<Button label="Delete" onClick={handleDelete} variant="danger" />

Component with Children

interface CardProps {
  title: string;
  children: React.ReactNode;
  footer?: React.ReactNode;
}

function Card({ title, children, footer }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div>{children}</div>
      {footer && <div className="footer">{footer}</div>}
    </div>
  );
}

useState Hook

interface User {
  id: string;
  name: string;
  email: string;
}

function UserProfile() {
  // Type inference
  const [count, setCount] = useState(0);  // number
  const [name, setName] = useState('');   // string
  
  // Explicit typing
  const [user, setUser] = useState<User | null>(null);
  
  // Type guard needed
  if (!user) return <div>Loading...</div>;
  
  return <div>{user.name}</div>;  // TypeScript knows user is not null
}

useEffect Hook

function DataFetcher({ userId }: { userId: string }) {
  const [data, setData] = useState<Data | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const [loading, setLoading] = useState(false);
  
  useEffect(() => {
    let cancelled = false;
    
    async function fetchData() {
      setLoading(true);
      try {
        const response = await fetch(`/api/users/${userId}`);
        const json: Data = await response.json();
        
        if (!cancelled) {
          setData(json);
        }
      } catch (err) {
        if (!cancelled) {
          setError(err instanceof Error ? err : new Error('Unknown error'));
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    }
    
    fetchData();
    
    return () => {
      cancelled = true;
    };
  }, [userId]);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return null;
  
  return <div>{data.name}</div>;
}

useRef Hook

function FocusInput() {
  // HTMLInputElement type
  const inputRef = useRef<HTMLInputElement>(null);
  
  useEffect(() => {
    // TypeScript knows .current might be null
    inputRef.current?.focus();
  }, []);
  
  return <input ref={inputRef} />;
}

// Generic ref
function Timer() {
  const intervalRef = useRef<number | null>(null);
  
  const startTimer = () => {
    intervalRef.current = window.setInterval(() => {
      console.log('tick');
    }, 1000);
  };
  
  const stopTimer = () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
    }
  };
  
  return (
    <div>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
}

Event Handlers

function Form() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // Handle form submission
  };
  
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };
  
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    console.log(e.clientX, e.clientY);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleChange} />
      <button onClick={handleClick}>Submit</button>
    </form>
  );
}

Custom Hooks

function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });
  
  const setStoredValue = (newValue: T | ((val: T) => T)) => {
    const valueToStore = newValue instanceof Function ? newValue(value) : newValue;
    setValue(valueToStore);
    localStorage.setItem(key, JSON.stringify(valueToStore));
  };
  
  return [value, setStoredValue] as const;
}

// Usage
function App() {
  const [name, setName] = useLocalStorage<string>('name', 'Guest');
  const [settings, setSettings] = useLocalStorage({ theme: 'dark' });
}

Context API

interface AuthContextType {
  user: User | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  isAuthenticated: boolean;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  
  const login = async (email: string, password: string) => {
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ email, password })
    });
    const userData = await response.json();
    setUser(userData);
  };
  
  const logout = () => setUser(null);
  
  const value: AuthContextType = {
    user,
    login,
    logout,
    isAuthenticated: !!user
  };
  
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
}

---

TypeScript with Express (Node.js)

Basic Setup

import express, { Request, Response, NextFunction } from 'express';

const app = express();

app.get('/users/:id', (req: Request, res: Response) => {
  const userId = req.params.id;
  res.json({ id: userId, name: 'John' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Typed Request/Response

interface CreateUserRequest {
  name: string;
  email: string;
  age: number;
}

interface UserResponse {
  id: string;
  name: string;
  email: string;
  createdAt: Date;
}

app.post('/users', (
  req: Request<{}, {}, CreateUserRequest>,
  res: Response<UserResponse>
) => {
  const { name, email, age } = req.body;
  
  // Validation
  if (!name || !email || age < 18) {
    return res.status(400).json({ error: 'Invalid data' } as any);
  }
  
  const user: UserResponse = {
    id: generateId(),
    name,
    email,
    createdAt: new Date()
  };
  
  res.status(201).json(user);
});

Middleware

interface AuthRequest extends Request {
  user?: {
    id: string;
    role: string;
  };
}

const authenticate = (
  req: AuthRequest,
  res: Response,
  next: NextFunction
) => {
  const token = req.headers.authorization?.split(' ')[1];
  
  if (!token) {
    return res.status(401).json({ error: 'Unauthorized' });
  }
  
  // Verify token and attach user
  req.user = verifyToken(token);
  next();
};

app.get('/profile', authenticate, (req: AuthRequest, res: Response) => {
  // req.user is now available and typed
  res.json({ user: req.user });
});

Error Handling

class AppError extends Error {
  constructor(
    public statusCode: number,
    public message: string,
    public isOperational = true
  ) {
    super(message);
  }
}

const errorHandler = (
  err: AppError | Error,
  req: Request,
  res: Response,
  next: NextFunction
) => {
  if (err instanceof AppError) {
    return res.status(err.statusCode).json({
      status: 'error',
      message: err.message
    });
  }
  
  // Unknown error
  console.error(err);
  res.status(500).json({
    status: 'error',
    message: 'Internal server error'
  });
};

app.use(errorHandler);

// Usage
app.get('/users/:id', async (req: Request, res: Response, next: NextFunction) => {
  try {
    const user = await findUser(req.params.id);
    if (!user) {
      throw new AppError(404, 'User not found');
    }
    res.json(user);
  } catch (error) {
    next(error);
  }
});

Async Route Handlers

type AsyncRequestHandler = (
  req: Request,
  res: Response,
  next: NextFunction
) => Promise<any>;

function asyncHandler(fn: AsyncRequestHandler) {
  return (req: Request, res: Response, next: NextFunction) => {
    Promise.resolve(fn(req, res, next)).catch(next);
  };
}

// Usage
app.get('/users/:id', asyncHandler(async (req, res) => {
  const user = await database.findUser(req.params.id);
  if (!user) {
    throw new AppError(404, 'User not found');
  }
  res.json(user);
}));

---

TypeScript with Vue

Component with Script Setup

<script setup lang="ts">
import { ref, computed } from 'vue';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

const todos = ref<Todo[]>([]);
const newTodo = ref('');

const activeTodos = computed(() => 
  todos.value.filter(todo => !todo.completed)
);

function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push({
      id: Date.now(),
      text: newTodo.value,
      completed: false
    });
    newTodo.value = '';
  }
}

function toggleTodo(id: number) {
  const todo = todos.value.find(t => t.id === id);
  if (todo) {
    todo.completed = !todo.completed;
  }
}
</script>

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" />
    <button @click="addTodo">Add</button>
    
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input 
          type="checkbox" 
          :checked="todo.completed"
          @change="toggleTodo(todo.id)"
        />
        {{ todo.text }}
      </li>
    </ul>
    
    <p>Active: {{ activeTodos.length }}</p>
  </div>
</template>

---

TypeScript with Angular

import { Component, OnInit } from '@angular/core';

interface User {
  id: number;
  name: string;
  email: string;
}

@Component({
  selector: 'app-users',
  template: `
    <div *ngFor="let user of users">
      {{ user.name }} - {{ user.email }}
    </div>
  `
})
export class UsersComponent implements OnInit {
  users: User[] = [];
  
  constructor(private userService: UserService) {}
  
  ngOnInit(): void {
    this.userService.getUsers().subscribe((users: User[]) => {
      this.users = users;
    });
  }
}

---

Common Patterns

API Response Types

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

async function fetchUser(id: string): Promise<ApiResponse<User>> {
  try {
    const response = await fetch(`/api/users/${id}`);
    const data = await response.json();
    return { success: true, data };
  } catch (error) {
    return { 
      success: false, 
      error: error instanceof Error ? error.message : 'Unknown error'
    };
  }
}

Form Validation

interface FormErrors {
  [key: string]: string;
}

function validateForm(data: CreateUserRequest): FormErrors {
  const errors: FormErrors = {};
  
  if (!data.name || data.name.length < 3) {
    errors.name = 'Name must be at least 3 characters';
  }
  
  if (!data.email || !data.email.includes('@')) {
    errors.email = 'Invalid email';
  }
  
  if (data.age < 18) {
    errors.age = 'Must be 18 or older';
  }
  
  return errors;
}

---

Your Challenge

Build a typed task management system with React and Express:

// TODO: Create:

// 1. Frontend (React):
interface Task {
  id: string;
  title: string;
  description: string;
  status: 'todo' | 'in-progress' | 'done';
  priority: 'low' | 'medium' | 'high';
  createdAt: Date;
}

// - TaskList component with proper props
// - TaskForm component for creating/editing
// - Custom useTasksmanager hook
// - Context for global state

// 2. Backend (Express):
// - POST /tasks - create task
// - GET /tasks - list tasks
// - PATCH /tasks/:id - update task
// - DELETE /tasks/:id - delete task
// - Proper request/response types
// - Error handling middleware
// - Authentication middleware

// Requirements:
// 1. Full type safety
// 2. Validation on both ends
// 3. Error handling
// 4. Loading states
// 5. Optimistic updates

---

Key Takeaways

1. React props - interface for component props

2. Hooks - useState, useEffect, useRef with types

3. Event handlers - proper event types

4. Custom hooks - typed reusable logic

5. Express - Request, Response, NextFunction types

6. Middleware - extend Request with custom props

7. Error handling - typed error classes

8. Framework-specific - Vue, Angular have their patterns

---

What I Learned

That cart bug would have shipped to 50,000 users. $2M+ in losses. Financial disaster.

TypeScript caught it instantly:

const sum = items.reduce((acc, item) => acc + item.price, '0');
//                                                         ^^^
// Type error: Type 'string' is not assignable to type 'number'

One type annotation. $2M saved.

Before TypeScript, framework code was fragile. Props changed, components broke. API responses evolved, apps crashed. Runtime bugs everywhere.

After TypeScript, frameworks become predictable. Change a prop type, see all affected components. Modify an API response, find every usage. Compile-time safety for runtime stability.

The lesson: Framework code without types is production gambling. You're betting users won't hit the edge cases. With TypeScript, you know before they do.

Type your frameworks. Sleep better at night.

---

Next: Migrating from JavaScript to TypeScript

In the next article, we'll cover migrating a real JavaScript project to TypeScript. You'll learn the strategy that converted a 50,000-line codebase with zero downtime.