TypeScript
TypeScript copied to clipboard
Cannot Omit specific fields of react polymorphic components
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