📌 Introduction to Advanced TypeScript for React

TypeScript enhances React applications by adding static typing, interfaces, generics, and better code safety. This guide covers advanced TypeScript features to improve React development.

🔹 1. Strict Type Checking for Props

Using `interface` to Type Props

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

✅ Ensures label is a string and onClick is a function.

🔹 2. Using Generics in React Components

Generics make components reusable with different types.

Example: Generic List Component

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => JSX.Element;
}

const List = <T,>({ items, renderItem }: ListProps<T>) => {
  return <ul>{items.map(renderItem)}</ul>;
};

// Usage
const users = [{ name: "Alice" }, { name: "Bob" }];

<List items={users} renderItem={(user) => <li key={user.name}>{user.name}</li>} />;

✅ Allows flexibility for different item types.

🔹 3. Typing React Hooks

useState with Types

const [count, setCount] = React.useState<number>(0);

useReducer with Strict Types

type Action = { type: "increment" } | { type: "decrement" };
type State = { count: number };

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const [state, dispatch] = React.useReducer(reducer, { count: 0 });

✅ Improves type safety for state transitions.

🔹 4. Typing Context API

Defining Context Type

interface ThemeContextType {
  theme: "light" | "dark";
  toggleTheme: () => void;
}

const ThemeContext = React.createContext<ThemeContextType | null>(null);

Using Context with Type Safety

const useTheme = () => {
  const context = React.useContext(ThemeContext);
  if (!context) throw new Error("useTheme must be used within ThemeProvider");
  return context;
};

✅ Ensures correct context usage.

🔹 5. Typing Component `ref`

Forwarding Refs with Types

interface InputProps {
  placeholder: string;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
  return <input ref={ref} {...props} />;
});

const inputRef = React.useRef<HTMLInputElement>(null);

<Input ref={inputRef} placeholder="Type here" />;

✅ Ensures ref correctly refers to an <input> element.

🔹 6. Enforcing Types with Utility Types

Partial, Required, Pick, Omit

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

type PartialUser = Partial<User>; // Makes all properties optional
type RequiredUser = Required<User>; // Makes all properties required
type PickedUser = Pick<User, "id" | "name">; // Picks specific properties
type OmittedUser = Omit<User, "email">; // Omits a specific property

✅ Useful for API responses and form validations.

📌 Conclusion

Using Advanced TypeScript in React improves code reliability, reusability, and maintainability. Mastering these concepts will make your applications robust and type-safe. 🚀

Advanced TypeScript for React Developers