Regression in generic inference with JSX in v5.7+

[pikax]

🔎 Search Terms

tsx generic

🕗 Version & Regression Information

• This changed between versions 5.6.3 and 5.7.3

⏯ Playground Link

https://www.typescriptlang.org/play/?jsx=1&ts=5.8.3#code/JYWwDg9gTgLgBAbzgEwKYDNgDtUAUoRgDOcAhiQG4CuqAIhtngcXAL5zoEhwDk1qPANwAoYWgDGAG1JRUccRCxF4AYQjgAXImFw4OAO5wAPAH0TANQCiAJQAqNs7YDKjuKgAeMVFmQllUbABzOABeXh4APgAKAEotBB1dOAASMGYiLTRMHHxCIlMLG3trRxcTWwjE1hFWUSjEozVwPVIQVBCAInQICA7E3UUAOVb2hDkQiO0kpIB6GbgAARgiAFoPMFRxGDWoAig4GAALYD9DiCpJZD1UClR9w9IwDax+pOB0OCi5AEIQsJ5kMgeDEptM2K9WOwZpUYiJRMJBBwqFgtsBFHBbKhwNIvAAhbDIIIAMUGRlsbk83l8cH8QWiIISugUSnguRYYX49GyTDyRkZSSwIy0thE0yGQs+WGFIImcAoEGAyFFbHpol0shgVCgWEQKAYOXSWjZJHIBwAnhsIB9jeDqqJ1tB4DALXIsoxjWSKV4fH4YAEsIFJmFrKhNdrbC6jM7LR9MdjSHiCcTSRUIgBtAH6nnEHgAXSAA

💻 Code

import { defineProps as vueDefineProps } from 'vue';

declare const Comp: {
  new <__VERTER__TS__T extends string = ''>(): {
    $props: defineProps<__VERTER__TS__T>
  };
}

(
  <Comp name="foo"
    onName={e => {
      // @ts-expect-error this should never happen
      if (e !== 'dd') {
      }
    }} />
);



; function TemplateBindingFN<T extends string>() {
  const Props = vueDefineProps<{
    name: T;
    onName: (n: T) => void;
  }>()

  return { defineProps: Props as typeof Props }
};

export type defineProps<T extends string> = ReturnType<typeof TemplateBindingFN<T>>['defineProps']

🙁 Actual behavior

In later version the onName argument does not get the generic information resolved, defaulting to string, earlier versions 5.x infer e as 'foo'

🙂 Expected behavior

e should be implicitly inferred based on the generic passed in name

Additional information about the issue

It seems to be caused by the type mutation of DefineProps

export type DefineProps<T, BKeys extends keyof T> = Readonly<T> & {
  readonly [K in BKeys]-?: boolean
}

[Andarist]

Bisects to #52095

Those types simplify to:

declare global {
  namespace JSX {
    export interface ElementAttributesProperty {
      $props: {};
    }
  }
}

type LooseRequired<T> = { [P in keyof (T & Required<T>)]: T[P] };

export type defineProps<T extends string> = Readonly<
  LooseRequired<{
    name: T;
    onName: (n: T) => void;
  }>
> & {
  readonly [K in [T] extends [boolean | undefined] ? "name" : never]-?: boolean;
};

declare const Comp: {
  new <__VERTER__TS__T extends string = "">(): {
    $props: defineProps<__VERTER__TS__T>;
  };
};

<Comp
  name="foo"
  onName={(e) => {
    // @ts-expect-error this should never happen
    if (e !== "dd") {
    }
  }}
/>;

Since that PR, both intersection constituents are properly considered as types that can contextually type the name property here. The second one isn't eliminated soon enough - as T's type is still a work in progress. So the name property gets typed based on __VERTER__TS__T & boolean (and that's basically never). And thus it widens to just a string - whereas previously it would only be typed based on __VERTER__TS__T and given that has a string contraint... the type would not widen and it would stay as "foo".

Please also remember that T could be instantiated with never, so - despite T having a string constraint - that intersection member can't be easily eliminated.