Regression in generic inference with JSX in v5.7+

🔎 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
}

Start with the linked TypeScript Playground reproduction and compare inference behavior between versions 5.6.3 and 5.7.3, then review the referenced Vue DefineProps type mutation. The fix is complete when the JSX callback parameter is inferred as the literal generic value passed through name rather than string, while the reproduction remains valid.