Creating mapped types with readonly and optional properties (also preserving order?)

Question

I am wondering what's available in typescript and mapped types to create a mapped type that will apply readonly and optional properties as defined in the initial type. Example will be easier to explain.

I've made an example as simple as possible, starting with a type defined as

type PropertyAttributes = {
  readonly optional?: boolean;
  readonly readonly?: boolean;
  readonly value: string; //this would be something else but to simplify example like this
};

type ObjectDefinition = Record<string, PropertyAttributes>

This is the template in a way, from which I would like to create a type. For now I have this solution which works quite well by creating 4 different types and more less combining them.

//Four types corresponding to 4 types of objects
type ReadonlyRequired<O extends ObjectDefinition> = {
  +readonly [K in keyof O as O[K]["readonly"] extends true
    ? O[K]["optional"] extends true
      ? never
      : K
    : K]: O[K];
};

type ReadonlyOptional<O extends ObjectDefinition> = {
  +readonly [K in keyof O as O[K]["readonly"] extends true
    ? O[K]["optional"] extends true
      ? K
      : never
    : never]?: O[K] | undefined;
};

type MutableRequired<O extends ObjectDefinition> = {
  -readonly [K in keyof O as O[K]["readonly"] extends true
    ? never
    : O[K]["optional"] extends true
    ? never
    : K]: O[K];
};

type MutableOptional<O extends ObjectDefinition> = {
  -readonly [K in keyof O as O[K]["readonly"] extends true
    ? never
    : O[K]["optional"] extends true
    ? K
    : never]?: O[K] | undefined;
};
//Expand Util
export type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;

//Put them all together
type Combine<O extends ObjectDefinition> =  Expand<
  ReadonlyRequired<O> &
    ReadonlyOptional<O> &
    MutableRequired<O> &
    MutableOptional<O>
>;

Then finally a type that I think is not relevant to the core of the question but it maps the resulting type to take the object

//simple maps the Object to value preserving keys since homomorphic as I understand
type MapToValue<O extends ObjectDefinition> = {[K in keyof O]: NonNullable<O[K]>["value"]} //need NonNullable for optional types or infered as unknown

type ToObj<O extends ObjectDefinition>=MapToValue<Combine<O>>

This works fine, it's a bit long and the only issue is the order is not preserved because we have to split it out. I'm just wondering if anyone can think of a different way?

Or any even minor improvements you can think of would be awesome.

Here is playground link typescript playground

Thank you

Answer 1

One approach is to write ToObj as follows:

type ToObj<T extends Record<keyof T, PropertyAttributes>> = {
  -readonly [K in keyof T]-?: (x:
    MaybeOptional<
      MaybeReadonly<
        Record<K, T[K]['value']
        >, T[K]['readonly']
      >, T[K]['optional']
    >) => void }[keyof T] extends ((x: infer I) => void) ?
  { [K in keyof I]: I[K] } : never;

where MaybeOptional<T, B> and MaybeReadonly<T, B> are utility types that either apply Partial or Readonly to an object type T depending on whether or not the boolean-ish B is true:

type MaybeOptional<T, B extends boolean | undefined> =
  B extends true ? Partial<T> : T

type MaybeReadonly<T, B extends boolean | undefined> =
  B extends true ? Readonly<T> : T;

The way ToObj<T> works here is to use a mapped type to walk through each property of T in turn and create a single-property object with the optional or readonly bits set as appropriate. Here, let's break that part out into its own thing:

type ToObjStepOne<T extends Record<keyof T, PropertyAttributes>> = {
  -readonly [K in keyof T]-?:
  MaybeOptional<
    MaybeReadonly<
      Record<K, T[K]['value']
      >, T[K]['readonly']
    >, T[K]['optional']
  > }

You can see how this behaves on an input type:

type S1 = ToObjStepOne<{
  readonlyRequired: { readonly: true; value: "someValue" };
  readonlyOptional: { readonly: true; optional: true; value: "someValue" };
  mutableRequired: { value: "someValue" };
  mutableOptional: { optional: true; value: "someValue" };
}>;
/* type S1 = {
    readonlyRequired: Readonly<Record<"readonlyRequired", "someValue">>;
    readonlyOptional: Partial<Readonly<Record<"readonlyOptional", "someValue">>>;
    mutableRequired: Record<"mutableRequired", "someValue">;
    mutableOptional: Partial<Record<"mutableOptional", "someValue">>;
} */

Then we use the same technique from Transform union type to intersection type where we put each property into a contravariant position so we can infer a single intersection:

type ToObjStepTwo<T extends Record<keyof T, PropertyAttributes>> =
  ToObjStepOne<T> extends infer T1 ?
  { [K in keyof T1]: (x: T1[K]) => void }[keyof T1] extends
  (x: infer I) => void ? I : never
  : never

type S2 = ToObjStepTwo<{⋯}>
/* type S2 = 
  Readonly<Record<"readonlyRequired", "someValue">> & 
  Partial<Readonly<Record<"readonlyOptional", "someValue">>> & 
  Record<"mutableRequired", "someValue"> & 
  Partial<Record<"mutableOptional", "someValue">> 
*/

And you can see that this intersection is essentially the type you want, although it's ugly. At least the properties are in the right order. So if we now do the last little bit to map over the object, it will turn the ugly intersection into a single object type:

type ToObjStepThree<T extends Record<keyof T, PropertyAttributes>> =
  ToObjStepTwo<T> extends infer T2 ?
  { [K in keyof T2]: T2[K] }
  : never

type S3 = ToObjStepThree<{⋯}>
/* type S3 = {
    readonly readonlyRequired: "someValue";
    readonly readonlyOptional?: "someValue" | undefined;
    mutableRequired: "someValue";
    mutableOptional?: "someValue" | undefined;
} */

Let's make sure that's what we get when we run the single-piece definition:

type T1 = ToObj<{
  readonlyRequired: { readonly: true; value: "someValue" };
  readonlyOptional: { readonly: true; optional: true; value: "someValue" };
  mutableRequired: { value: "someValue" };
  mutableOptional: { optional: true; value: "someValue" };
}>;
/* type T1 = {
    readonly readonlyRequired: "someValue";
    readonly readonlyOptional?: "someValue" | undefined;
    mutableRequired: "someValue";
    mutableOptional?: "someValue" | undefined;
} */

Looks good!

Playground link to code