I have the situation "A imports B and B imports A".
I've put the code of both files in one file and moved one of the file's relevant content into a variable declaration (not definition) almost at the beginning of the file.
I've practically solved the issue within JS view but the variable that contains the Redux store is not statically typed and so I get warnings from other files about this variable.
The variable is almost at the top of the file and it is not statically typed. I tried to make it statically typed by putting its definition inside a new function and tried to use let store: ReturnType<typeof buildMyStore>
where buildMyStore
is that function.
The buildMyStore
variable declaration (a const arrow function) has the tooltip
buildMyStore
implicitly has return typeany
because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions. ts(7023)
The store
variable declaration has the tooltip:
store
is referenced directly or indirectly in its own type annotation. ts(2502)
If there is no answer to the question, please let me know which is the closest functional code change I can do.
Code
const buildMyStore = (api) => {
return configureStore({
reducer: rootReducer,
middleware: getDefaultMiddleware =>
getDefaultMiddleware({
immutableCheck: false,
serializableCheck: false,
thunk: true
})
.concat([idleMiddleware as Middleware])
.concat([api.middleware as Middleware]),
devTools: process.env.NODE_ENV !== "production",
enhancers: [(reduxBatch as unknown) as StoreEnhancer],
preloadedState:
typeof window !== "undefined"
? (window as any).__PRELOADED_STATE__
: undefined
})
};
let store: ReturnType<typeof buildMyStore>;
const axiosBaseQuery = (...): someComplexTypeHere => async ({ url, method, data }) => {
// some code that uses store.getState().auth
};
const api = createApi(/* ...some code that uses axiosBaseQuery directly (not inside a callback)... */);
store = buildMyStore(api);
// exports here
Update 1
The exports include:
export const store;
export const { /* ... */ } = api;
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
Update 2
I think I temporarily and partially solved this by putting:
let store: any;
but this changes the TypeScript errors into some other errors: where a specific type was inferred for the parameters of a callback now I get an error saying that the inferred type is any
. I wish to avoid this.
Update 3
The signature of axiosBaseQuery
:
const axiosBaseQuery = (
{ baseUrl }: { baseUrl: string } = { baseUrl: "" },
): BaseQueryFn<
{
url: string;
method?: AxiosRequestConfig["method"];
data?: AxiosRequestConfig["data"];
withAuth?: boolean;
},
unknown,
unknown
> => async ({ url, method, data, withAuth }) => {
// ...
};