typeof foo === "array" causes type narrowing

[sciolizer]

TypeScript Version: 2.1.5 / nightly (2.2.0-dev.20170130)

Code

function mixedMessages(): string | Array<string> {
    return ["Our relationship is strong", "so we should see other people."];
}

const ourRelationship = mixedMessages();

if (typeof ourRelationship === "array") {
    throw new Error("There can be only one.");
}

console.log(ourRelationship.substring(0, 10));

Expected behavior:

Compilation should fail with a type error, because in the final line, ourRelationship has type string | Array<string>, and arrays do not have a substring method.

Actual behavior:

The if-throw is misinterpreted as a type narrowing from string | Array<string> to string. Compilation succeeds, and the generated javascript produces the runtime type error ourRelationship.substring is not a function.

I'm no pro at javascript, so maybe this is an allowance for some obscure browser/environment which handles typeof differently, but in all the environments I looked at, typeof [] === "object".

[mhegazy]

at runtime an array has typeof "object" so this exception would never throw (unless you are running on a non-standard engine).

use Array.isArray(ourRelationship) instead.

[blakeembrey]

@mhegazy I think that's the point. The check is narrowing, but it shouldn't be. I can confirm it's narrowing on all === comparisons, including typeof x === '' (at least in the playground: http://www.typescriptlang.org/play/#src=function%20mixedMessages()%3A%20string%20%7C%20Array%3Cstring%3E%20%7B%0D%0A%20%20%20%20return%20%5B%22Our%20relationship%20is%20strong%22%2C%20%22so%20we%20should%20see%20other%20people.%22%5D%3B%0D%0A%7D%0D%0A%0D%0Aconst%20ourRelationship%20%3D%20mixedMessages()%3B%0D%0A%0D%0Aif%20(typeof%20ourRelationship%20%3D%3D%3D%20%22%22)%20%7B%0D%0A%20%20%20%20throw%20new%20Error(%22There%20can%20be%20only%20one.%22)%3B%0D%0A%7D%0D%0A%0D%0Aconsole.log(ourRelationship.substring(0%2C%2010))%3B).

[mhegazy]

:D. that was dump.. you are right, since the typeof is not one we know about, we excluding the primitives, but fail to exclude "object" as well.

[sandersn]

From the spec, section 4.24: "A type guard of the form typeof x === s, where s is not 'string' | 'number' | 'boolean': when true, removes subtypes of string, number or boolean; when false, does nothing."

So typeof x === "array" should remove string in the true branch and leave the type alone in the false branch. The bug is that it's removing string[] in the false branch.

[sandersn]

@mhegazy had an even cleverer idea: make typeof x return a string literal type 'string' | 'number' | 'boolean' | 'symbol' | 'undefined' | 'object' | 'function'. This will quickly tell you when you've done the comparison wrong.

We previously discussed this at #9506 and decided not to do it, but I think it's worth revisiting, especially if we provide completions for binary comparisons with string literal unions.

@Andy-MS points out that there is a ts-lint rule that checks this, so if we decide to take the PR, they will be able to get rid of that rule.