How do I type this ‘as’ JSX attribute in TypeScript?

by

I’ll give an example of the most basic requirements given here. You can try to generalize to something that does something more sophisticated.

First, here’s our magic component!

import * as React from "react";

function Foo<Tag extends AnyTag>(props: { as: Tag } & PropsOf<Tag>): JSX.Element;

Note two things:

  • A type called AnyTag
  • A utility type called PropsOf

That was our public signature. We might be able to implement this in a type-safe way using that signature, but we can “cheat” a little here in the implementation signature. This is up to you as the implementer.

function Foo(props: any) {
    return <div>Implementation goes here!</div>
}

Let’s go back to those two types we mentioned. AnyTag is anything that a JSX tag can be.

type AnyTag = string
            | React.FunctionComponent<never>
            | (new (props: never) => React.Component);

PropsOf tries to get the expected properties for a given HTML tag name or component.

type PropsOf<Tag> =
    Tag extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[Tag] :
    Tag extends React.ComponentType<infer Props> ? Props & JSX.IntrinsicAttributes :
    never
;

Let’s now define a few components taking the same props – one function and one class.

interface SomeProps {
  x: boolean; y: boolean; z: boolean;
}

function Bar(props: SomeProps) {
    return <div>{props.x} {props.y} {props.z}</div>;
}

class Baz extends React.Component<SomeProps> {
    render() {
        const { x, y, z } = this.props;
        return <div>{x} {y} {z}</div>;
    }
}

Now here’s some usage!

let a1 = <Foo as="a" href="https://kthxb.ai" />;         // good!
let a2 = <Foo as="div" href="https://kthxb.ai" />;       // error!
let a3 = <Foo as="a" href={100} />;                      // error!

let b1 = <Foo as={Bar} x y z />;                         // good!
let b2 = <Foo as={Bar} x y z asdsadsada />;              // error!
let b3 = <Foo as={Bar} x={1} y={2} z={3} asdsadsada />;  // error!

let c1 = <Foo as={Baz} x y z />;                         // good!
let c2 = <Foo as={Baz} x y z asdsadsada />;              // error!
let c3 = <Foo as={Baz} x={1} y={2} z={3} asdsadsada />;  // error!

Altogether

import * as React from "react";

// Here's our magic component!
// Note two things:
//   - A type called AnyTag
//   - A utility type called PropsOf
function Foo<Tag extends AnyTag>(props: { as: Tag } & PropsOf<Tag>): JSX.Element;

// That was our public signature. We might be able to implement this in a type-safe way using that signature,
// but we can "cheat" a little here in the implementation signature. This is up to you as the implementer.
function Foo(props: any) {
    return <div>Implementation goes here!</div>
}

// AnyTag is anything that a JSX tag can be.
type AnyTag = string
            | React.FunctionComponent<never>
            | (new (props: never) => React.Component);

// PropsOf tries to get the expected properties for a given HTML tag name or component.
type PropsOf<Tag> =
    Tag extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[Tag] :
    Tag extends React.ComponentType<infer Props> ? Props & JSX.IntrinsicAttributes :
    never
;

// Let's now define a few components taking the same props - one function and one class.

interface SomeProps {
  x: boolean; y: boolean; z: boolean;
}

function Bar(props: SomeProps) {
    return <div>{props.x} {props.y} {props.z}</div>;
}

class Baz extends React.Component<SomeProps> {
    render() {
        const { x, y, z } = this.props;
        return <div>{x} {y} {z}</div>;
    }
}

// Now here's some usage!

let a1 = <Foo as="a" href="https://kthxb.ai" />;         // good!
let a2 = <Foo as="div" href="https://kthxb.ai" />;       // error!
let a3 = <Foo as="a" href={100} />;                      // error!

let b1 = <Foo as={Bar} x y z />;                         // good!
let b2 = <Foo as={Bar} x y z asdsadsada />;              // error!
let b3 = <Foo as={Bar} x={1} y={2} z={3} asdsadsada />;  // error!

let c1 = <Foo as={Baz} x y z />;                         // good!
let c2 = <Foo as={Baz} x y z asdsadsada />;              // error!
let c3 = <Foo as={Baz} x={1} y={2} z={3} asdsadsada />;  // error!

More Related Contents:

  1. Cannot use JSX unless the ‘–jsx’ flag is provided
  2. How to define css variables in style attribute in React and TypeScript
  3. Typescript + React/Redux: Property “XXX” does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes
  4. PropTypes in a TypeScript React Application
  5. How to use refs in React with Typescript
  6. React: Expected an assignment or function call and instead saw an expression
  7. How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
  8. You should not use outside a
  9. Typescript image import
  10. Set loading state before and after an action in a React class component
  11. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  12. Set types on useState React Hook with TypeScript
  13. Visual studio code changes format (React-JSX)
  14. How to type a page component with props in Next.js?
  15. What does the colon mean in Javascript after function?
  16. React Hooks – Modified state not reflecting immediately
  17. React Hooks – Modified state not reflecting immediately
  18. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  19. React with Typescript — Generics while using React.forwardRef
  20. Is it possible to limit children to specific components using React with TypeScript?
  21. Warning: Prop `className` did not match. when using styled components with semantic-ui-react
  22. Passing object as props to jsx
  23. Disable ESLint that create-react-app provides
  24. React and TypeScript—which types for an Axios response?
  25. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  26. Webpack & Typescript image import
  27. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  28. Only allow specific components as children in React and Typescript
  29. ‘React’ was used before it was defined
  30. Using styled-components with props and TypeScript

Leave a Comment