如何正确实现包含泛型方法的非泛型TypeScript接口，最大程度保留类型安全

错误原因分析 #

• 第一种写法错误：泛型参数T仅在接口的fetch方法定义中存在，你在实现箭头函数时没有在当前函数作用域声明泛型参数，因此TS找不到T的定义。
• 第二种写法错误：如果你的文件后缀是.tsx，<T>会被TS默认解析为JSX/React组件标签，因此会报找不到React的错误，这是TSX语法的特殊限制。
• 第三种写法错误：泛型参数的位置语法错误，你把<T>写在属性名和冒号之间，相当于把fetch的类型定义成了泛型函数类型返回另一个返回T的函数，和接口定义的签名不匹配，因此报类型不兼容错误。

正确实现方案 #

方案1：适配TSX文件的箭头函数写法 #

给泛型参数加一个后置逗号，告诉编译器这是泛型声明而非JSX标签，该语法无额外语义影响，仅用于兼容TSX场景：

const mockFetch: IFetcher = {
  fetch: <T,>(): T => {
    // 此处可写自定义mock逻辑
    return {} as T;
  }
}

方案2：使用普通函数写法（无TSX兼容问题） #

用普通函数实现方法，泛型参数直接写在函数名后，不会触发JSX解析逻辑，所有TS环境都适用：

const mockFetch: IFetcher = {
  fetch<T>(): T {
    // 此处可写自定义mock逻辑
    return {} as T;
  }
}

类型安全性说明 #

以上两种写法都完全符合IFetcher的接口定义，泛型参数T会跟随调用处的类型自动推导，不需要额外声明自定义类型，也没有使用any，可以完整保留TS的类型校验能力。

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