JS generic inference change after upgrading to 5.1

[noahtallen]

Bug Report

While working on upgrading Typescript to 5.1. from 4.7, I came across an issue with how generics are inferred with JS. Or, potentially not an issue, but a change in how it works that breaks existing code.

Importantly, this issue happens when you have a TS file importing a JS function importing a TS function. Previously, inference worked "good enough" for this scenario to work, but the change breaks it. (Unfortunately, this is a large, older codebase, so we migrate parts to TS as we can! In this case, there's a Typescript utility function, a JS redux selector using the utility, and a Typescript React component using the selector. But the only part that matters is the generic inference and having the JS file.)

🔎 Search Terms

Generics, arguments, JavaScript inference

🕗 Version & Regression Information

• This changed between versions 4.7.4 and 5.1.6

⏯ Playground Link

Since this requires JS code in between to TS files, I can't replicate it in the TS playground. However, you can create the three short files I mentioned below and you'll see the issue! That said, here's the working code in full TS. All that needs to change is for getById to be written in JS, and the error occurs.

💻 Code

Consider this simplified higher order function. Fully implemented, it would be an optimized redux-style selector that only recalculates the selector when the dependents change. Both the selector and dependents have the same signature:

// create-selector.ts
export function createSelector< TState, TProps extends any[], TDerivedState >(
	selector: ( state: TState, ...props: TProps ) => TDerivedState,
	getDependents: ( state: TState, ...props: TProps ) => unknown
): ( state: TState, ...props: TProps ) => TDerivedState {
	return ( state, ...args ) => {
		getDependents( state, ...args );
		return selector( state, ...args );
	};
}

Here's a simple JS file with a new selector using that function:

// get-by-id.js
import { createSelector } from './create-selector';
export const getById = createSelector(
  ( state, id ) => state[ id ],
  ( state ) => state // the other arguments to the selector aren't necessary for dependents here
);

And here's a TS file where the selector is used:

import { getById } from './get-by-id';

// ERROR: Expected 1 argument, but got 2.
getById( { 1: 'test' }, 1 );

🙁 Actual behavior

The error is that getById expects the incorrect number of arguments. It can accept 2 arguments, but the type inference restricts it to 1. The issue is that in the JS file, the two argument functions have different signatures. Typescript infers the TProps type based on the second function -- so getById is inferred as (state: any) => any.

Interestingly, this is only an issue when the selector is written in JS, not TS. When getById is implemented in TS 5.1, it uses the first function to infer the type of getById -- so it becomes (state: State, id: number ) => string.

In other words, generic inference is inconsistent depending on if the function comes from JS or TS, despite most of the type information coming from a TS file in the first place!

I've not been able to find a workaround -- if we change to Partial< TProps > for the signature of getDependents, we encounter issues in other selectors where the args are always defined (since Partial means some of those args can be undefined).

🙂 Expected behavior

Before the update, Typescript seemingly inferred TProps based on both functions -- so getById becomes (state: any, id?: any) => any .

Now, I can understand that this situation is a bit tricky, and inferring based on both functions isn't ideal either. But I'm not sure how to express the types better here. getDependents will be called with all of the arguments, but it's not strictly necessary for the function body to accept all of those arguments when they might not be used. (And either way, this scenario works in TS, which indicates the basic premise is accepted by TS.)

[sandersn]

Broken in 4.8.4.

[sandersn]

Specifically, broken in #49740. I'll go look at why.

[sandersn]

Some observations given the simplified repro here:

// @filename: second.ts
export declare function createSelector<TState, TProps extends any[]>(
    selector: (s: TState, ...props: TProps) => void,
    getDependents: (s: TState, ...props: TProps) => void
): void;
// @filename: first.js
import { createSelector } from './second';
export const getById = createSelector((state) => void 0, (state,id) => void 0,);

1. You can tell when inference has gone wrong when the inferred type arguments are <any, []> not <unknown, [id: any]>
2. If you make the two parameters of createSelector have the same type, order of the arguments doesn't matter (notice they're reversed from the original repro).
3. If you change first.js to first.ts, but explicitly annotate state: any so that only id uses contextual typing, the result is the same as JS:

// @filename: first.ts
import { createSelector } from './second';
export const getById = createSelector((state: any) => void 0, (state: any,id) => void 0,);

4. However, if you manually type /** @type {unknown} */ state in JS, inference still doesn't get TProps=[id: any].

That implies to me that the root of the difference is Javascript's defaulting type parameters without inferences to any instead of unknown -- and that there's still some kind of difference even if you explicitly provide unknown, probably to do with which function arities are allowed to match.

@jakebailey You wrote the original PR. Is this result expected? Unexpected? As far as I can tell it's a pretty straightforward result of deleting some code, but I'm not sure.

[fatcerberus]

defaulting type parameters without inferences to any instead of any

Wait what

[sandersn]

edit: any (JS) instead of unknown (TS)

[jakebailey]

@jakebailey You wrote the original PR. Is this result expected? Unexpected? As far as I can tell it's a pretty straightforward result of deleting some code, but I'm not sure.

This was a really long time ago, but I don't really understand how the two are related.

[sandersn]

It seems like the contextual type of the arrows -- (state, id) => void 0 in this case, were used as inference sources for the rest parameter, resulting in [id: any]. Now that doesn't seem to happen in JS, though I haven't figured out why yet. But it seems related to the PRs title, at least, of not inferring rest types with assignContextlParameterTypes.

[noahtallen]

The workaround I finally found was to add another type parameter:

export declare function createSelector<TState, TProps extends any[], TDepProps extends TProps>(
    selector: (s: TState, ...props: TProps) => void,
    getDependents: (s: TState, ...props: TDepProps) => void
): void;

I think this makes TS infer the type of TProps based on the arguments to selector, ignoring getDependents

[Andarist]

This issue is specific to how untyped JS is handled, but I believe that this is a result of a broader problem that can even be observed in TS files. See my comment here.

When it comes to what happens here is that this (state, id) => state[id] function is an untyped JS function. For such we getMinArgumentCount returns 0 (unless MinArgumentCountFlags.StrongArityForUntypedJS gets passed in but it isn't here when called through inferFromSignature > applyToParameterTypes > getRestTypeAtPosition).

Based on that getRestTypeAtPosition computes [id?: any] and that gets collected as the first contravariant candidate for TProps. Then we infer into it from the second callback but there we get []. Both are collected as viable inference candidates. And based on those two getInferredType > getContravariantInference > getCommonSubtype decides to pick [].