TypeScript icon indicating copy to clipboard operation
TypeScript copied to clipboard

Cannot Omit specific fields of react polymorphic components

Open cangSDARM opened this issue 3 years ago • 0 comments

Bug Report

Versions

"@types/react": "18.0.17", "@types/react-dom": "18.0.6", "typescript": "4.6.2"

⏯ Playground Link

Playground link with relevant code

💻 Code


type AsProp<C extends React.ElementType> = {
  /**
   * An override of the default HTML tag.
   * Can also be another React component.
   */
  as?: C;
};

type OverridableProps<E = {}, O = {}> = O & Omit<E, keyof O>;

type InheritableElementProps<
  C extends React.ElementType,
  P = {}
  // replace to React.ComponentPropsWithRef will same error
> = OverridableProps<React.ComponentPropsWithoutRef<C>, P>;

type PolymorphicComponentProps<
  C extends React.ElementType,
  P = {}
> = InheritableElementProps<C, P & AsProp<C>>;

import React from "react";

type MeasurerProps = {};

const Measurer = <T extends React.ElementType = "div">({
  children,
  as,
  ...tagAttr
}: Omit<PolymorphicComponentProps<T, MeasurerProps>, "ref">) => {
  const Tag = as || "div";
  const ref = React.useRef<React.ComponentProps<T>["ref"]>();

  // ts error: JSX element type 'Tag' does not have any construct or call signatures.ts(2604)
  return <Tag {...tagAttr} ref={ref}></Tag>;
};

export default Measurer;

🙁 Actual behavior

ref cannot omit from props

🙂 Expected behavior

refs (generic props) should be omited correctly, and the Tag should not report errors

cangSDARM avatar Sep 22 '22 08:09 cangSDARM