Use the any return type instead of unknown for untyped reducers

Question

Use the any return type instead of unknown for untyped reducers

Currently in the process of refactoring a large redux state, I am facing an issue with reducers that have not yet been converted to typescript which are returning unknown instead of any. Is there a way to modify the default behavior of ReturnType?

import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import pageReducer from './page';

const rootReducer = history =>
  combineReducers({
    router: connectRouter(history),
    page: pageReducer,
    ....
    ....
  });

export type AppState = ReturnType<ReturnType<typeof rootReducer>>

typings for combineReducers:

export function combineReducers<S>(
  reducers: ReducersMapObject<S, any>
): Reducer<S>
export function combineReducers<S, A extends Action = AnyAction>(
  reducers: ReducersMapObject<S, A>
): Reducer<S, A>

typescript redux

Answer 1

Answer №1

The solution provided in your question may not fully address the issue since the code shared is not a minimum reproducible example. Nevertheless, following @JuanMendes's comment, you can define the UnknownToAny type as shown below:

type UnknownToAny<T> = unknown extends T ? any : T;

Using this, you can create a custom ReturnType that resolves to any instead of unknown:

type MyReturnType<T extends (...args: any) => any> = UnknownToAny<ReturnType<T>>;

Here's a test to demonstrate its functionality:

function returnsNumber() { return 1; }
type N = MyReturnType<typeof returnsNumber>; // number

function returnsUnknown() { return 2 as unknown; }
type U = MyReturnType<typeof returnsUnknown>; // any

function returnsAny() { return 3 as any; }
type A = MyReturnType<typeof returnsAny>; // any

Based on the testing, the solution appears effective. Good luck with your implementation!

Link to TypeScript Playground

Answer 2

The solution provided in your question may not fully address the issue since the code shared is not a minimum reproducible example. Nevertheless, following @JuanMendes's comment, you can define the UnknownToAny type as shown below:

type UnknownToAny<T> = unknown extends T ? any : T;

Using this, you can create a custom ReturnType that resolves to any instead of unknown:

type MyReturnType<T extends (...args: any) => any> = UnknownToAny<ReturnType<T>>;

Here's a test to demonstrate its functionality:

function returnsNumber() { return 1; }
type N = MyReturnType<typeof returnsNumber>; // number

function returnsUnknown() { return 2 as unknown; }
type U = MyReturnType<typeof returnsUnknown>; // any

function returnsAny() { return 3 as any; }
type A = MyReturnType<typeof returnsAny>; // any

Based on the testing, the solution appears effective. Good luck with your implementation!

Link to TypeScript Playground

Use the any return type instead of unknown for untyped reducers

Answer №1

Similar questions

Information about the HTML detail element in Angular 2 is provided

Obtaining the Enum key in Angular using the Enum type instead of a string value

Global Inertia Headers

Is it possible to modify the parameters of a function by utilizing a MethodDecorator without affecting the "this" value?

Is it possible to configure TypeScript (or a tool similar to ESLint) to throw an error when a library returns undefined?

Having trouble with Angular 17 router.navigate not functioning properly?

Error Message: Module not found while using Node Express with TypeScriptIssue: A

The element type 'x' in JSX does not offer any construct or call signatures

Guide to developing a dynamic method while utilizing IntelliSense assistance

Tips for obtaining the passed Tag name when executing the Cypress Framework

Acquiring information from a Service and saving it in a Child component - Angular version 11

Implementing Server-Side API Response Caching in React-Query and Next JS

Typescript - Loading Data into a Dropdown Menu

Turn off page animation for a specific page in Ionic 4

Transferring the date from an HTML input to a TypeScript file in Angular when the button

Transforming a detailed JSON structure into a more simplified format with Angular 2

How to Utilize Class Members in a Callback Function in Angular 12 with Capacitor Version 3

Error Alert: missing property data in angular 5 type

Guide to defining font style in vanilla-extract/CSS

Importing modules that export other modules in Typescript