Example of using monaco editor in typescript code

Monaco provides typescript definitions, so it should be able to be used in typescript. Unfortunately, all the examples of using monaco are just in embedded HTML, so it’s tough to get get started, even with a minimal example.

Right now, I’m working off of the following. It doesn’t get any simpler than this, folks:

// src/index.ts
import {
    editor
} from 'monaco-editor';

let div = document.createElement('div');
editor.create(div);

I get the following errors in the browser (chrome):

Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes. Please see https://github.com/Microsoft/monaco-editor#faq

You must define a function MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker

To address the first error, I checked out the faq and yes, I am loading the webpage via http://. No clue about the second, though.

Importing a library should not be this difficult. Has anyone figured out how to do this in Typescript?

[brentshermana]

I looked through the javascript examples, but they aren’t very helpful for typescript. Specifically, the type checking totally falls apart when I try to add the loader.

[alexdima]

There is a sample in the meantime – https://github.com/microsoft/monaco-editor-samples/tree/master/browser-esm-webpack-typescript