Essential TypeScript Interview Questions for React Developers

TypeScript has become an essential skill for React developers, bringing type safety and clarity to complex applications. In this guide, we’ll explore essential TypeScript topics that frequently come up in interviews, including typing props, state, and hooks, as well as advanced patterns like utility types and complex typing structures. These questions and answers will help you understand how to effectively use TypeScript with React, making you more confident and prepared for your next interview.

1. How do you type props and state in a React component using TypeScript?

Typing props and state enhances code clarity and prevents bugs. Define an interface for props, then use it as a generic type on the component. For example:

    interface MyComponentProps {
      title: string;
      count?: number;
    }
    
    const MyComponent: React.FC<MyComponentProps> = ({ title, count }) => {
      // component logic here
    };
  

Type state by specifying the type in useState, like useState<number>(0). This way, props and state are fully type-safe.

2. How can you use TypeScript with functional components and hooks?

TypeScript works well with React hooks. Use generics in hooks like useState<number>(0) to enforce type safety. Here’s an example with useReducer:

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

    function counterReducer(state: State, action: Action): State {
      switch (action.type) {
        case 'increment':
          return { count: state.count + 1 };
        case 'decrement':
          return { count: state.count - 1 };
        default:
          throw new Error();
      }
    }

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

Typing hooks in this way helps React enforce type safety, making the component predictable and easy to debug.

3. How do you type a context provider in React with TypeScript?

Typing context in React involves defining an interface for the context shape and passing it to createContext. Here’s an example:

    interface AuthContextType {
      user: string | null;
      login: (userName: string) => void;
    }

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

    const AuthProvider: React.FC = ({ children }) => {
      const [user, setUser] = useState<string | null>(null);
      const login = (userName: string) => setUser(userName);

      return (
        <AuthContext.Provider value={{ user, login }}>
          {children}
        </AuthContext.Provider>
      );
    };
  

This approach ensures that only defined properties and functions are accessible within components consuming this context.

4. What are utility types in TypeScript, and how can they simplify your React code?

TypeScript utility types like Partial, Pick, Omit, and Record make code more flexible and readable. For instance, Partial<T> makes all properties in a type optional. Here’s an example:

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

    const userUpdate: Partial<User> = { email: 'newemail@example.com' };
  

Utility types allow you to adapt and reuse type structures without redundancy, making your codebase cleaner.

5. How can you handle complex typing patterns for deeply nested or conditional types?

For complex typing, TypeScript offers conditional and mapped types. Conditional types (T extends U ? X : Y) allow type-checking within types, while mapped types transform structures. Here’s a conditional type example:

    type FetchStatus<T> = T extends 'success'
      ? { data: any }
      : { error: string };

    const successResponse: FetchStatus<'success'> = { data: {} };
    const errorResponse: FetchStatus<'error'> = { error: 'Not found' };
  

This flexibility allows you to handle intricate data structures with ease, making type safety and API navigation more manageable.