如何为TypeScript中导入的Redux-Saga生成器函数创建类型/接口？

方法1：自动提取模块导出类型（推荐） #

由于你的saga函数用TypeScript编写，TypeScript会自动推断导出模块的完整类型。你可以直接通过typeof staticSagas获取整个模块的类型，再定义类型别名或接口：

// 提取./static模块的导出类型
type StaticSagas = typeof staticSagas;

// 也可以基于该类型定义接口
interface IStaticSagas extends StaticSagas {}

StaticSagas会自动包含所有从./static导出的saga函数类型，每个属性对应一个生成器函数的完整类型。

方法2：手动定义Saga接口 #

如果你需要手动管控类型，可以先定义通用的Redux-Saga生成器函数类型，再组合成包含所有sagas的接口：

首先引入Redux-Saga的基础类型，定义通用Saga类型：

import { Saga } from 'redux-saga';

// 适配无参数、无返回值的Saga生成器函数
type AppSaga = Saga<void[], void>;

接着定义包含所有sagas的接口：

interface IStaticSagas {
  getSettings: AppSaga;
  getSocialLinks: AppSaga;
}

// 导入时指定类型
import * as staticSagas from './static';
const sagas: IStaticSagas = staticSagas;

方法3：批量生成Saga返回类型 #

如果需要获取每个saga函数执行后返回的生成器对象类型，可以结合ReturnType和keyof来批量生成：

import * as staticSagas from './static';

// 生成所有saga函数的返回类型集合
type StaticSagaGenerators = {
  [K in keyof typeof staticSagas]: ReturnType<typeof staticSagas[K]>;
};

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