TypeScript中如何使用泛型扩展泛型接口

你遇到的问题很典型——泛型接口继承时，必须明确指定父接口的泛型参数，不能直接省略。下面给你两种常用的正确写法：

方式1：子接口保留多泛型参数，传递给父接口 #

这种方式适合你希望父接口的泛型类型由子接口的泛型来决定的场景：

interface IProps<T> {
  property: T;
}

// 子接口定义两个泛型，第一个T传递给父接口，第二个U是自己的属性类型
interface IPropChild<T, U> extends IProps<T> {
  propertyChild: U;
}

使用示例：

const example: IPropChild<string, number> = {
  property: "我是父接口的属性",
  propertyChild: 123
};

方式2：固定父接口的泛型类型 #

如果你想让父接口的property属性固定为某个具体类型，子接口只需要自己的泛型参数：

interface IProps<T> {
  property: T;
}

// 直接给父接口指定泛型类型为string，子接口只需要处理自己的U
interface IPropChild<U> extends IProps<string> {
  propertyChild: U;
}

使用示例：

const example: IPropChild<boolean> = {
  property: "固定为字符串",
  propertyChild: true
};

为什么原写法错误？ #

IProps<T>是泛型接口，它的类型依赖于泛型参数T。当你继承它时，TypeScript需要明确知道T的具体类型（或者由子接口的泛型来推导），直接写extends IProps会让TS无法确定父接口的类型结构，所以会报错。

内容的提问来源于stack exchange，提问作者Manush