.includes or .indexOf does not narrow the type

[minderov]

TypeScript Version: 3.7.x-dev.201xxxxx

Search Terms: .includes type narrowing, .indexOf type narrowing

Code

interface TextMessage {
    type: 'text',
    text: string
}

interface ImageMessage {
    type: 'image',
    url: string
}

type Message = TextMessage | ImageMessage;

// This is an example to reproduce the error in Playground.
// In practice, assume this message comes from outside our control (e.g. HTTP request)
const message: Message = JSON.parse(prompt('') as string) as Message;

if (message.type === 'text') {
    // No error here
    message.text = message.text.trim();
}

// Same for ['text'].includes(message.type)
if (['text'].indexOf(message.type) > -1) {
    // Error: Property 'text' does not exist on type 'ImageMessage'
    message.text = message.text.trim();
}

Expected behavior:
I expect message to narrow its type to TextMessage inside if (['text'].indexOf(message.type) > -1).

Same way it does inside if (message.type === 'text')

Actual behavior:
message is typed as TextMessage | ImageMessage inside the if block

if (['text'].indexOf(message.type) > -1) {
    // Error: Property 'text' does not exist on type 'ImageMessage'
    message.text = message.text.trim();
}

Playground Link: Provided

Related Issues: #9842

My argument is that if (message.type === 'text') should be considered equivalent to if (['text'].includes(message.type)).

It might seem irrelevant on a small example like this, but if the array (['text']) is large, the workaround is difficult to maintain.

[RyanCavanaugh]

This pattern doesn't occur often enough in ways that would produce useful narrowings to justify implementing whatever we'd have to do to detect it

[iansan5653]

If #36352 were revisited, the includes function could be a lot more useful if the return type were an assertion, like:

interface Array<T> {
-    includes(searchElement: T, fromIndex?: number): boolean;
+    includes(searchElement: any, fromIndex?: number): searchElement is T;
}

Then, this would be fine:

if(["text"].includes(message.type)) {
  message.type; // "text"
}

IMO this is a much better way to type it than the current restriction, considering that the way it's currently typed makes includes pretty much useless with arrays of enumerated types.

indexOf is a bit trickier and I wouldn't necessarily support changing that definition.

[JGJP]

@RyanCavanaugh What is the reason for practically making .includes() useless in conditionals? Is it really "we don't think enough people do this"? What is this assumption based on?

[RyanCavanaugh]

@JGJP We didn't make it behave this way; this is the behavior absent the implementation of a feature that would cause it behave the way the OP is proposing. None of the existing narrowing mechanics apply here; we're talking about probably a thousand lines of new code to correctly detect and narrow arrays based on these methods, along with a performance penalty paid by every program because the control flow graph would have to be more granular to set up the possible narrowings caused by any method call, along with a bug trail and confusion trail caused by people expecting non-method versions of these functions to also behave the same way.

The proposed includes definition above is not correct because that's now how type guards work. You can trivially induce an unsoundness to occur using that definition:

interface Array<T> {
    includes2(searchElement: any, fromIndex?: number): searchElement is T;
}

declare let s: string | number;
if (["foo"].includes2(s)) {

} else {
    // 's' might be "bar" or any other string that's not "foo"
    s.toFixed();
}

[JGJP]

@RyanCavanaugh Thanks for your detailed reply.

I can appreciate that it could be super difficult to implement what is suggested in this issue, but how about just not implicitly typing the array? Why are other variables implicitly typed as any but these arrays here aren't any[]? I would personally prefer that behavior, because it would allow us to use .includes() for its intended purpose (IMO) and we could configure the type error with noImplicitAny. Typescript is supposed to be building on Javascript, but in this case it's restrictive, and I don't see how the default behavior is useful (if not assigned to a variable).

[RyanCavanaugh]

I'm not sure what you're proposing.

The current typing detects many kinds of errors, like

function fn(s: string) {
  const bannedUsers = ["bob", "alice"];
  if (bannedUsers.includes(s.toLowerCase)) {
    // you are banned

[JGJP]

@RyanCavanaugh
Sorry for the late reply. What we want to be able to do is something like this:

function fn(s: string | null) {
	const bannedUsers = ["bob", "alice"]
	if (bannedUsers.includes(s)) {
		// you are banned
	}
}

Here, bannedUsers is being implicitly cast as string[], which IMO is useful in some cases, but here the includes() call gives:

Argument of type 'string | null' is not assignable to parameter of type 'string'.
  Type 'null' is not assignable to type 'string'.

It also won't let us do things like bannedUsers.push(somethingThatsNotAString)

What solves these issues is changing the bannedUsers definition to:

const bannedUsers = ["bob", "alice"] as any[]

I would personally prefer it if any[] was the default type of an array, instead of Typescript trying to type it without being able to look into the future to check usage. I can understand, however, that other users won't want this as the default behavior, so how about being able to set an option in tsconfig.json?

[RyanCavanaugh]

@JGJP see #26255; the problem here is that includes should really be bivariant instead of covariant. There's no way we would add an option for making all arrays any[]; just use JavaScript if you don't like type errors 😉

[JGJP]

@RyanCavanaugh I'm wondering why you're linking that issue, because it just shows the community making reasonable arguments and trying to come up with a solution, whereas your general stance seems to just be just use Javascript. Is this really the best we can do?

[RyanCavanaugh]

@JGJP Why doesn't TypeScript already have every feature it will eventually need? The answer is that we haven't designed or completed those features yet, which is why we have an issue tracker and are employing a large team of developers to work on it. Having humans work on the product at a finite speed is in fact the best we can do, for now.

[RyanCavanaugh]

Here's a declaration you can put in your project if you want the proposed "anything goes" behavior

interface Array<T> {
  includes(element: unknown, startIndex?: number): boolean;
}

[iansan5653]

The proposed includes definition above is not correct because that's now how type guards work. You can trivially induce an unsoundness to occur using that definition.

@RyanCavanaugh Thanks for the example. So just to clarify, the issue here is that there is no way to express something like "if true, element is T, else element may or may not be T"?

[RyanCavanaugh]

@iansan5653 correct; see #15048

[ilibar-zpt]

@RyanCavanaugh what do you think about this example?

const superset = ['a','b','c'] as const
const subset = ['a','b'] as const
type Test<T extends typeof superset[number] = typeof superset[number]> = {
    'a': {a:1,t:T},
    'b': {b:2,t:T},
    'c': {c:3,t:T},
}[T]
const test = {} as unknown as Test
if (subset.includes(test.t)) // error 

Array.prototype.includes is intended for testing whether an element of a superset is part of a subset, current lib clearly misses that and requires that subset === superset

re microsoft/TypeScript-DOM-lib-generator#973

PS: Posted here because linked issue doesn't seem to have any discussion going and related question already was under discussion here

[HolgerJeromin]

More simple example:

Argument of type '"string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function"' is not assignable to parameter of type '"number" | "bigint"'.
Type '"string"' is not assignable to type '"number" | "bigint"'.

const value = 'hello';
const allowedTypes = ['number', 'bigint'] as const;
const numberIsh = allowedTypes.includes(typeof value);

[jaredrethman]

Echo'ing @HolgerJeromin findings. Wound up here trying to find information on the below scenario.

const varStr: string | number | object = 7;

if (["string", "number"].includes(typeof varStr)) {
  const foo = varStr; // foo is still inferred as "const foo: string | number | object"
}

[johnsoncodehk]

Here's a declaration you can put in your project if you want the proposed "anything goes" behavior

interface Array<T> {
  includes(element: unknown, startIndex?: number): boolean;
}

#52451 is an alternative, appreciate if you can help fix tests, otherwise I'll check it out when I have time.

[typescript-bot]

This issue has been marked as "Too Complex" and has seen no recent activity. It has been automatically closed for house-keeping purposes.

[PieterjanDeClippel]

Shouldn't tsc be able to simply transform an expression like

// This doesn't work
const quality: 'low' | 'medium' | 'high' | number = 5;
if (['low', 'medium', 'high'].includes(quality)) {
   // quality = 'low' | 'medium' | 'high' | number
} else {
    // quality = 'low' | 'medium' | 'high' | number
}

to

// This works
if ((quality === 'low') || (quality === 'medium') || (quality === 'high')) {
    // quality = 'low' | 'medium' | 'high'
} else {
    // quality = number
}

Internally?

[RyanCavanaugh]

That's not going to be a very common way to do things -- once you need it more that once, you'll move to the array to a local, and once it's not a literal, it's not sound to negatively narrow. You can legally write

const arr: ('low' | 'medium' | 'high')[] = [];
if (arr.includes(quality)) {
  // not hit, of course
} else {
  // 'quality' can be anything; cannot safely conclude it is number here
}