Skip to main content
Back to Blog
TypeScriptReactJavaScript

TypeScript with React: A Practical Guide for 2026 Projects

9 min read

Learn how to effectively use TypeScript in React and Next.js projects — from typing props and hooks to generics, discriminated unions, and best practices for scalable frontend codebases.

TypeScript has become the default choice for serious React and Next.js projects, providing type safety that catches bugs at compile time, improves IDE tooling, and makes codebases significantly more maintainable at scale. Muhammad Sufyan of Sufyan Frontend — a Next.js developer from Lahore, Pakistan — uses TypeScript in production projects and shares this practical guide for 2026.

Typing React Components and Props

The most fundamental TypeScript skill in React is properly typing component props. Define an interface or type alias for each component's props, and TypeScript will catch any missing or incorrectly typed props at compile time — eliminating an entire category of runtime bugs.

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

export function Button({
  label, onClick, variant = "primary", disabled, className
}: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

Typing Hooks and State

TypeScript can usually infer the type of useState from its initial value, but for complex types — objects, arrays, unions with undefined — explicit typing prevents subtle bugs. For useRef, always provide the element type to get accurate DOM method types in your event handlers.

// Explicit typing when inference is insufficient
const [user, setUser] = useState<User | null>(null);
const [items, setItems] = useState<Product[]>([]);

// Typed ref for DOM access
const inputRef = useRef<HTMLInputElement>(null);

TypeScript Patterns for Next.js

  • ▸Use Metadata type from Next.js for page metadata exports
  • ▸Type your page.tsx props with the PageProps pattern for params and searchParams
  • ▸Create shared type files for API response shapes used across components
  • ▸Use zod for runtime validation that bridges TypeScript types and API data
  • ▸Enable strict: true in tsconfig for maximum type safety

Conclusion

TypeScript in React is not just about catching errors — it is about writing code that communicates its intent clearly to every developer who reads it. Muhammad Sufyan uses TypeScript on production projects including his portfolio at https://sufyan-frontend.vercel.app. Start small if TypeScript is new to you, and gradually extend typing coverage as you grow comfortable. The investment pays back quickly in fewer runtime bugs and more confident refactoring.