window.ontouchstart should be optional

[Joncom]

TypeScript Version: Version 3.5.1

Code

touchDevice = (('ontouchstart' in window) || (window.navigator.msMaxTouchPoints > 0));

Expected behavior:

No error

Actual behavior:

Produces the error: Property 'navigator' does not exist on type 'never'.

Playground Link: http://www.typescriptlang.org/play/#code/G4QwTgBALg9grgYwBYBECmwCWC0QLwQAUhA5DAHayJIDOU4UJEm5EA7iwCYxsCUEAHwFEO5bmwB05EFgDmIWGAkBbGgFkQADwAq8ZAAUYLKDQgA+CAAZevANxA

More

Apparently this issue happens due to something called "type narrowing", the idea being that TypeScript is warning us that the code after the || is unreachable. But that's simply not true. Modern browsers without touch support may have an undefined window.ontouchstart. So it appears that TypeScript is treating ontouchstart as a required property, when in fact it should be optional.

[sandersn]

Seems like it's in everything but IE and Safari:
https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event

And the spec doesn't say anything about optional implementation:
https://w3c.github.io/touch-events/

Browser sniffing usually requires casts. Seems like that might have to be the solution here.

@saschanaz Opinions?

[saschanaz]

Touch event properties are in weird situation where they are used for mobile detection, and thus desktop Firefox and Chrome does not define them. So yes, this might be a good idea.

[saschanaz]

It seems this is now fixed in some way: The type narrowing somehow stopped working and thus the example just works.

[sandersn]

This was fixed in 3.6 when window: Window & typeof globalThis. We don't narrow intersections the same way apparently.

You can get the old behaviour with a separate variable of type Window alone:

declare var wino: Window
(('ontouchstart' in wino) || (wino.navigator))

But this doesn't correspond to real usage of window so I think it's Working As Intended.