Tengo el siguiente código (patio de recreo aquí )

 import React from 'react'; const colors = { a: 1, b: 1, } as const type Props<P extends Record<string, any> = {}, T extends HTMLElement = HTMLDivElement> = { customProp: keyof typeof colors | `${string}px` } & React.HTMLAttributes<T> & P // <---------- try to comment this part and notice autocompletion for MyBox type BoxReturn = <P extends Record<string, any> = {}, T extends HTMLElement = HTMLDivElement>( props: Props<P, T> ) => JSX.Element const Box = React.forwardRef(function Box( props, ref ) { return null }) as BoxReturn const MyBox = () => <Box customProp="ab" /> // no auto complete, but it _is_ type safe const MyBox2 = () => <Box<{}> customProp="a" /> // this works, notice the generic const MyBox3 = (params: Props<{ foo: string }>) => <Box {...params} foo="bar" /> // why is `foo="bar"` allowed when i didnt do <Box<{foo: string} />

Autocompletar (ctrl + espacio) no funciona con VScode para MyBox mientras que sí lo hace para MyBox2 . Si comenta & P , Autocompletar también funcionará para MyBox .

Preguntas

• Al hacer solo <Box /> el valor predeterminado para P debe ser {} , entonces, ¿por qué tengo que especificarlo en MyBox2 ?
• Si hago const MyBox3 = (params: Props<{ foo: string }>) => <Box {...params} foo="bar" /> ¿por qué el tipo de parámetro genérico se convierte en {foo: string} ?
• Para MyBox ¿por qué el tipo de customProp never ?

Muchas gracias 🙏