从接口扩展以添加新属性会导致“Type X is not generic”答案

【问题标题】：Extending from an interface to add a new property results in "Type X is not generic"从接口扩展以添加新属性会导致“Type X is not generic”
【发布时间】：2020-06-29 00:57:43
【问题描述】：

export interface IOptionsPropsExtra extends IOptionsProps<IOptionListBelowProps> { delete: any}

export const SelectedChoiceItem: (optionProps: IOptionsPropsExtra<IOptionListBelowProps>) => React.ReactElement<any> =
    (optionProps: IOptionsPropsExtra<IOptionListBelowProps>) => {
        return (
            <Label className={styles.item}>
                {optionProps.item.name}
                <IconButton iconProps={{ iconName: 'Trash' }} onClick={optionProps.delete} />
            </Label>
        );
    };

我编写了接口 IOptionsPropsExtra 以便能够传递一个称为 delete 并且是一个函数的额外参数，但这样做我得到：

类型“IOptionsPropsExtra”不是通用的。

我对接口以及如何扩展它们有什么误解吗？我认为扩展是基本继承，它允许您继承接口的所有属性，以便您可以在其之上添加任何新属性，这实际上就是我所做的一切。为什么我收到关于它不是通用的错误？它甚至应该是泛型类型吗？显然不应该给出我正在尝试做的事情，而且不是任何通用的东西，这与我在这里尝试做的事情背道而驰？

【问题讨论】：

标签： typescript

【解决方案1】：

明确地说，“泛型”类型是使用另一种类型作为变量的类型。

IOptionsPropsExtra 不是泛型类型，因为它可以在不提供任何其他类型的情况下完全解析。

let IOptionsPropsExtra | null = null // works fine.

IOptionsProps 是一个泛型类型，因为它需要将另一个类型传递给它。当你说IOptionsProps<IOptionListBelowProps>时，你就是在这样做。

因此，您将 IOptionsPropsExtra 类型锁定为 IOptionsProps 类型泛型参数类型为IOptionListBelowProps。

我认为你的意图是两件事之一。

您希望IOptionsPropsExtra 始终扩展IOptionsProps<IOptionListBelowProps>，并且在使用自定义类型时不应将任何其他类型传递给IOptionsProps。如果这是您想要的，那么您已经正确声明了该类型，并且您只需像使用任何其他类型一样使用它，而无需 <ParameterType> 语法。

(optionProps: IOptionsPropsExtra) => {

或者您希望IOptionsPropsExtra 是通用的，就像它扩展的类型一样。在这种情况下，您需要将其声明为泛型，并将泛型参数转发给它扩展的类型：

export interface IOptionsPropsExtra<T> extends IOptionsProps<T> {
    delete: any
}

并像这样使用它：

(optionProps: IOptionsPropsExtra<IOptionListBelowProps>) => {

【讨论】：

【解决方案2】：

关键问题是你希望IOptionsPropsExtra 是什么：

一个非泛型接口，它是特定IOptionsProps 的扩展，它始终将IOptionListBelowProps 作为其泛型变量的值，即IOptionsProps<IOptionListBelowProps> 的扩展
扩展IOptionsProps 并使用与该接口相同的通用变量的通用接口

问题是你为 1 写了定义，却把它当作 2。

对于 1，您将接口定义用作常规接口：

export const SelectedChoiceItem: (optionProps: IOptionsPropsExtra) => React.ReactElement<any> =
    (optionProps: IOptionsPropsExtra) => {
//...

对于 2，我想你想做什么，你保留 const 原样，但将接口定义为通用接口：

export interface IOptionsPropsExtra<T> extends IOptionsProps<T> { delete: any}

【讨论】：