How to recursively replace typescript primitives with a parameterized type

Question

type or interface could both work.

interface example {
  s: string;
  o: {
    t: string;
    arrn: number[];
    arr: {
      u: string;
    }[];
};

Would transform to

interface transformed {
  s: {
    onChange: (v: string) => void;
  };
  o: {
    t: {
      onChange: (v: string) => void;
    };
    arrn: {
      onChange: (v: number) => void;
    }[];
    arr: {
      u: {
        onChange: (v: number) => void;
      };
    }[];
};

Is this possible?

What is the direction to do something like this?

vitoke · Accepted Answer · 2021-09-28 11:20:47Z

1

I think the following type satisfies what you describe:

interface example {
  s: string;
  o: {
    t: string;
    arrn: number[];
    arr: {
      u: string;
    }[];
  };
}

type ReplacePrimitives<T> = T extends Record<any, any>
  ? { [K in keyof T]: ReplacePrimitives<T[K]> }
  : { onChange: (value: T) => void };

type transformed = ReplacePrimitives<example>;

It recursively replaces all primitive values with the onChange object you describe, leaving records and array structures in place.

edited Sep 28, 2021 at 11:20

answered Sep 28, 2021 at 6:46

vitoke

7784 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vitoke Over a year ago

Haha yeah, wish there was some indication on SO like "someone is currently answering this" :)

exrhizo Over a year ago

Oh good this was easier than I expected! I forgot arrays and objects were both records. Thank you - I can't assign 2 answer correct :P

cherryblossom · Accepted Answer · 2021-10-19 10:02:23Z

1

type Transform<T> = T extends object
  // T is an object (including an array), so transform each property
  ? {[K in keyof T]: Transform<T[K]>}
  // T is a primitive, so do the transformation
  : {onchange: (v: T) => void};

type transformed = Transform<example>

This works as expected for tuples and arrays as well:

// {onchange: (v: string) => void}[]
type ArrayTest = Transform<string[]>;
// readonly {onchange: (v: string) => void}[]
type ReadonlyArrayTest = Transform<readonly string[]>;
/* [
  {onchange: (v: string) => void},
  {onchange: (v: number) => void},
  ...{onchange: (v: boolean) => void}[],
] */
type TupleTest = Transform<[string, number, ...boolean[]]>;

Playground link

edited Oct 19, 2021 at 10:02

answered Sep 28, 2021 at 6:46

cherryblossom

14.4k2 gold badges38 silver badges68 bronze badges

Collectives™ on Stack Overflow

How to recursively replace typescript primitives with a parameterized type

Is this possible?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Is this possible?

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related