typescript - 如何使用带有参数和 Typescript 的 createSelector？

Question

我用 redux-toolkit至 generate selectors .我想在我自己的自定义中使用它们 reselect带参数的选择器。但是我不知道如何输入我的选择器的返回类型？

const selectOrganizationName = (id: string): ??? =>
  createSelector(
    [(state: RootState) => organizationSelectors.selectById(state, id)],
    organization => organization.name
  );

export default selectOrganizationName;

Missing return type on function.eslint@typescript-eslint/explicit-module-boundary-types

Answer 1

请记住，此警告仅由于需要显式返回类型的 ESLint 设置而出现。 Typescript 能够正确推断类型。
当您拨打 selectOrganizationName函数，你返回一个带有 RootState 的选择器并返回一个组织名称，即 string | undefined .

type Return = (state: RootState) => string | undefined;

const selectOrganizationName = (id: string): Return =>
  createSelector(
    [(state: RootState) => organizationSelectors.selectById(state, id)],
    (organization) => organization?.name
  );

但是，您可能有很多要为其创建返回类型的选择器，因此您可以创建一个包含您的 RootState 的帮助器类型。自动，只需要您设置选择的类型。

type Selector<S> = (state: RootState) => S;

const selectOrganizationName = (id: string): Selector<string | undefined> =>
  createSelector(
    [(state: RootState) => organizationSelectors.selectById(state, id)],
    (organization) => organization?.name
  );

Typescript Playground Link