Let's kick things off with the basics. Eventually, we will have to translate from the string representation "text" to the type string and other types. In your project space, you opted for a conditional type to achieve this. While it works, using a straightforward map approach can enhance readability and scalability (plus, it improves performance too ^^).
type MappingType = {
"text": string
"number": number
}
I've also defined a type called DataElement for the provided data structure.
type DataElement = {
widget: string,
children?: readonly DataElement[],
property?: string,
optional?: boolean
}
This setup simplifies accessing properties later by indexing the generic type T. By utilizing this type as a constraint for T, we can perform actions like
T["property"]</code without the need to explicitly <em>validate</em> if the property exists.</p>
<p>Now onto the more complex part. We understand that the resulting type is a flat object.</p>
<pre><code>type MyData = {
name: string;
age: number;
location?: string | undefined;
}
We are aware that such object types can be built using mapped types and that we require a union for mapping. Ideally, we could create a helper type that generates a union from a given type which would resemble this:
{
widget: "text";
property: "name";
} | {
widget: "number";
property: "age";
} | {
widget: "text";
property: "location";
optional: true;
}
This union should encompass all necessary information about each resulting property.
To construct the union, I developed the recursive type known as RetrievePropertiesRecursive.
type RetrievePropertiesRecursive<T extends DataElement> =
| (T["property"] extends string ? T : never)
| (T["children"] extends readonly any[]
? T["children"][number] extends infer U
? U extends DataElement
? RetrievePropertiesRecursive<U>
: never
: never
: never
)
RetrievePropertiesRecursive initiates at the root of the object type and begins constructing the union by conducting two checks. Firstly, it verifies if T["property"] is defined. If so, we include T in the union. Next, it examines whether T["children"] is established. In such cases, we transform the tuple of children into a union of child elements by indexing T["children"] with number. These union elements are now usable in the recursive call to RetrievePropertiesRecursive.
Here lies a rather "hidden" TypeScript mechanism. By storing T["children"][number] within U and confirming if U extends DataElement, we are distributing the union elements across RetrievePropertiesRecursive.
Hence, instead of having
RetrievePropertiesRecursive<E_1 | E_2 | E_3>
(where
E_N represents a union element), we
distribute over
RetrievePropertiesRecursive, resulting in
RetrievePropertiesRecursive<E_1> | RetrievePropertiesRecursive<E_2> | RetrievePropertiesRecursive<E_3>
.
Finally, onto the last segment.
type Deduce<T extends DataElement> = (RetrievePropertiesRecursive<T> extends infer U ? ({
[K in U as K extends { optional: true }
? never
: K["property" & keyof K] & string
]: MappingType[K["widget" & keyof K] & keyof MappingType]
} & {
[K in U as K extends { optional: true }
? K["property" & keyof K] & string
: never
]?: MappingType[K["widget" & keyof K] & keyof MappingType]
}) : never) extends infer O ? { [K in keyof O]: O[K] } : never
We invoke
RetrievePropertiesRecursive<T>
and store the outcome in
U. Since properties where
optional is
true should be optional, we must form two separate
mapped types, one using the
? notation and then
intersect them.
For each respective mapped type, we sift through the union elements where
optional is
true or
false respectively. To fetch the property name, we operate
K["property"]K["widget"]
Let's start with the simple stuff. At some point, we will need to map from the string representation "text" to the type string and other types. In your playground, you used a conditional type for this. That works, but using a simple map makes it easier to understand and expandable (and the performance is better too ^^).
type WidgetToType = {
"text": string
"number": number
}
I also define a type FormElement for the given data structure.
type FormElement = {
widget: string,
children?: readonly FormElement[],
prop?: string,
optional?: boolean
}
This will make it easier to access properties by indexing the generic type T later. We can use the type as a constraint for T to do things like T["prop"] without needing to check if the property exists.
Now to the harder part. We know the resulting type is a flat object.
type MyForm = {
name: string;
age: number;
location?: string | undefined;
}
We also know that we can construct such object types with mapped types and that we need a union for mapping. So ideally we can create a helper type which will create a union from a given type which will look like this:
{
widget: "text";
prop: "name";
} | {
widget: "number";
prop: "age";
} | {
widget: "text";
prop: "location";
optional: true;
}
This union should contain all the needed information about each resulting property.
To create the union, I wrote the recursive type GetPropsDeeply.
type GetPropsDeeply<T extends FormElement> =
| (T["prop"] extends string ? T : never)
| (T["children"] extends readonly any[]
? T["children"][number] extends infer U
? U extends FormElement
? GetPropsDeeply<U>
: never
: never
: never
)
GetPropsDeeply starts at the root of the object type and begins building the union by performing two checks. First, it checks if T["prop"] is set. If so, we can add T to the union. Then it checks if T["children"] is set. If that is the case, we convert the children tuple to a union of children elements by indexing T["children"] with number. We can now use these union elements in the recursive call to GetPropsDeeply.
Here is also a "hidden" TypeScript mechanic. By storing T["children"][number] inside U and checking if U extends FormElement, we are distributing the union elements over GetPropsDeeply.
So instead of having
GetPropsDeeply<E_1 | E_2 | E_3>
(where
E_N is a union element), we
distribute over
GetPropsDeeply resulting in
GetPropsDeeply<E_1> | GetPropsDeeply<E_2> | GetPropsDeeply<E_3>
.
Now to the last part.
type Infer<T extends FormElement> = (GetPropsDeeply<T> extends infer U ? ({
[K in U as K extends { optional: true }
? never
: K["prop" & keyof K] & string
]: WidgetToType[K["widget" & keyof K] & keyof WidgetToType]
} & {
[K in U as K extends { optional: true }
? K["prop" & keyof K] & string
: never
]?: WidgetToType[K["widget" & keyof K] & keyof WidgetToType]
}) : never) extends infer O ? { [K in keyof O]: O[K] } : never
We call GetPropsDeeply<T> and store the result in U. Since properties where optional is true are supposed to be optional, we need to construct two seperate mapped types where one is using the ? notation and intersect them.
For the respective mapped type, we filter out the union elements where optional is true or false respectively. To get the property name, we do K["prop"] and we also use our mapping here to get the corresponding type of K["widget"].
Playground