Mastering TypeScript: Looping with Types

Updated: at 

Introduction

Loops play a pivotal role in programming, enabling code execution without redundancy. JavaScript developers might be familiar with foreach or do...while loops, but TypeScript offers unique looping capabilities at the type level. This blog post delves into three advanced TypeScript looping techniques, demonstrating their importance and utility.

Mapped Types

Mapped Types in TypeScript allow the transformation of object properties. Consider an object requiring immutable properties:

type 
type User = {
    id: string;
    email: string;
    age: number;
}
User = {
  id: stringid: string;
  email: stringemail: string;
  age: numberage: number;
};

We traditionally hardcode it to create an immutable version of this type. However, to maintain adaptability with the original type, Mapped Types come into play. They use generics to map each property, offering flexibility to modify property characteristics. For instance:

type type ReadonlyUser<T> = { readonly [P in keyof T]: T[P]; }ReadonlyUser<function (type parameter) T in type ReadonlyUser<T>T> = {
  readonly [function (type parameter) PP in keyof function (type parameter) T in type ReadonlyUser<T>T]: function (type parameter) T in type ReadonlyUser<T>T[function (type parameter) PP];
};

This technique is extensible. For example, adding nullability:

type type Nullable<T> = { [P in keyof T]: T[P] | null; }Nullable<function (type parameter) T in type Nullable<T>T> = {
  [function (type parameter) PP in keyof function (type parameter) T in type Nullable<T>T]: function (type parameter) T in type Nullable<T>T[function (type parameter) PP] | null;
};

Or filtering out certain types:

type type ExcludeStrings<T> = { [P in keyof T as T[P] extends string ? never : P]: T[P]; }ExcludeStrings<function (type parameter) T in type ExcludeStrings<T>T> = {
  [function (type parameter) PP in keyof function (type parameter) T in type ExcludeStrings<T>T as function (type parameter) T in type ExcludeStrings<T>T[function (type parameter) PP] extends string ? never : function (type parameter) PP]: function (type parameter) T in type ExcludeStrings<T>T[function (type parameter) PP];
};

Understanding the core concept of Mapped Types opens doors to creating diverse, reusable types.

Recursion

Recursion is a cornerstone in TypeScript’s type-level programming, especially since state mutation is not an option. Consider applying immutability to all nested properties:

type type DeepReadonly<T> = { readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P]; }DeepReadonly<function (type parameter) T in type DeepReadonly<T>T> = {
  readonly [function (type parameter) PP in keyof function (type parameter) T in type DeepReadonly<T>T]: function (type parameter) T in type DeepReadonly<T>T[function (type parameter) PP] extends object ? type DeepReadonly<T> = { readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P]; }DeepReadonly<function (type parameter) T in type DeepReadonly<T>T[function (type parameter) PP]> : function (type parameter) T in type DeepReadonly<T>T[function (type parameter) PP];
};

Here, TypeScript’s compiler recursively ensures every property is immutable, demonstrating the language’s depth in handling complex types.

Union Types

Union Types represent a set of distinct types, such as:

const const hi: "Hello"hi = "Hello";
const 
const msg: "Hello, world"msg = `${const hi: "Hello"hi}, world`;

Creating structured types from unions involves looping over each union member. For instance, constructing a type where each status is an object:

type type Status = "Failure" | "Success"Status = "Failure" | "Success";
type 
type StatusObject = {
    status: Status;
}
StatusObject = type Status = "Failure" | "Success"Status extends infer function (type parameter) SS ? { status: Sstatus: function (type parameter) SS } : never;

Conclusion

TypeScript’s advanced type system transcends static type checking, providing sophisticated tools for type transformation and manipulation. Mapped Types, Recursion, and Union Types are not mere features but powerful instruments that enhance code maintainability, type safety, and expressiveness. These techniques underscore TypeScript’s capability to handle complex programming scenarios elegantly, affirming its status as more than a JavaScript superset but a language that enriches our development experience.