TypeScript Generics

#

Generics allow you to create reusable components that can work with a variety of types rather than a single one. This allows users to consume these components and use their own types.

Generic Functions

#

Create a function that works with any type:

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

let output1 = identity<string>("myString");
let output2 = identity<number>(42);

// Type argument inference
let output3 = identity("hello"); // Type inferred as string

Generic Interfaces

#

Define interfaces that use type parameters:

interface GenericIdentityFn<T> {
  (arg: T): T;
}

let myIdentity: GenericIdentityFn<number> = identity;
myIdentity(123);

Generic Classes

#

Create classes that work with multiple types:

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

let stringNumeric = new GenericNumber<string>();
stringNumeric.zeroValue = "";
stringNumeric.add = function(x, y) { return x + y; };

Generic Constraints

#

Restrict generics to types that have certain properties:

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length); // Now we know it has a .length property
  return arg;
}

loggingIdentity({ length: 10, value: 3 });
// loggingIdentity(3); // Error: number doesn't have .length

Using Type Parameters in Constraints

#

Declare a type parameter that is constrained by another type parameter:

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };
getProperty(x, "a");
// getProperty(x, "m"); // Error: Argument of type 'm' isn't assignable