How to implement deep pick in typescript

Question

I would like to implement deep pick in typescript.

My example code is:

interface TestBook {
    id: string;
    name: string;
}
interface TestUser {
    id: string;
    email: string;
    books: TestBook[];
}

I and I would like to use deep pick like:

const foo: DeepPick<TestUser, 'id' | 'books.name'> = {...
/*

{
  id: ..
  books: [{name: ...}]
}

*/

Problem: There is only Pick in standard typescript and there is no library implement this DeepPick.

How can I do it? Which technic should I use?

I tried to find on google and SO.

Have you tried https://stackoverflow.com/a/73913130/18244921? — kelsny, Nov 10 '22 at 14:47
Why not use something like [ts-deep-pick](https://www.npmjs.com/package/ts-deep-pick)? — kelsny, Nov 10 '22 at 15:11
Because its use unstandar way for array `'books.[].id'` but I need to use `books.id` — teteyi3241, Nov 10 '22 at 15:13
I came up with [this](https://tsplay.dev/mq3LQw) mess. If it works for your use case, I can write up an answer. — kelsny, Nov 10 '22 at 15:54

kelsny · Accepted Answer · 2022-11-10T19:07:27.430

5

Let's first define some utility types to get the "head" or "tail" of a path:

type Head<T extends string> = T extends `${infer First}.${string}` ? First : T;

type Tail<T extends string> = T extends `${string}.${infer Rest}` ? Rest : never;

Then our DeepPick can take the heads of the paths and then deep pick the tail:

type DeepPick<T, K extends string> = T extends object ? {
  [P in Head<K> & keyof T]: T[P] extends readonly unknown[] ? DeepPick<T[P][number], Tail<Extract<K, `${P}.${string}`>>>[] : DeepPick<T[P], Tail<Extract<K, `${P}.${string}`>>>
} : T

If it's not an object, we shouldn't do anything to it. Inside the mapped type, I also added a case for arrays.

Playground

edited Nov 10 '22 at 19:07

answered Nov 10 '22 at 18:09

kelsny

23,009
3
19
48

Looks like there is a issue for property starting with same "key" (book vs books) https://tsplay.dev/mppOpm I think that `infer` is problem – teteyi3241 Nov 10 '22 at 18:23
@teteyi3241 I corrected the implementation now – kelsny Nov 10 '22 at 19:07
Wow, Is it magic ? – Andy May 26 '23 at 13:44
Is it possible to have type suggestions like normal Pick? – Boom PT Jul 14 '23 at 09:32
@BoomPT Have you tried the answer below? – kelsny Jul 14 '23 at 16:50

Pedro Del Moral Lopez · Answer 2 · 2023-05-03T21:51:05.253

I tried @zenly's version and found I was losing type hints, so I've modified it slightly. Here's a more opinionated version (zenly's handles a wider set of inputs) that persisted typehints better

type Head<T extends string> = T extends `${infer First}.${string}` ? First : T;
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
type Tail<T extends string> = T extends `${string}.${infer Rest}` ? Rest : never;

type DeepPick<TObject, TKey extends string> = UnionToIntersection<TObject extends object
    ? TKey extends `${infer A}.${infer B}`
        ? {
              [P in Head<TKey> & keyof TObject]: DeepPick<TObject[P], Tail<Extract<TKey, `${P}.${string}`>>>;
          }
        : TKey extends keyof TObject
        ? Pick<TObject, TKey>
        : never
    : TObject>;

How to implement deep pick in typescript

2 Answers2

Linked