时间戳

首页 > 解决方案 > TypeScript：如何键入返回函数的返回类型

typescript - TypeScript：如何键入返回函数的返回类型

问题描述

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

我正在使用 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在最后一个示例中注释常量。

标签： typescriptreduxtypes

解决方案

这只是深入研究函数返回类型以获取返回类型成员的类型的问题。

我们可以使用 TypeScript 的索引类型来完成此操作，如下所示

type MemberType = MyType[memberKey];

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

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

// 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();

推荐阅读