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
}

Inizia con la riproduzione collegata di TypeScript Playground e confronta il comportamento dell'inferenza tra le versioni 5.6.3 e 5.7.3, quindi esamina la mutazione del tipo Vue DefineProps indicata. La correzione è completa quando il parametro della callback JSX viene inferito come il valore generico letterale passato tramite name invece che come string, mentre la riproduzione rimane valida.