[Typescript] Tips: Assign local variables to default generic slots to dry up your code and improve performance

You can DRY up your generics code MASSIVELY (and improve perf) by assigning local variables to default generic slots.

Here, we move some complex 'Extract' logic to a generic slot, meaning it only gets calculated once.

export type Obj = {
  a: "a",
  a2: "a2",
  a3: "a3",
  b: "b",
  b1: "b1",
  b2: "b2",
}

type ValuewOfKeysStartingWithA<Obj> = {
  [K in Extract<keyof Obj, `a${string}`>]: Obj[K]
}[Extract<keyof Obj, `a${string}`>]

type x = ValuewOfKeysStartingWithA<Obj> // "a" | "a2" | "a3"

 

Notice that we repeat Extract<keyof Obj, `a${string}`>twice.

What we can do better:

type ValuewOfKeysStartingWithA<
  Obj,
  _ExtractedKey extends keyof Obj = Extract<keyof Obj, `a${string}`>
> = {
  [K in _ExtractedKey]: Obj[K];
}[_ExtractedKey];

 

 

Extract to more generic type:

export type Obj = {
  a: "a";
  a2: "a2";
  a3: "a3";
  b: "b";
  b1: "b1";
  b2: "b2";
  12: "12";
};

type KeyStartsWith<
  Obj extends Record<PropertyKey, any>,
  Matcher extends string | number | symbol,
  _ExtractedKey extends keyof Obj = Extract<keyof Obj, Matcher>
> = {
  [K in _ExtractedKey]: Obj[K];
}[_ExtractedKey];

type KeyStartsWithA = KeyStartsWith<Obj, `a${string}`>; // "a" | "a2" | "a3"
type KeyStartsWithNumber = KeyStartsWith<Obj, number>; // "12"
type KeyStartsWithNumber2 = KeyStartsWith<[123, 321], number>; // 123 | 321