How to get JQuery Code Completion in Monaco Editor?

Question

I'm new to Monaco and Typescript in general. I'm trying to get JQuery code completion to work on my editor. I've tried just about every example I've been able to find on how to accomplish this. I think I'm pretty close, but probably missing something fundamental.

From the DefinitelyTyped folks, I've gotten their jquery directory and included it in my web project. In the file that is creating my Monaco editor I have the following.

const path = "/jslib/monaco/types/jquery/index.d.ts";
const typings = readTextFile(path);
monaco.languages.typescript.javascriptDefaults.addExtraLib(typings, path);

readTextFile() is just a little function I'm using to get the contents of index.d.ts (which I can confirm is working). Here is the rest of my monaco setup.

monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
                target: 
monaco.languages.typescript.ScriptTarget.ES2016,
                allowNonTsExtensions: true,
                module: monaco.languages.typescript.ModuleKind.System,
                noEmit: true,
                typeRoots: ["/jslib/monaco/types"],
                noLib: true
          });


window.editor = monaco.editor.create(document.getElementById('monacodiv'), {
                value: $("#formula").val(),
                language: 'javascript',
                theme: "vs-dark",
                autoIndent: true,
                dragAndDrop: true,
                tabCompletion: true,
                fontFamily: "monospace",
                scrollBeyondLastLine: false
            });

If anyone could let me know what I'm doing wrong, that would be awesome!

Answer 1

So I just ran into this problem, after digging into the DefinitelyTyped definitions, I noticed that index.d.ts is just aggregates the content from four different files ( JQueryStatic , JQuery , misc , legacy ). Adding the content of all of these files by repeatedly using addExtraLib should work! Otherwise, not sure how monaco could find the contents.