Question

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

我正在使用 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 常量。

Answer 1

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

我们可以使用 TypeScript 的 Indexed Types 来完成这个，如下

type MemberType = MyType[memberKey];

在其中我们使用 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();

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

1 个答案: