TypeScript Generics

Generics in TypeScript allow you to create reusable components or functions that can work with different types. They provide a way to parameterize types, enabling the creation of flexible and type-safe code. Here's an explanation of generics with an example:

Generic Functions:

You can define a generic function by specifying a type parameter inside angle brackets (<>). This type parameter can then be used as a placeholder for a specific type when the function is called. Here's an example:

   function identity<T>(arg: T): T {
     return arg;
   }

   let result = identity<string>("Hello");
   console.log(result); // Output: "Hello"

   let numberResult = identity<number>(42);
   console.log(numberResult); // Output: 42

In the identity function above, the type parameter T represents a generic type. When the function is called, the provided argument's type will be inferred, or you can explicitly specify the type within the angle brackets.

Generic Interfaces:

You can also use generics with interfaces to create reusable interfaces that work with various types. Here's an example:

   interface Container<T> {
     value: T;
   }

   let container1: Container<number> = { value: 42 };
   console.log(container1.value); // Output: 42

   let container2: Container<string> = { value: "Hello" };
   console.log(container2.value); // Output: "Hello"

In the Container interface, the type parameter T is used to define the value property. When implementing the interface, you can specify the actual type for T.

Generic Classes:

Generics can also be applied to classes, allowing you to create classes that operate on different types. Here's an example:

   class Queue<T> {
     private items: T[] = [];

     enqueue(item: T) {
       this.items.push(item);
     }

     dequeue(): T | undefined {
       return this.items.shift();
     }
   }

   const numberQueue = new Queue<number>();
   numberQueue.enqueue(1);
   numberQueue.enqueue(2);
   console.log(numberQueue.dequeue()); // Output: 1

   const stringQueue = new Queue<string>();
   stringQueue.enqueue("Hello");
   stringQueue.enqueue("World");
   console.log(stringQueue.dequeue()); // Output: "Hello"

In the Queue class above, the type parameter T represents the type of items stored in the queue. Different instances of the class can be created with specific types.

Generics provide flexibility and type safety by allowing you to write reusable components that can work with various types. They enhance code reuse, maintainability, and enable the creation of more generic and flexible APIs in TypeScript.

Generic Constraints

Generic constraints in TypeScript allow you to restrict the types that can be used with a generic type parameter. By specifying constraints, you can ensure that the generic type parameter meets certain criteria, such as having specific properties or implementing certain interfaces. This helps to provide more specific type information and enables the usage of properties or methods specific to the constrained types. Here's an explanation of generic constraints with an example:

interface Animal {
  name: string;
  age: number;
}

function getOldest<T extends Animal>(animals: T[]): T {
  let oldest: T | null = null;

  for (const animal of animals) {
    if (oldest === null || animal.age > oldest.age) {
      oldest = animal;
    }
  }

  if (!oldest) {
    throw new Error("No animals found");
  }

  return oldest;
}

const animals: Animal[] = [
  { name: "Dog", age: 5 },
  { name: "Cat", age: 7 },
  { name: "Rabbit", age: 3 }
];

const oldestAnimal = getOldest(animals);
console.log(oldestAnimal.name); // Output: "Cat"
console.log(oldestAnimal.age); // Output: 7

In the example above, we have a generic function getOldest that finds the oldest animal from an array of animals. The generic type parameter T is constrained to Animal, which means that T must be a subtype of Animal and have the name and age properties defined.

Within the function, we iterate through the animals and compare their ages to

find the oldest one. The type of oldest is T | null, allowing us to handle the case when no animals are found.

By applying the extends keyword with the Animal interface (T extends Animal), we ensure that only types that satisfy the Animal interface can be used with the function. This provides type safety and allows us to access the name and age properties on the returned object without any type errors.

By using generic constraints, you can create more specific and reusable functions that operate on a restricted set of types. It allows you to leverage the properties and methods specific to the constrained types, ensuring type safety and enhancing code clarity.

Utility Types

TypeScript's utility types are a powerful toolset of predefined generic types that simplify type manipulation and transformation. They offer convenient operations and transformations on types, providing developers with enhanced capabilities to work with complex type systems. This article dives into some commonly used utility types in TypeScript and illustrates their usage with practical examples.

Partial<T>:

• Description: Creates a new type with all properties of T set to optional.
• Example:

interface User {
  name: string;
  age: number;
}

type PartialUser = Partial<User>;

const partialUser: PartialUser = {
  name: "John",
};

Required<T>:

• Description: Creates a new type with all properties of T set to required.
• Example:

interface User {
  name?: string;
  age?: number;
}

type RequiredUser = Required<User>;

const requiredUser: RequiredUser = {
  name: "John",
  age: 25,
};

Readonly<T>:

• Description: Creates a new type with all properties of T set to read-only.
• Example:

interface User {
  name: string;
  age: number;
}

type ReadonlyUser = Readonly<User>;

const readonlyUser: ReadonlyUser = {
  name: "John",
  age: 25,
};

// Error: Cannot assign to 'name' because it is a read-only property.
readonlyUser.name = "Jane";

Record<K, T>:

• Description: Creates a new type with properties of type T for each key K.
• Example:

type Weekday = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday";

type DailySchedule = Record<Weekday, string[]>;

const schedule: DailySchedule = {
  Monday: ["Meeting", "Lunch"],
  Tuesday: ["Gym"],
  Wednesday: [],
  Thursday: ["Conference"],
  Friday: ["Coding"],
};

Pick<T, K>:

• Description: Creates a new type by picking properties K from T.
• Example:

interface User {
  name: string;
  age: number;
  email: string;
  address: string;
}

type UserProfile = Pick<User, "name" | "email">;

const userProfile: UserProfile = {
  name: "John",
  email: "john@example.com",
};

Omit<T, K>:

• Description: Creates a new type by omitting specific properties K from the original type T.
• Example:

interface User {
  name: string;
  age: number;
  email: string;
  address: string;
}

type UserWithoutEmail = Omit<User, 'email'>;

const user: UserWithoutEmail = {
  name: 'John',
  age: 25,
  address: '123 Main St',
};

Exclude<T, U>:

• Description: Creates a new type by excluding types from T that are assignable to U.
• Example:

type MyObject = {
  id: number;
  name: string;
  age: number;
  isActive: boolean;
};

type ExcludedKeys = Exclude<keyof MyObject, 'name' | 'isActive'>;

// ExcludedKeys will be 'id' | 'age'

Extract<T, U>:

• Description: Creates a new type by extracting types from T that are assignable to U.
• Example:

type MyObject = {
  id: number;
  name: string;
  age: number;
  isActive: boolean;
};

type ExtractedKeys = Extract<keyof MyObject, 'name' | 'age'>;

// ExtractedKeys will be 'name' | 'age'

Advanced Types

Literal types allow you to specify exact values as types. Literal types can be used to enforce specific values on variables, function parameters, and properties, providing additional type safety and expressiveness. Here's an overview of literal types and some examples:

String Literal Types

• Description: Represents a specific string value.
• Example:

   let status: "active" | "inactive";
   status = "active"; // Valid
   status = "pending"; // Error: Type '"pending"' is not assignable to type '"active" | "inactive"'

Numeric Literal Types

• Description: Represents a specific numeric value.
• Example:

   let age: 18 | 21;
   age = 18; // Valid
   age = 25; // Error: Type '25' is not assignable to type '18 | 21'

Boolean Literal Types

• Description: Represents a specific boolean value.
• Example:

   let isCompleted: true | false;
   isCompleted = true; // Valid
   isCompleted = false; // Valid
   isCompleted = 0; // Error: Type '0' is not assignable to type 'true | false'

Enum Literal Types

• Description: Represents a specific value from an enumeration.
• Example:

   enum Direction {
     Up = "UP",
     Down = "DOWN",
     Left = "LEFT",
     Right = "RIGHT",
   }

   let direction: Direction.Up | Direction.Down;
   direction = Direction.Up; // Valid
   direction = Direction.Left; // Error: Type 'Direction.Left' is not assignable to type 'Direction.Up | Direction.Down'

Literal types provide more precise type information and help catch potential errors at compile-time. They are particularly useful when you want to restrict the possible values of a variable or when working with union types that have specific literal values. By leveraging literal types, you can enhance the type system and ensure the correctness of your code.

Recursive types

Recursive types, also known as self-referential types, are types that refer to themselves in their own definition. They allow you to create data structures or types that contain references to the same type within their own structure. Recursive types are useful when working with nested or hierarchical data structures. Here are a few examples of recursive types:

Linked List

   interface ListNode<T> {
     value: T;
     next?: ListNode<T>;
   }

   const node1: ListNode<number> = { value: 1 };
   const node2: ListNode<number> = { value: 2 };
   const node3: ListNode<number> = { value: 3 };

   node1.next = node2;
   node2.next = node3;

Binary Tree

   interface TreeNode<T> {
     value: T;
     left?: TreeNode<T>;
     right?: TreeNode<T>;
   }

   const nodeA: TreeNode<string> = { value: 'A' };
   const nodeB: TreeNode<string> = { value: 'B' };
   const nodeC: TreeNode<string> = { value: 'C' };

   nodeA.left = nodeB;
   nodeA.right = nodeC;

Nested Objects

   interface Person {
     name: string;
     children?: Person[];
   }

   const personA: Person = { name: 'Alice' };
   const personB: Person = { name: 'Bob' };
   const personC: Person = { name: 'Charlie' };

   personA.children = [personB, personC];

Recursive types allow you to create flexible and hierarchical data structures by referencing the same type within their definition. They enable you to work with nested data and handle complex relationships between entities. When using recursive types, it's important to ensure that the recursion has a terminating condition or a base case to avoid infinite nesting.

It's worth noting that TypeScript supports recursive types through the concept of type references. However, the compiler imposes some limitations on directly self-referencing types, such as strict circular references. If you encounter such limitations, you can leverage utility types like Partial, Record, or conditional types to define recursive structures indirectly.

🌟 Thank You for Joining the Journey! 🌟

I hope you found this blog post informative and engaging. Your support means the world to me, and I'm thrilled to have you as part of my community. To stay updated on my latest content.

📌 Follow me on Social Media! 📌

🌐 Visit my Website
📢 Connect with me on Twitter
📷 Follow me on Instagram
📚 Connect on LinkedIn
📌 Check out my GitHub

💌 A Special Message to You! 💌

To all my dedicated readers and fellow tech enthusiasts, I want to express my gratitude for your continuous support. Your engagement, comments, and feedback mean the world to me. Let's keep learning, growing, and sharing our passion for development!

👥 Let's Stay Connected! 👥
If you enjoy my content and want to stay in the loop with my latest posts, please consider following me on my social media platforms. Your support is invaluable.

Thank you for being a part of this amazing journey! 🚀