TypeScript 中使用 redux-saga 遗留的类型推断问题及解决方法

前言

redux-saga 是一个非常流行的 Redux 中间件，它可以让我们以声明式的方式处理异步操作。TypeScript 是一种强类型的 JavaScript 超集，它可以在编译期间发现代码中的类型错误，从而提高代码的可靠性和可维护性。然而，当我们在 TypeScript 中使用 redux-saga 时，可能会遇到一些类型推断问题。本文将介绍这些问题以及如何解决它们。

问题

问题一：saga 中的 yield call(fn, ...args) 函数无法推断出 fn 的参数类型

在 redux-saga 中，我们可以使用 call(fn, ...args) 函数调用一个函数，并等待它返回结果。例如：

import { call } from 'redux-saga/effects';

function* fetchData() {
  const data = yield call(fetchDataFromServer, 'http://example.com');
  // ...
}

然而，当我们使用 TypeScript 时，我们可能会遇到这样的问题：fetchDataFromServer 函数的参数类型无法被推断出来。这是因为 call 函数的类型定义如下：

export function call<Fn extends (...args: any[]) => any>(
  fn: Fn,
  ...args: Parameters<Fn>
): CallEffect<ReturnType<Fn>>;

在这个类型定义中，fn 的类型是一个泛型类型参数 Fn，它可以是任何函数类型。因此，TypeScript 无法推断出 fn 的参数类型。

问题二：saga 中的 yield put(action) 函数无法推断出 action 的类型

在 redux-saga 中，我们可以使用 put(action) 函数发起一个 Redux action。例如：

import { put } from 'redux-saga/effects';

function* fetchData() {
  yield put(fetchDataSuccess(data));
  // ...
}

然而，当我们使用 TypeScript 时，我们可能会遇到这样的问题：fetchDataSuccess 函数的返回类型无法被推断出来。这是因为 put 函数的类型定义如下：

export function put<A extends AnyAction>(action: A): PutEffect<A>;

在这个类型定义中，action 的类型是一个泛型类型参数 A，它可以是任何 Redux action 类型。因此，TypeScript 无法推断出 A 的具体类型。

解决方法

解决方法一：手动指定函数类型

为了解决问题一，我们可以手动指定函数类型。例如：

import { call } from 'redux-saga/effects';

function* fetchData() {
  const data = yield call(fetchDataFromServer as (url: string) => Promise<Data>, 'http://example.com');
  // ...
}

在这个例子中，我们手动指定 fetchDataFromServer 函数的类型为 (url: string) => Promise<Data>，从而解决了类型推断问题。

同样地，为了解决问题二，我们也可以手动指定 action 类型。例如：

import { put } from 'redux-saga/effects';

function* fetchData() {
  yield put(fetchDataSuccess(data) as AnyAction);
  // ...
}

在这个例子中，我们手动指定 fetchDataSuccess 函数的返回类型为 AnyAction，从而解决了类型推断问题。

解决方法二：使用 redux-saga 的辅助函数

redux-saga 提供了一些辅助函数，可以帮助我们解决类型推断问题。例如，我们可以使用 call 函数的辅助函数 call as CallEffectFn，它的类型定义如下：

export type CallEffectFn<Fn extends (...args: any[]) => any> = {
  <T extends Parameters<Fn>>(fn: Fn, ...args: T): CallEffect<ReturnType<Fn>>;
};

在这个类型定义中，CallEffectFn 是一个泛型类型参数，它可以推断出 fn 的参数类型。因此，我们可以使用它来调用一个函数，例如：

import { call as callEffect } from 'redux-saga/effects';

function* fetchData() {
  const data = yield callEffect(fetchDataFromServer, 'http://example.com');
  // ...
}

同样地，我们也可以使用 put 函数的辅助函数 put as PutEffectFn，它的类型定义如下：

export type PutEffectFn<A extends AnyAction> = {
  (action: A): PutEffect<A>;
};

在这个类型定义中，PutEffectFn 是一个泛型类型参数，它可以推断出 A 的具体类型。因此，我们可以使用它来发起一个 Redux action，例如：

import { put as putEffect } from 'redux-saga/effects';

function* fetchData() {
  yield putEffect(fetchDataSuccess(data));
  // ...
}

总结

在 TypeScript 中使用 redux-saga 时，我们可能会遇到一些类型推断问题。本文介绍了这些问题以及解决方法，包括手动指定函数类型和使用 redux-saga 的辅助函数。希望这篇文章对大家有所帮助。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6575bb93d2f5e1655df0423e