Mapped type of a conditional type unexpectedly fails inference

[andylizi]

🔎 Search Terms

conditional type infer unknown
conditional type mapped type inference

🕗 Version & Regression Information

This is the behavior in every version I tried (3.3.3 to 5.5.3), and I reviewed the FAQ for entries about conditional types, mapped types, and structural inference.

⏯ Playground Link

https://www.typescriptlang.org/play/?ts=5.5.3#code/C4TwDgpgBAsghmSATAPAFQHxQLxQN5QDaAClAJYB2UA1hCAPYBmUaAugFwsmtQC+AUP1CQoAYXoBbMPQoQKwAII5YCZCgKMyEADZJOFAK4SARhABOfDIOHRxUmXOAAhZRq279R0xYFDw0AEkKRnMARnQsXHhECFQ0KAgAD2A5JABnKFkAN3MoAH5Mg21tKE5MQSQIAGNtODNoRgMKKuAyGXJgsIiACirOIJCzcMwASjL+SkHQ7rxeKDgMu2lZeQURgDpNHSRlUKgoAHoDqEBQcgnOoZm5hbFJZccnDa3dXf2jqEAZcigAUTMzejMnAA8sYAFbVYDkDJMKA2KAAcia1Ao9AA7hR4YI-CIBuYAEwRZTxJIpCjpTIQHIWAqGYqlFQxOJWfiVGp1BpNFptKiTfE9PpQXFmAmjca84VXeaLO4OVZPdw7XB7Q7HM7ivGSm5LWXOeXbV4q078IA

💻 Code

type Mapped<T> = { [P in keyof T]: T[P] }

type ComponentA = Mapped<{ field: number }>
type ComponentB = { field: number }

type Infer1<T> = Mapped<T extends never ? null : T>

declare function infer1<T>(c: Infer1<T>): T
infer1({} as ComponentA).field = 1  // ✅
infer1({} as ComponentB).field = 1  // ❌ Error: Object is of type 'unknown'


type Infer2<T> = T extends never ? null : Mapped<T>

declare function infer2<T>(c: Infer2<T>): T
infer2({} as ComponentA).field = 1  // ✅
infer2({} as ComponentB).field = 1  // ✅

🙁 Actual behavior

infer1(ComponentA) passed inference but infer1(ComponentB) failed with unknown.

However, if it's the other way around — Conditional ? Mapped<T> instead of Mapped<Conditional ? T>, both infer2(ComponentA) and infer2(ComponentB) passed inference.

🙂 Expected behavior

I expect infer1(ComponentA) and infer1(ComponentB) to both work, because ComponentA and ComponentB are essentially the same type — I'm unable to otherwise differentiate them by any means.

Additional information about the issue

I discovered this while debugging vuejs/core#11353, and the interference failure there was eventually reduced to this report.

[RyanCavanaugh]

The ComponentA inference works because it's a straightforward inference of Mapped<...> to Mapped<T>.

There's no inference rule for working backwards from the structural ComponentB to Mapped<T> in the other scenario. I assume it's possible to add it but it would need to be well-motivated (IOW, a good explanation of why someone would be writing Infer1 that way in the first place)

[andylizi]

Thanks for the explanation, that makes sense! I'm guessing this would be an example of "Structural vs Instantiation-Based Inference" in the FAQ.

As for motivation, I encountered this issue while debugging vuejs/core#11353, where defineCustomElement function needs to extract the prop types from an instantiation of DefineComponent:

export function defineCustomElement<P>(
  options: DefineComponent<P, any, any, any>
): VueElementConstructor<ExtractPropTypes<P>>

DefineComponent stores its prop types through a helper type called ResolveProps:

type ResolveProps<PropsOrPropOptions, E extends EmitsOptions> = 
  Readonly<PropsOrPropOptions extends ComponentPropsOptions
    ? ExtractPropTypes<PropsOrPropOptions>
    : PropsOrPropOptions>
 & ({} extends E ? {} : EmitsToProps<E>)

And this is where I run into the issue. Somehow, Readonly<{ field: number }> works as one of the generic parameters of DefineComponent, but { readonly field: number } doesn't. This behavior is really surprising because everyone has been taught that TypeScript uses structural typing, therefore those two types should be equivalent for all intents and purposes. I was not aware there are exceptions to this rule before.

At the time, swapping the order of Readonly<...> and A extends B ? ... seemed to work for my simplified reproduction¹:

type ResolveProps<PropsOrPropOptions, E extends EmitsOptions> = 
  PropsOrPropOptions extends ComponentPropsOptions
    ? Readonly<ExtractPropTypes<PropsOrPropOptions>>
    : Readonly<PropsOrPropOptions>
 & ({} extends E ? {} : EmitsToProps<E>)

a good explanation of why someone would be writing Infer1 that way in the first place

Infer1 is indeed an artificial example no one would actually write, but ResolveProps does not look that unreasonable to me.

Footnotes

1. However, this change did not actually fix the Vue issue in practice. I must have made a mistake when reducing the complicated DefineComponent type to a minimum viable reproduction. ↩