Frontend Engineering | VoidX Academy

13. Enums & Generics (Key Concept)

Next-Level Abstractions

As your application logic gets more complex, writing literal types for every scenario can become repetitive. Furthermore, you will eventually need to write functions that are flexible enough to accept any type of data, while still maintaining strict safety. This module covers Enums for organization, and Generics—the most important intermediate concept in TypeScript.

Enums: Named Constants

An enum (short for enumeration) allows you to define a set of named constants. Unlike Types or Interfaces, which are completely erased during compilation, Enums actually generate real JavaScript code (objects) that you can interact with at runtime.

// Defining an Enum (usually Capitalized)
enum Status {
  // By default, TS assigns these numerical values starting at 0
  // Success = 0, Error = 1, Loading = 2
  Success,
  Error,
  Loading
}

// Using the Enum
let currentStatus: Status = Status.Success;

if (currentStatus === Status.Error) {
  console.log("Something went wrong.");
}

String Enums

Numerical enums can be confusing when debugging because you just see the number 1 instead of "Error" in your logs. It is highly recommended to use String Enums instead.

enum UserRole {
  Admin = "ADMIN_ROLE",
  Editor = "EDITOR_ROLE",
  Viewer = "VIEWER_ROLE"
}

const newUserRole: UserRole = UserRole.Admin;
console.log(newUserRole); // Output: "ADMIN_ROLE"

Generics: The Type Variables (KEY CONCEPT)

Imagine you want to write a function that takes an argument and just returns it. If you type it as `number`, it only works for numbers. If you type it as `any`, you lose all TypeScript safety.

Generics act as a variable for the type itself. They capture the type of the data you pass in, and lock it in for the rest of the function execution.

// The  is a type parameter. It stands for "Type".
// It says: "Whatever type goes into 'value', make 'T' equal to that type."
// And we guarantee this function will return exactly that type 'T'.
function identity<T>(value: T): T {
  return value;
}

// Usage:
// We pass in a string. 'T' becomes 'string'. The return type is locked as 'string'.
const nameResult = identity<string>("Prince"); 

// We pass in a number. 'T' becomes 'number'. The return type is locked as 'number'.
const ageResult = identity<number>(20);

// You don't always have to write the . TS is smart enough to infer it!
const inferredResult = identity(true); // TS knows this returns a boolean

Generics in Interfaces

Generics aren't just for functions. They are heavily used in Interfaces to create flexible, reusable blueprints, especially for API responses where the shape of the data changes, but the overall structure (status, errors) remains the same.

// The interface requires a type parameter 
interface ApiResponse<DataShape> {
  status: number;
  error: string | null;
  data: DataShape; // The data property takes on whatever shape we pass in!
}

// 1. Using it for a User fetch
const userResponse: ApiResponse<{ name: string }> = {
  status: 200,
  error: null,
  data: { name: "Prince" }
};

// 2. Using the EXACT SAME interface for an Array of strings!
const tagsResponse: ApiResponse<string[]> = {
  status: 200,
  error: null,
  data: ["Tech", "News", "Campus"]
};

13. Enums & Generics (Key Concept)

Next-Level Abstractions

Enums: Named Constants

// Defining an Enum (usually Capitalized)
enum Status {
  // By default, TS assigns these numerical values starting at 0
  // Success = 0, Error = 1, Loading = 2
  Success,
  Error,
  Loading
}

// Using the Enum
let currentStatus: Status = Status.Success;

if (currentStatus === Status.Error) {
  console.log("Something went wrong.");
}

String Enums

Numerical enums can be confusing when debugging because you just see the number 1 instead of "Error" in your logs. It is highly recommended to use String Enums instead.

enum UserRole {
  Admin = "ADMIN_ROLE",
  Editor = "EDITOR_ROLE",
  Viewer = "VIEWER_ROLE"
}

const newUserRole: UserRole = UserRole.Admin;
console.log(newUserRole); // Output: "ADMIN_ROLE"

Generics: The Type Variables (KEY CONCEPT)

Imagine you want to write a function that takes an argument and just returns it. If you type it as `number`, it only works for numbers. If you type it as `any`, you lose all TypeScript safety.

Generics act as a variable for the type itself. They capture the type of the data you pass in, and lock it in for the rest of the function execution.

// The  is a type parameter. It stands for "Type".
// It says: "Whatever type goes into 'value', make 'T' equal to that type."
// And we guarantee this function will return exactly that type 'T'.
function identity<T>(value: T): T {
  return value;
}

// Usage:
// We pass in a string. 'T' becomes 'string'. The return type is locked as 'string'.
const nameResult = identity<string>("Prince"); 

// We pass in a number. 'T' becomes 'number'. The return type is locked as 'number'.
const ageResult = identity<number>(20);

// You don't always have to write the . TS is smart enough to infer it!
const inferredResult = identity(true); // TS knows this returns a boolean

Generics in Interfaces

// The interface requires a type parameter 
interface ApiResponse<DataShape> {
  status: number;
  error: string | null;
  data: DataShape; // The data property takes on whatever shape we pass in!
}

// 1. Using it for a User fetch
const userResponse: ApiResponse<{ name: string }> = {
  status: 200,
  error: null,
  data: { name: "Prince" }
};

// 2. Using the EXACT SAME interface for an Array of strings!
const tagsResponse: ApiResponse<string[]> = {
  status: 200,
  error: null,
  data: ["Tech", "News", "Campus"]
};

13. Enums & Generics (Key Concept)

Next-Level Abstractions

Enums: Named Constants

String Enums

Generics: The Type Variables (KEY CONCEPT)

Generics in Interfaces

Knowledge Check

13. Enums & Generics (Key Concept)

Next-Level Abstractions

Enums: Named Constants

String Enums

Generics: The Type Variables (KEY CONCEPT)

Generics in Interfaces

Knowledge Check