kripod / kripod/react-polymorphic-types

Incorrect work with Unions Types

未关闭
#1 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
没有语言数据
星标
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

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。