如何在打字稿中为匿名函数编写函数类型定义？

Question

我在我的 react-native(typescript) redux 项目中使用 redux-thunk。我正在使用 thunkWithExtraArgument Helper 来提供我的 apollo 客户端变量的引用，因为我得到了返回函数的三个参数，即

...
return async (dispatch, getState, client) => 
...
// and with typescript
import { NormalizedCacheObject } from 'apollo-cache-inmemory'
import ApolloClient from 'apollo-client'
import { Dispatch } from 'redux'

import { ReduxStore } from '../interfaces/redux.ts';

...
return async (dispatch: Dispatch, getState: () => ReduxStore, client: ApolloClient<NormalizedCacheObject>): Promise<void>) => {
...
}

我必须在任何地方都输入大量代码，所以有什么解决方案吗？

目前，我正在做的是这样的：

import { NormalizedCacheObject } from 'apollo-cache-inmemory'
import ApolloClient from 'apollo-client'
import { Dispatch } from 'redux'
import { ReduxStore } from '../interfaces/redux.ts'

// actually i outsources both GetState and Client types
type GetState = () => ReduxStore
// where ReduxStore is custom defined interface
type Client = ApolloClient<NormalizedCacheObject>

const fetchSomeData = (id: string) => {
  return async (dispatch: Dispatch, getState: GetState, client: Client): Promise<void>) => {
    ...
  }
}

我尝试过并且需要的是

...
export type Thunk = (dispatch: Dispatch, getState: () => ReduxStore, client: ApolloClient<NormalizedCacheObject>): Promise<void>
...

// action creator

const fethcSomeData = (id: string) => {
  return async (dispatch, getState, client): Thunk => {
    ...
  }
}}

Answer 1

您应该能够使用contextual typing 为您推断参数类型，方法是让编译器意识到您需要Thunk 类型的值。由于我没有 react/redux 类型（而且问题实际上是关于我认为的一般问题），我将使用一些编造的东西：

type Spronk = (x: string, y: number, z: boolean) => Promise<string>;

最安全的方式是注解这个类型的变量并返回它：

const fethcSomeData = (id: string) => {
  const ret: Spronk = async (x, y, z) => (z ? x : y.toFixed());
  return ret;
};

或者您可以使用更简洁但不太安全的type assertion（它会让您缩小值）：

const fthecSomeData = (id: string) => {
  return <Spronk>(async (x, y, z) => (z ? x : y.toFixed())); 
};

无论哪种方式都希望对您有用。祝你好运！

---

更新：这就是我所说的不安全的意思。以下是错误：

const errorCaught: Spronk = async (x, y, z) => (z ? x : y); // error!
// (string | number) is not assignable to string

我已注释errorCaught 的类型为Spronk。编译器识别出我返回的是string | number 而不是string，这意味着errorCaught 不是真正的Spronk，而是一个更宽的 类型。将变量注释为比您分配给它的值更窄是错误的。

const errorSuppressed = <Spronk>(async (x, y, z) => (z ? x : y)); // no error

在这里，我断言errorCaught 的类型为Spronk。编译器仍然识别出该值比Spronk 宽，但类型断言特别允许您说一个值的类型比编译器可以验证的窄。有时这种灵活性很有用，但也很危险。在errorSuppressed 的情况下，我们故意对编译器撒谎，这会给我们在运行时带来麻烦：

errorSuppressed("a", 1, false).then(s => console.log(s.charAt(0))); // compiles, but
// at runtime: "TypeError, s.charAt is not a function"

希望这是有道理的。

Link to code

Answer 2

作为@jcalz 的第二个选项类型断言，现在最新的打字稿编译器警告这一点

Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead

所以最好以这种方式使用它

const fetchSomeData = (id: string) => {
  return <Spronk>(async (x, y, z) => (z ? x : y.toFixed())); 
};

to

const fetchSomeData = (id: string) => {
  return (async (x, y, z) => (z ? x : y.toFixed())) as Spronk; 
};