如何基于泛型基础接口扩展不同的自定义接口？

你的核心问题是扩展泛型基础接口时的语法错误，以及泛型参数的正确传递方式，以下是具体实现方案：

1. 基础接口保持不变 #

interface ITypeBase<T> {
  loading: boolean;
  onSubmit: (filters: T) => void;
}

export default ITypeBase;

2. 场景一：自定义接口字段作为onSubmit的参数类型 #

如果IMyFormType的字段就是onSubmit方法要接收的参数，直接将自身作为泛型参数传递给ITypeBase：

interface IMyFormType extends ITypeBase<IMyFormType> {
  name: string;
  surname: string;
}

此时onSubmit的参数filters会是IMyFormType类型，包含name和surname字段，同时继承了loading状态和onSubmit方法。

3. 场景二：onSubmit参数为独立类型 #

如果onSubmit接收的参数和自定义接口的字段无关，先定义参数类型，再扩展时指定泛型：

// 定义onSubmit的参数类型
interface IFormParams {
  name: string;
  surname: string;
}

// 扩展时传递参数类型给ITypeBase
interface IMyFormType extends ITypeBase<IFormParams> {
  // 自定义接口额外字段
  formTitle: string;
}

这种方式下，IMyFormType继承了loading和onSubmit(filters: IFormParams)，同时拥有自己的formTitle字段。

4. 场景三：自定义接口也做泛型处理 #

如果需要更灵活的复用，让自定义接口本身成为泛型，动态传递参数类型：

interface IMyGenericForm<T> extends ITypeBase<T> {
  formTitle: string;
}

// 使用时指定具体参数类型
type UserForm = IMyGenericForm<{name: string; surname: string}>;

关键注意点 #

• 原代码中extends ITypeBase?是语法错误，必须去掉问号，替换为具体的泛型类型（或泛型参数）
• 扩展泛型接口时，必须明确指定泛型参数T的类型，否则TypeScript会报错

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