I have the following code (playground here)

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

The Autocompletion(ctrl + space) doesn't work with VScode for MyBox while it does for MyBox2. If you comment & P then Autocompletion will work for MyBox as well.

Questions

• When doing just <Box /> the default value for P should be {} so why do i have to specify it in MyBox2?
• If i do const MyBox3 = (params: Props<{ foo: string }>) => <Box {...params} foo="bar" /> why does the generic param's type become {foo: string}?
• For MyBox why is customProp's type never?

Thank you so much 🙏