Typescript: window.PointerEvent is undefined

[appsforartists]

TypeScript Version: 2.4.1

Code

if (window.PointerEvent) {

Expected behavior:
This should work. It is a valid feature detection test.

Actual behavior:

error TS2339: Property 'PointerEvent' does not exist on type 'Window'.

Notes
It appears that PointerEvent is defined on dom.generated.d.ts with declare var PointerEvent. Should Window be augmented with that type, or is there a more idiomatic way to check for the presence of a global definition in TypeScript?

[appsforartists]

typeof PointerEvent appears to be a working test. Still, testing if window has a property is a common way to do feature detection. TypeScript should be more forgiving here.

[mhegazy]

Global declarations are not all mirrored on Window. we recommend you add it in your project, e.g.:

interface Window {
    PointerEvent : typeof PointerEvent ;
}

[appsforartists]

@mhegazy I had tried that before opening this issue, and it didn't work for me either.

Still, checking for a property on window is a very common way to do feature detection. It should be handled correctly by TypeScript. For instance, Google, Microsoft, and the W3C all recommend if (window.PointerEvent):

• https://developers.google.com/web/fundamentals/design-and-ui/input/touch/, https://developers.google.com/web/updates/2016/10/pointer-events
• https://msdn.microsoft.com/en-us/library/dn304886(v=vs.85).aspx
• https://www.w3.org/TR/pointerevents/

[mhegazy]

looking at other issues seems we have been inconsistent here. some we did add and some we did not.. here are some:
https://github.com/Microsoft/TypeScript/issues/8866
https://github.com/Microsoft/TypeScript/issues/14402
https://github.com/Microsoft/TypeScript/issues/9325
https://github.com/Microsoft/TypeScript/issues/3753
https://github.com/Microsoft/TypeScript/issues/11305

it is possible we keep adding one off, or we need to have a more general solution. https://github.com/Microsoft/TypeScript/issues/14052 seems like a prerequisite to correctly model global polluter in JS

[aluanhaddad]

@appsforartists

I had tried that before opening this issue, and it didn't work for me either.

That absolutely should work. I've done it numerous times and it has always worked. are you sure the file containing the declaration is part of your compilation context?

[appsforartists]

Doesn't work in the playground either:

http://www.typescriptlang.org/play/#src=interface%20Window%20%7B%0A%20%20PointerEvent%3A%20typeof%20PointerEvent%3B%0A%7D%0A%0Aexport%20function%20_()%20%7B%0A%20%20if%20(window.PointerEvent)%20%7B%0A%0A%20%20%7D%0A%7D

[DanielRosenwasser]

It's not working there because you're trying to augment Window in a module (something with imports/exports). Try adding it to a global-types.d.ts

(p.s. yes it's subtle, I'm sorry about that 😕)

[appsforartists]

I think I'm just going to use typeof PointerEvent to avoid having to mess with globals.

If I was trying to use window.PointerEvent, would global-types.d.ts be a file I create locally, or one that's on the system somewhere?

This code is going into a library, so global side effects are probably not great, but neither are type errors.

[aluanhaddad]

If you are writing a module then you need to use

declare global  {
  interface Window {
    PointerEvent: typeof PointerEvent;
  }
}

which augments the type of the global window.

If you are writing a module and you do not write the declare global wrapper then you are declaring a locally scoped Window type that shadows the global Window interface in the type space, rather than merging with it.

[appsforartists]

Closing as a duplicate of #14052.

[DanielRosenwasser]

I'd recommend declaring it exactly as if the generator script emits it so that you don't get duplicate declaration errors down the line.