Typescript: AudioContext and webkitAudioContext missing in Window definition in lib.dom.d.ts

[jonsadka]

For most modern browsers, there exists some type of AudioContext on the window, however the current definition for Window has neither of these.

• In some browsers, the audio context exists at window.AudioContext
• In some browsers, the audio context exists at window.webkitAudioContext

I would expect the definition of Window in lib.dom.d.ts too look something similar to this:

interface Window extends EventTarget, WindowTimers, WindowSessionStorage, WindowLocalStorage, WindowConsole, GlobalEventHandlers, IDBEnvironment, WindowBase64, GlobalFetch, WindowOrWorkerGlobalScope, WindowEventHandlers {
    AudioContext?: typeof AudioContext;
    webkitAudioContext?: typeof AudioContext;
    ...

Search Terms:
AudioContext, webkitAudioContext , audio context missing in window

Code

window.AudioContext
window.webkitAudioContext

Expected behavior:
AudioContext and webkitAudioContext are defined on the window object

Actual behavior:
AudioContext and webkitAudioContext are not defined on the window object

Playground Link:
https://www.typescriptlang.org/play/#src=window.AudioContext%0Awindow.webkitAudioContext

[rtmalone]

For anyone else running into this, in the meantime you can extend the window in your declarations.d.ts file like so:

interface Window {
  webkitAudioContext: typeof AudioContext
}

I've had to take this approach a handful of times when vendor prefixed APIs aren't included in lib.dom.d.ts

[IngenuityGaming]

I am also facing this issue, any update on this?

[Eisenspalter]

me too! AudioContext is defined webkitAudioContext is still missing

[jcleefw]

webkitAudioContext is old naming conventions in the Web Audio which is now the AudioContext.

which i think nothing will be done anytime soon.

The way around is to add

declare global {
  interface Window {
    webkitAudioContext: typeof AudioContext
  }
}

remember to make sure your declaration files are added into you tsconfig.json
"files": ["./declarations.d.ts"],

[ssrm]

Any update on this?

[jonsadka]

@sandersn any thoughts on this? Pinging you because I see you as assigned on the issue

[sandersn]

@jcleefw is right. AudioContext is the standard name, and you can add an alias on window using interface merging. If you're not using modules to import/export, you don't even need the declare global wrapper.

[fatcerberus]

Why is this closed? Window['AudioContext'] still doesn't exist, and until it does I still need a ts-ignore here:
https://github.com/fatcerberus/oozaru/blob/master/src/audialis.ts#L37-L38

[sandersn]

@fatcerberus Try just AudioContext. Both the type and the value are global, and since window: Window & typeof globalThis the value appears as a property of window as well. But that's not true of the type.

You might open a new issue for mirroring global types into Window, but I personally don't think it's a good idea.

[fatcerberus]

How do I write/type this function if the globals don't exist on Window?
https://github.com/fatcerberus/oozaru/blob/master/src/prefix.ts#L37-L45

[sandersn]

replace Window with typeof globalThis and window with globalThis.

[fatcerberus]

Hmm, isn’t globalThis recent? I wouldn’t expect that to work when e.g. "target": "es2015". I’ll need to try it

[sandersn]

It's not flagged -- if you use it as a value, you're expected to bring your own shim.

[fatcerberus]

Hmm, I guess that’s convenient, but inconsistent with how other ES-defined globals are treated so I wouldn’t have guessed on my own that that was the case. Thanks.

More to the point though: Why are Window and typeof globalThis not the same type? Is there ever a case in practice where they differ at runtime?

[sandersn]

I'm not sure whether Window has properties that aren't defined globally, but for backward compatibility, it's important to keep code like this working:

interface Window {
  browserSpecific: number
}