TypeScript：如何键入返回函数的返回类型答案

【问题标题】：TypeScript: How to type a returned function's return typeTypeScript：如何键入返回函数的返回类型
【发布时间】：2021-05-28 03:38:54
【问题描述】：

仍在尝试学习这种打字系统，不确定是否可行。

我正在使用 redux 和 redux 工具包，其中提到在创建 redux 存储后，您可以创建存储的调度和状态的类型化版本。

直接来自他们的网站：

import { configureStore } from '@reduxjs/toolkit'
// ...

const store = configureStore({
  reducer: {
    one: oneSlice.reducer,
    two: twoSlice.reducer
  }
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

我的问题是我需要推迟商店的配置。

import { configureStore } from '@reduxjs/toolkit'
// ...

const createStore = () => configureStore({
  reducer: {
    one: oneSlice.reducer,
    two: twoSlice.reducer
  }
});

// in some other class ///
const store = createStore();

有没有办法让第一种方法中提到的类型在代码中实际使用？

编辑我希望能够在最后一个示例中注释 store 常量。

【问题讨论】：

我不确定我是否理解。是要在上一个示例中显式注释store 的类型还是要注释createStore 的返回类型？
@AluanHaddad 我想在最后一个例子中注释store的类型
在第二个示例中，将export type MyStore = ReturnType<typeof createStore>; 添加到导出createStore 的模块中。然后您可以导入类型并使用。我认为这是一种不好的做法。类型推断是你的朋友
我确实修改了它，但实际上是export type AppState = ReturnType<ReturnType<typeof createStore>['getState']>;。你的方式给了我返回类型() => state 我需要state
几天前我回答了一个非常相似的问题stackoverflow.com/a/66324900/10431574 在那个问题中，他们希望选项以初始状态传递，因此它与@Aluan 的答案略有不同，但大部分相同。

标签： typescript redux types

【解决方案1】：

这只是深入到函数返回类型以获得返回类型成员的类型的问题。

我们可以使用 TypeScript 的 Indexed Types 来完成此操作，如下所示

type MemberType = MyType[memberKey];

在其中我们使用MyType 类型的键memberKey 获取成员的类型，其中memberKey 是一个有效键，例如字符串或数字文字或常量或唯一符号。

在这种情况下，要获取createStore被调用时返回的对象的成员getState和dispatch的类型，我们可以这样写

// store.ts

export const createStore = () => configureStore({
  reducer: {
    one: oneSlice.reducer,
    two: twoSlice.reducer
  }
});

// The type of the member `dispatch` of the store returned by `createStore`.
export type StoreDispatch = ReturnType<typeof createStore>["dispatch"];

// The type of the member `getState` of the store returned by `createStore`.
export type StoreGetState = ReturnType<typeof createStore>["getState"];

注意我们可以继续向下钻取，例如获取这些成员的返回类型如

// The return type of the member `getState` of the store returned by `createStore`.
export type AppState = ReturnType<ReturnType<typeof createStore>["getState"]>;

由于这样的语法会变得笨拙，我们可以使用中间类型声明将其分解为更易读的形式

type AppStore = ReturnType<typeof createStore>;

type AppStoreGetState = AppStore["getState"];

export type AppState = ReturnType<AppStoreGetState>;

无论如何，我们现在可以像使用其他类型一样使用这些类型。

以下是人为的例子

// test.ts

import { createStore, AppState } from "./store";

const store = createStore();

const state: AppState = store.getState();

【讨论】：