window.MonacoEnvironment isn’t defined in types.

[remcohaszing]

monaco-editor version: 0.26.1
Browser: N/A
OS: N/A
Playground code that reproduces the issue: N/A

The following TypeScript code:

window.MonacoEnvironment = {};

Yields:

Property 'MonacoEnvironment' does not exist on type 'Window & typeof globalThis'.

window.MonacoEnvironment isn’t defined by the type definitions, only the global MonacoEnvironment is.

[hediet]

Thanks for the issue & the PR!
Why is the fix for #1795 not working?

[remcohaszing]

The type of window isn’t the same as global.

The PR sets the type of the global MonacoEnvironment, so the following works:

const foo = MonacoEnvironment;

However, a typical use case is to set the global MonacoEnvironment by assigning it to window. This currently requires to manually define the type, because it’s missing from Window.

declare global {
  interface Window {
    MonacoEnvironment: Environment;
  }
}

window.MonacoEnvironment = {
  getWorker(workerId, label) {
    switch (label) {
      case 'css':
        return new CssWorker();
      case 'editorWorkerService':
        return new MonacoWorker();
      case 'json':
        return new JsonWorker();
      case 'yaml':
        return new YamlWorker();
      default:
        throw new Error(`Unknown label ${label}`);
    }
  },
};

https://github.com/appsemble/appsemble/blob/d4998c7b7bb042ed8c1d035e76df94ffdfa02c0b/packages/studio/src/components/MonacoEditor/custom.ts#L23-L44

[hediet]

Sounds reasonable. But I would like to hear @alexdima's opinion on this before merging the PR.
He is on vacation though.

[remcohaszing]

Another approach I’d personally like even better, is to get rid of the global MonacoEnvironment altogether and configure this using a function.

import { setMonacoEnvironment } from 'monaco-editor/esm/vs/editor/editor.api';
// Both imports should work
// import { setMonacoEnvironment } from 'monaco-editor';

setMonacoEnvironment({
  getWorker(workerId, label) {
    switch (label) {
      case 'css':
        return new CssWorker();
      case 'editorWorkerService':
        return new MonacoWorker();
      case 'json':
        return new JsonWorker();
      case 'yaml':
        return new YamlWorker();
      default:
        throw new Error(`Unknown label ${label}`);
    }
  },
});

[remcohaszing]

I like #2605 even better than my solution in the last comment.

[remcohaszing]

The types that have been added in microsoft/vscode#128949 are incorrect. Due to how the types are processed, the global Window interface isn’t augmented.

/cc @alexdima