Recursive Conditional Types

Assume you have a for in loop and suddenly realize that your variable type is string and not a string literal union type. So you get this ugly error when you're compiling your app with tsc, and annoyingly your favorite IDE most likely screams at the top of their lunge:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ user: number; nice: number; sys: number; idle: number; irq: number; }'.
  No index signature with a parameter of type 'string' was found on type '{ user: number; nice: number; sys: number; idle: number; irq: number; }'.ts(7053)

[!NOTE]

Just to show you how it is done I am using os.cpus. There I try to loop over cpu.times which is an object. You can find more info here.

So here is the problematic code:

import { cpus } from 'os';

const logicalCoresInfo = cpus();

for (const logicalCoreInfo of logicalCoresInfo) {
  let total = 0;
  for (const type in logicalCoreInfo.times) {
    total += logicalCoreInfo.times[type];  // Darn it, TS is upset!
  }
}

Fix

1. We need to extract the keys inside the logicalCoreInfo.times and create a new type out of it.
2. Then we can utilize type assertion to convince TS that everything is cool and we know what is happening here.

---

So let's get into it, for the first part we need to create a custom utility type for ourselves, here is how our final utility type will look like:

type NestedKeysOf<T, K extends PropertyKey> = T extends object
  ? {
      [TKey in keyof T]-?:
        | (TKey extends K ? keyof T[TKey] : never)
        | NestedKeysOf<T[TKey], K>;
    }[keyof T]
  : never;

Let's break it down:

1. T extends object ? ... : never is telling TS to recursively traverses a nested object type T and extract keys of a specific key inside T if T is an object.

2. [TKey in keyof T]-? is a "Mapped Type" which is particularly useful here since we do not know the name of the keys inside the object passed to this utility type. Here you pass logicalCoreInfo to it or any other object, then it iterates through keys to create a new type out of them.

   And -? is there to remove optionality so that we have a string literal union type of all keys. In other word { keyName?: string } will be treated as { keyName: string }.

3. (TKey extends K ? keyof T[TKey] : never) check if the the current key in the iteration matches the passed key (K), if yes it extracts all keys inside it as a string literal union type and return it. Otherwise it returns nothing.

4. Then if step 3 had no result it will recursively apply this utility type on T[Tkey], this way our utility function works on nested objects as well. This is commonly known as "Recursive Conditional Type".

5. Finally we are asking it to take the union of all the types generated by the mapped type. In short we're flattening the nested structure.

So now its time to use it:

interface Person {
  name: string;
  address: {
    street: string;
    city: string;
  };
}

type KeysOfAddress = NestedKeysOf<Person, 'address'>; // "street" | "city"

// Or in our original example:
type CpuTimesKeys = NestedKeysOf<typeof logicalCoreInfo, 'times'>;
// ...
total += logicalCoreInfo.times[type as CpuTimesKeys];
// ...

Ref

• TypeScript keyof of nested object type.

The above is the detailed content of Recursive Conditional Types. For more information, please follow other related articles on the PHP Chinese website!