Inlining wrappers over `createSelector` causes selector args to be of `any` type
When upgrading from 4.0.0 to 4.1.5, our selectors started to complain about any types when we inline our createSelector wrapper:
TS7006: Parameter 'featureA' implicitly has an 'any' type.TS7006: Parameter 'featureB' implicitly has an 'any' type.
TypeScript version is 4.4.2.
CodeSandbox example
Here's a code sandbox example of the issue (line 66): https://codesandbox.io/s/reselect-typescript-issues-xsgeq?file=/src/App.tsx
Description
Code example:
const selectComposedFlagInline = createSelector(
createPreferenceSelector("featureA"),
createPreferenceSelector("featureB"),
(featureA, featureB) => featureA && featureB === "release"
// ^^^^ ^^^^ Parameters implicitly has an 'any' type.
);Here createPreferenceSelector is our helper to build typed preference selectors. It's included into code sandbox example:
function createPreferenceSelector<P extends PrefName>(prefName: P) {
return (state: AppState) => selectPreferenceValue(state, prefName);
}Extracting preference selector into its own variable solves the issue:
const selectFeatureA = createPreferenceSelector("featureA");
const selectFeatureB = createPreferenceSelector("featureB");
const selectComposedFlag = createSelector(
selectFeatureA,
selectFeatureB,
(featureA, featureB) => featureA && featureB === "release"
);Removing the helper entirely also solves the issue:
const selectComposedFlagNoHelper = createSelector(
(state: AppState) => selectPreferenceValue(state, "featureA"),
(state: AppState) => selectPreferenceValue(state, "featureB"),
(featureA, featureB) => featureA && featureB === "release"
);While it didn't look like a huge issue, it made me very curious about why inlining caused that issue. For me it looks like all three examples should work just fine.
After some testing it looks like this issue was introduced in 4.1.0.
Source: reduxjs/reselect