Frontend Engineering | VoidX Academy

16. Advanced Generics & Conditional Types

TypeScript Metaprogramming

Welcome to Advanced TypeScript. Here, we stop writing static types manually, and start writing logic that generates types dynamically. This is the realm of library authors (like the creators of React or Zustand) who need to provide perfect autocomplete for highly flexible code.

Advanced Generics: API Wrappers

Generics are powerful when wrapping API responses. An API usually has a standard envelope (data, error, status), but the actual payload changes depending on the endpoint.

// The generic  represents the dynamic payload shape
type ApiResponse<T> = {
  data: T;
  error: string | null;
  statusCode: number;
};

// We pass the specific shape we expect into the generic
const userRes: ApiResponse<{ username: string }> = {
  data: { username: "Prince" },
  error: null,
  statusCode: 200
};

const textRes: ApiResponse<string> = {
  data: "Success!",
  error: null,
  statusCode: 200
};

Generic Constraints (`extends`)

Sometimes you want a function to be generic, but you need to guarantee that the passed type has at least some specific properties. You "constrain" the generic using the extends keyword.

// The generic T MUST be an object containing at least an 'id' property
function logIdentity<T extends { id: number | string }>(item: T): T {
  console.log("Logging ID:", item.id);
  return item;
}

logIdentity({ id: 99, name: "Prince" }); // Valid
// logIdentity({ name: "Alice" }); // ERROR: Property 'id' is missing

Conditional Types

You can write logic in your types using a syntax identical to the JavaScript ternary operator. This allows a type to change its shape based on a condition.

// Syntax: T extends U ? TrueType : FalseType
// Translation: If T is a string, make this type 'true'. Otherwise, make it 'false'.
type IsString<T> = T extends string ? true : false;

type ResultA = IsString<"Hello">; // The type evaluated strictly to 'true'
type ResultB = IsString<500>;     // The type evaluated strictly to 'false'

16. Advanced Generics & Conditional Types

TypeScript Metaprogramming

Advanced Generics: API Wrappers

Generics are powerful when wrapping API responses. An API usually has a standard envelope (data, error, status), but the actual payload changes depending on the endpoint.

// The generic  represents the dynamic payload shape
type ApiResponse<T> = {
  data: T;
  error: string | null;
  statusCode: number;
};

// We pass the specific shape we expect into the generic
const userRes: ApiResponse<{ username: string }> = {
  data: { username: "Prince" },
  error: null,
  statusCode: 200
};

const textRes: ApiResponse<string> = {
  data: "Success!",
  error: null,
  statusCode: 200
};

Generic Constraints (`extends`)

Sometimes you want a function to be generic, but you need to guarantee that the passed type has at least some specific properties. You "constrain" the generic using the extends keyword.

// The generic T MUST be an object containing at least an 'id' property
function logIdentity<T extends { id: number | string }>(item: T): T {
  console.log("Logging ID:", item.id);
  return item;
}

logIdentity({ id: 99, name: "Prince" }); // Valid
// logIdentity({ name: "Alice" }); // ERROR: Property 'id' is missing

Conditional Types

You can write logic in your types using a syntax identical to the JavaScript ternary operator. This allows a type to change its shape based on a condition.

// Syntax: T extends U ? TrueType : FalseType
// Translation: If T is a string, make this type 'true'. Otherwise, make it 'false'.
type IsString<T> = T extends string ? true : false;

type ResultA = IsString<"Hello">; // The type evaluated strictly to 'true'
type ResultB = IsString<500>;     // The type evaluated strictly to 'false'

16. Advanced Generics & Conditional Types

TypeScript Metaprogramming

Advanced Generics: API Wrappers

Generic Constraints (`extends`)

Conditional Types

Knowledge Check

16. Advanced Generics & Conditional Types

TypeScript Metaprogramming

Advanced Generics: API Wrappers

Generic Constraints (`extends`)

Conditional Types

Knowledge Check