Section 3: Advanced Types and Generics (20+ Questions)

41. What are generics in TypeScript and why are they useful?

    • Generics are a tool that allows components like functions, classes, or interfaces to be reusable for different types rather than working with a single one. This improves code flexibility and type safety.

      function identity<T>(arg: T): T {
        return arg;
      }
      
      const str = identity<string>('hello'); // str is of type string
      const num = identity<number>(123);     // num is of type number
      

42. How do you constrain generics?

    • You can restrict a generic to certain types or interfaces using extends. This ensures only compatible types can be passed:

      function logLength<T extends { length: number }>(arg: T): void {
        console.log(arg.length);
      }
      
      logLength('hello'); // valid
      logLength([1, 2, 3]); // valid
      // logLength(42); // Error: number doesn't have 'length'
      

43. What is the default type for a generic?

    • TypeScript allows providing a default value to a generic type parameter when not explicitly passed.

      function wrap<T = string>(value: T): T[] {
        return [value];
      }
      
      const wrapped = wrap(10); // inferred as number[]
      const defaultWrapped = wrap('hello'); // inferred as string[]
      

44. How do you use multiple type parameters in generics?

    • You can define multiple generics using commas. This is helpful when a function or class relates two or more different types.

      function pair<T, U>(first: T, second: U): [T, U] {
        return [first, second];
      }
      
      const tuple = pair('age', 30); // [string, number]
      

45. How do you create a generic interface?

    • A generic interface can work with different types dynamically.

      interface Box<T> {
        value: T;
      }
      
      const numberBox: Box<number> = { value: 42 };
      const stringBox: Box<string> = { value: 'TypeScript' };
      

46. What are conditional types used for?

    • Conditional types define types based on logic:

      type IsString<T> = T extends string ? true : false;
      
      type A = IsString<'abc'>; // true
      type B = IsString<123>;   // false
      

    • They're helpful when transforming types or creating utility types.

47. How do you extract the return type of a function?

    • Use ReturnType<T> utility to infer the return type of a function:

      function sum(a: number, b: number) {
        return a + b;
      }
      
      type Result = ReturnType<typeof sum>; // number
      

48. What does infer mean in conditional types?

    • infer lets you capture and reuse a type inside a conditional type:

      type Return<T> = T extends (...args: any[]) => infer R ? R : never;
      

    • Here, R becomes whatever return type the function has.

49. What is the Extract utility type?

    • Pulls out types that match from a union:

      type T = Extract<'a' | 'b' | 'c', 'a' | 'f'>; // 'a'
      

50. What is the Exclude utility type?

    • Removes types from a union:

      type T = Exclude<'a' | 'b' | 'c', 'a'>; // 'b' | 'c'
      

51. What is the NonNullable utility type?

    • Filters out null and undefined:

      type T = NonNullable<string | null | undefined>; // string
      

52. How do you define recursive types?

    • Recursive types reference themselves. This is often used in tree structures:

      type Tree<T> = {
        value: T;
        children?: Tree<T>[];
      };
      

53. How do you define a generic constraint using union types?

    • You can restrict a generic to certain primitive types or interfaces:

      function format<T extends string | number>(input: T): string {
        return input.toString();
      }
      

54. What are utility types in TypeScript?

    • Utility types like Partial, Readonly, Pick, and Omit help transform types:

      interface Todo {
        title: string;
        completed: boolean;
      }
      
      type ReadonlyTodo = Readonly<Todo>; // all props are readonly
      

55. How do you use Record to define object types?

    • It allows creating an object with known keys and value types:

      type UserRoles = Record<'admin' | 'user', boolean>;
      // Equivalent to:
      // type UserRoles = {
      //   admin: boolean;
      //   user: boolean;
      // };
      

56. What is a tuple in TypeScript?

    • Tuples represent arrays with fixed length and specific types:

      let tuple: [string, number];
      tuple = ['age', 30]; // OK
      tuple = [30, 'age']; // Error
      

57. What are labeled tuple elements?

    • Improves readability by naming each element:

      type Point = [x: number, y: number];
      

58. How can you use generics in classes?

    • You can build reusable class components:

      class GenericBox<T> {
        value: T;
        constructor(value: T) {
          this.value = value;
        }
      }
      
      const box = new GenericBox<number>(123);
      

59. What are template literal types?

    • Allows building new string literal types from unions:

      type Color = 'red' | 'blue';
      type ButtonVariant = `btn-${Color}`; // 'btn-red' | 'btn-blue'
      

60. How can you make a deeply readonly type?

    • Recursive mapped types allow deep immutability:

      type DeepReadonly<T> = {
        readonly [P in keyof T]: DeepReadonly<T[P]>;
      };
      
      type Nested = {
        user: {
          name: string;
          address: {
            city: string;
          }
        }
      };
      
      const example: DeepReadonly<Nested> = {
        user: {
          name: 'John',
          address: {
            city: 'Paris'
          }
        }
      };
      
      // example.user.name = 'Jane'; // Error: cannot assign to 'name' because it is a read-only property.