Provide type hints to monaco editor

Question

I am trying to provide intellisense / code completion into a javascript editor using the Monaco editor. The code needs to be valid javascript, not typescript.

Given some

Answer 1

As of Monaco version 0.90, since https://github.com/Microsoft/monaco-editor/issues/203 has been fixed, you can add achieve this partially if you use JSDoc in the editing code.

For this code in the left side of the Monaco playgound:

    // validation settings
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
    noSemanticValidation: true,
    noSyntaxValidation: false
});

// compiler options
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES6,
    allowNonTsExtensions: true,
    allowJs: true
});

// extra libraries
monaco.languages.typescript.javascriptDefaults.addExtraLib([
    'declare class SomeEventType {',
    '    /**',
    '     * Heres the doco for someProperty',
    '     */',
    '    someProperty: string',
    '}',
].join('\n'), 'filename/facts.d.ts');

var jsCode = [
    '"use strict";',
    '',
    "/**",
    " * @param {SomeEventType} event",
    " */",
    "function onMyEvent(event) {",
    "",
    "}"
].join('\n');

monaco.editor.create(document.getElementById("container"), {
    value: jsCode,
    language: "javascript"
});

Means that the editor can now interpret the event parameter as a SomeEventType:

Answer 2

This is how we do it for magikcraft.io: drop this code straight into the left pane in the playground, then hit Run:

monaco.editor.create(document.getElementById("container"), {
    value: "function hello() {\n\talert('Hello world!');\n}",
    language: "typescript"
});

const fact = `declare namespace custom { export function onMyEvent(event: customClass): void; 

export class customClass { 
    customProperty: string;
}`;
const factFilename = 'myCustomNamespace';
this.monaco.languages.typescript.typescriptDefaults.addExtraLib(fact, factFilename);

Now, in the right pane, then type: custom. and you'll get autocomplete for the custom facts.

Answer 3

Put this in the editor in the Monaco Playground:

monaco.editor.create(document.getElementById("container"), {
    value: "function hello() {\n\talert('Hello world!');\n}",
    language: "typescript"
});

const fact = `declare function onMyEvent(event: string): void; 
`;
const factFilename = 'myCustomNamespace1';
this.monaco.languages.typescript.typescriptDefaults.addExtraLib(fact, factFilename);

Now when you type onMyEvent in the right-hand pane, you'll get