How to use createSelector with parameter and Typescript?

Question

I use redux-toolkit to generate selectors. I want to use them in my own custom reselect selectors with parameters. But I do not know how to type the return type of my selector?

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

Keep in mind that this warning only appears due to your ESLint settings which require explicit return types. Typescript is able to infer the type properly.

When you call the selectOrganizationName function, you return a selector that takes a RootState and returns an organization name which is string | undefined.

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

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

However you likely have lots of selectors that you want to create return types for, so you can create a helper type that includes your RootState automatically and just requires you to set the type of the selection.

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