Derive props from $ type

[kylpo]

I spent a few hours trying to figure this out, but without some way of defaulting a generic for an interface, I don't know if this is possible. This is possible for a function, but I wasn't able to get it for an interface (which is what we need when adding our primitives to the IntrinsicElements interface.

// Does NOT compile
type PrimitiveProps<T extends keyof JSX.IntrinsicElements> = React.ComponentProps<T> & {
  $: T = "div" // Error: A type literal property cannot have an initializer.ts(1247)
}

// Compiles, but errors when primitives have any non-`"img"` `$` value
type Prim<T extends keyof JSX.IntrinsicElements = "img"> =
  React.ComponentProps<T> & {
  $?: T
}

// in jsx...
<flex
  $="img"
  src="hello"
  notAnImgProp // correctly shows error 😃!
/>

<flex
  $="main" // incorrectly errors with `Type '"main"' is not assignable to type '"img"'` 😞 
/>

[kylpo]

Tabs I had open when I was trying this:

• The as prop and Custom component - Chakra UI
  • chakra-ui/as-prop.test.tsx at 790d2417a3f5d59e2d69229a027af671c2dc0cbc · chakra-ui/chakra-ui
  • chakra-ui/system.types.tsx at 790d2417a3f5d59e2d69229a027af671c2dc0cbc · chakra-ui/chakra-ui
  • chakra-ui/button.tsx at main · chakra-ui/chakra-ui
• Typescript interface default values - Stack Overflow
• typescript - Infer generic type in property (like in a function) for proper type checking - Stack Overflow
• Typescript: How to use a generic parameter as object key - Stack Overflow
• javascript - React: TypeScript generics, auto switch parameter-type from function (function as props) - Stack Overflow
• How To Use Generics in TypeScript | DigitalOcean
• React & TypeScript: use generics to improve your types - Devtrium

[kylpo]

I believe the problem is that IntrinsicElements does not support a generic. If it did, we'd be able to infer its value (or use its default) based on how the generic is used (in the $: T)

type IntrinsicElement = keyof JSX.IntrinsicElements;

interface Primitive<T extends IntrinsicElement> extends JSX.IntrinsicElements[T] {
  $: T
}

declare global {
  namespace JSX {
    interface IntrinsicElements<T extends  IntrinsicElement> {
      flex: Primitive<T>
    }
  }
}

Buut, adding a generic to IntrinsicElements basically breaks all jsx types. A search on all of github for "interface IntrinsicElements<" reveals no hits. I don't think anyone has found a way to make this work. Perhaps an Issue on the TS github repo is in order?

Maybe microsoft/TypeScript#14729 will help?

[kylpo]

For now, I'll leave $ and $- props untyped. If we want these props to be properly typed, we'll need to make proper <Flex> components that must be imported, but also can enforce their types. Much like https://dev.to/fabiobiondi/create-a-react-typescript-generic-component-2dal

[kylpo]

I was excited to see this new feature in TS, but it is not what I need.

I should try to PR Typescript to add a root level generic to IntrinsicElements. Maybe these PRs (added in the recent TS version) will help?

• feat(7411): Resolve intrinsics elements by JSX namespaced tag names microsoft/TypeScript#53799
• RFC: Consult new JSX.ElementType for valid JSX element types microsoft/TypeScript#51328