TypeScript Generic Interface

Introduction

In this chapter, we will explore generic interfaces in TypeScript. Generics allow you to create flexible and reusable interfaces that can work with different types while maintaining type safety. This is particularly useful for defining contracts for data structures and APIs that need to operate on various types of data.

Table of Contents

• Definition
• Generic Interface Syntax
• Using Generic Interfaces
• Type Constraints in Generic Interfaces
• Multiple Type Variables
• Conclusion

Definition

A generic interface is an interface that can operate on different types of data while maintaining type safety. By using generics, you can create interfaces that are flexible and reusable across different types.

Generic Interface Syntax

Syntax

interface InterfaceName<T> {
  // interface definition
}

Using Generic Interfaces

Example

Here, we create a generic interface Container that defines a structure for storing a value of type T and provides methods to get and set the value. This interface can be implemented by any class that works with various types of data.

interface Container<T> {
  getValue(): T;
  setValue(value: T): void;
}

class GenericContainer<T> implements Container<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }

  setValue(value: T): void {
    this.value = value;
  }
}

// Using the generic interface with a number
let numberContainer: Container<number> = new GenericContainer<number>(42);
console.log(numberContainer.getValue()); // Output: 42

// Using the generic interface with a string
let stringContainer: Container<string> = new GenericContainer<string>("Hello, TypeScript!");
console.log(stringContainer.getValue()); // Output: Hello, TypeScript!

In this example, the Container interface is implemented by the GenericContainer class. The interface can work with both number and string types, demonstrating the flexibility provided by generics.

Type Constraints in Generic Interfaces

You can add constraints to a generic interface to limit the types that can be used. This is done using the extends keyword.

Example

Here, we create a generic interface Lengthwise that requires a length property. The Container interface is then constrained to types that extend Lengthwise.

interface Lengthwise {
  length: number;
}

interface Container<T extends Lengthwise> {
  getValue(): T;
  logLength(): void;
}

class GenericContainer<T extends Lengthwise> implements Container<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }

  logLength(): void {
    console.log(this.value.length);
  }
}

// Using the generic interface with a string
let stringContainer: Container<string> = new GenericContainer<string>("Hello, TypeScript!");
stringContainer.logLength(); // Output: 16

// Using the generic interface with an array
let arrayContainer: Container<number[]> = new GenericContainer<number[]>([1, 2, 3, 4, 5]);
arrayContainer.logLength(); // Output: 5

In this example, the Container interface ensures that the value parameter has a length property. This allows the interface to operate safely on any type that meets this constraint.

Multiple Type Variables

You can use multiple type variables in a generic interface to work with multiple types simultaneously.

Example

Here, we create a generic interface Pair that defines a structure for storing two values of different types.

interface Pair<T, U> {
  first: T;
  second: U;
}

class GenericPair<T, U> implements Pair<T, U> {
  constructor(public first: T, public second: U) {}

  getFirst(): T {
    return this.first;
  }

  getSecond(): U {
    return this.second;
  }
}

// Using the generic interface with a number and a string
let numberAndStringPair: Pair<number, string> = new GenericPair<number, string>(42, "TypeScript");
console.log(numberAndStringPair.getFirst()); // Output: 42
console.log(numberAndStringPair.getSecond()); // Output: TypeScript

// Using the generic interface with two strings
let stringPair: Pair<string, string> = new GenericPair<string, string>("Hello", "World");
console.log(stringPair.getFirst()); // Output: Hello
console.log(stringPair.getSecond()); // Output: World

In this example, the Pair interface uses two type variables T and U to define a structure that can store and operate on two values of different types.

Conclusion

In this chapter, we covered generic interfaces in TypeScript, including their definition, syntax, and how to use them with various types. We also explored adding type constraints and using multiple type variables in generic interfaces. Understanding generic interfaces is essential for creating flexible, reusable, and type-safe TypeScript code.