Higher-Order Types in TypeScript

Higher-order types are among the advanced aspects of Typescript that give priority to types as first-class citizens, similar to higher-order functions of JavaScript that accept a function as an argument or return a function, higher-order types can accept types or return types.

These are the following topics that we are going to discuss:

What Are Higher-Order Types?

A higher-order type is defined as a type that satisfies any of the conditions-

• Accepts one or more types as parameters.
• It returns a new type based on the input type.

Higher order types can be referred to as meta types whereby the meta type is defined by other types, they are also particularly useful in making such generic type utilities that can work with types in ways even more complex than just simple manipulation, a higher order type is a functional type in the sense that it couples functions and types, Generic types can accept parameters where these parameters are also their types that go ahead to output different types, this is mostly similar to the higher order functions in which a function accepts a function or an argument and returns a function.

Why Use Higher-Order Types?

Higher-order types are useful when:

• You need to create a reusable and flexible type that can work across different contexts.
• You want to compose multiple types to build more complex ones.
• You are working with complex data structures such as deeply nested objects or recursive structures and you need a way to create dynamic type transformations.

Understanding Higher-Order Types

Higher-order types normally include TypeScript generics, mapped types, and conditional types together, let‘s appreciate all the components:

• Generics: Enforce parameters to be supplied to the types in the same way as how one can supply arguments to a function.
• Mapped Types: Construct types by visiting the properties of an existing type and scrolling through the properties.
• Conditional Types: Reassigning a condition gives a different effect/purpose on a type and then returns the type conditionally.

By putting such effects together, the higher-order types become efficient.

Methods of Higher-Order Types

Simple Higher-Order Type

We’ll create a higher-order type IdentityType, which simply takes a type T as a parameter and returns it as it is.

Example: In this simple example, IdentityType accepts any type and returns that type, it's similar to a higher-order function that returns the input unchanged.

type IdentityType<T> = T;

type StringType = IdentityType<string>;
type NumberType = IdentityType<number>;

// Example usage:
const name: StringType = "Pankaj";
const age: NumberType = 20;

console.log(name);
// Output: "Pankaj"
console.log(age); 
// Output: 20

Output:

Pankaj
20

Higher-Order Type for Wrapping in an Array

Now we will introduce the higher-order type called WrapInArray which can be understood that whatever type is given an array of that type is returned WrapInArray is a higher-order type that takes a type and puts it into an array this type is generic since it can be used for any type T.

Example: In this example, we will use the Higher-Order Type for Wrapping in an Array

type WrapInArray<T> = T[]; 
// Higher-order type

type StringArray = WrapInArray<string>;
type NumberArray = WrapInArray<number>;

// Example usage:
const strings: StringArray = ["one", "two", "three"];
const numbers: NumberArray = [1, 2, 3];

console.log(strings); 
// Output: ["one", "two", "three"]
console.log(numbers);
// Output: [1, 2, 3]

Output:

[ 'one', 'two', 'three' ]
[ 1, 2, 3 ]

Recursive Higher-Order Type

Here we’ll create a recursive higher-order type DeepReadonly, which makes all properties of a given type T and its nested objects read-only, DeepReadonly is a recursive higher-order type that applies the read-only modifier to every property in the object, including nested objects, makes the entire object deeply immutable.

Example: In this example we will use the Recursive Higher-Order Type

type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};

interface Example {
  a: number;
  b: string;
  c: {
    d: boolean;
    e: {
      f: string;
    };
  };
}

type ReadonlyExample = DeepReadonly<Example>;

// Example usage:
const example: ReadonlyExample = {
  a: 42,
  b: "Hello",
  c: {
    d: true,
    e: {
      f: "world",
    },
  },
};

// example.a = 10;
// Error: Cannot assign to 'a' because it is a read-only property.
console.log(example); 

Output:

{ a: 42, b: 'Hello', c: { d: true, e: { f: 'world' } } }

Higher-Order Type for Conditional Mapping

Here we'll create a higher-order type Nullable that converts all properties of a given type to be nullable (T | null), Nullable is a higher-order type that converts each property of a given type T to be nullable and this allows us to create types where each field can be null or the original type.

Example: In this example we will use the Higher-Order Type for Conditional Mapping

type Nullable<T> = {
  [P in keyof T]: T[P] | null;
};

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

type NullableUser = Nullable<User>;

// Example usage:
const user: NullableUser = {
  name: null,
  age: 20,
  address: null,
};

console.log(user); 

Output:

{ name: null, age: 20, address: null }

Higher-Order Type for Function Wrapping

Now we will look for a higher-order type FunctionWrapper which will take a function as an argument and provide more arguments to that function, here, FunctionWrapper is a high-order type that uses a functional type T and attaches a string argument to the functional type, this kind of type is helpful in partially replacing or completely trashing a function.

Example: In this example we will use the Higher-Order Type for Function Wrapping

type FunctionWrapper<T extends (...args: any[]) => any> = 
(...args: [...Parameters<T>, string]) => ReturnType<T>;

function greet(name: string): string {
  return `Hello, ${name}!`;
}

const wrappedGreet: FunctionWrapper<typeof greet> = (name, suffix) => {
  return greet(name) + suffix;
};

// Example usage:
console.log(wrappedGreet("Pankaj", "!!!")); 

Output:

Hello, Pankaj!!!!

Limitations

As much as higher-order types are wieldy when it comes to abstraction, they certainly have their negatives.

• Complexity: Higher-order types are not easy to grasp and are prone to misuse especially when mixed with recursive or conditional types.
• Inference Issues: There are cases when it appears almost impossible to utilize a TypeScript type inference system with nested or recursive higher-order types.
• Performance: The use of advanced higher-order types tends to impair the performance of the compiler within big code bases.

Conclusion

Higher-order types in TypeScript are a great asset that allows the creation of reusable and flexible type utilities, you can come up with type transformations that allow your code to be safer, easier to change and maintain while treating types as entities instead of entities that have change being an afterthought, in this article, we covered multiple cases studies on higher-order types, starting from simple identity type systems to rather complex structure like DeepReadonly where we also had recursive types.

pankajbind

Follow

Improve

Article Tags :

• Web Technologies
• TypeScript
• TypeScript-Reference