kripod / kripod/react-polymorphic-types
Incorrect work with Unions Types
- 主要语言
- 没有语言数据
- 星标
- 197
- 派生
- 9
- PR 合并指标
- 30 天内没有已合并 PR
描述
## Description
Polymorphic component has partialized props if "as" component has unioned props.
## Reproduction
```
import * as React from 'react';
import type {
PolymorphicForwardRefExoticComponent,
PolymorphicPropsWithoutRef,
PolymorphicPropsWithRef,
} from 'react-polymorphic-types';
export const HeadingDefaultElement = 'h2';
export type HeadingOwnProps = {
color?: string;
};
export type HeadingProps<
T extends React.ElementType = typeof HeadingDefaultElement
> = PolymorphicPropsWithRef;
export const Heading: PolymorphicForwardRefExoticComponent<
HeadingOwnProps,
typeof HeadingDefaultElement
> = React.forwardRef(function Heading<
T extends React.ElementType = typeof HeadingDefaultElement
>(
{
as,
color,
style,
...restProps
}: PolymorphicPropsWithoutRef,
ref: React.ForwardedRef>
) {
const Element: React.ElementType = as || HeadingDefaultElement;
return ;
});
interface ITestA {
value: 'a';
}
interface ITestB {
value: 'b';
extra: string;
}
type Test = ITestA | ITestB;
const Test: React.FC = (props) => {
return <>;
};
function App() {
return (
<>
);
}
```
## Expected behavior
Polymorphic component has correct props types.
## Actual behavior

>`Type '{ as: FC; value: "b"; extra: string; }' is not assignable to type 'IntrinsicAttributes & Pick, "children" | "value"> & HeadingOwnProps & { ...; }'.
Property 'extra' does not exist on type 'IntrinsicAttributes & Pick, "children" | "value"> & HeadingOwnProps & { ...; }'.ts(2322)`
贡献指南
这个仓库没有索引到贡献指南
调研方向
Start with the definitions of PolymorphicPropsWithoutRef, PolymorphicPropsWithRef, and PolymorphicForwardRefExoticComponent used in the reproduction, then recreate the Heading and union-prop example in a TypeScript check. Done means a polymorphic component accepting as={Test} also accepts the union member's extra prop without breaking the existing prop types.
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react, typescript
- 领域
- frontend
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100