jQuery and AngularJS file reference for intellisense

[jonathanhotono]

Hi team,

How do I add file map reference for jQuery or angularJS file reference for typescript/javascript?

Also is it possible to include another JS/TS file link reference so VS can learn the variables/objects within the other files and provide it on the intellisense?

Thanks

Jonathan

[alexdima]

@jonathanhotono Here is an example: https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults

You can of course fetch the jquery.d.ts through an xhr and then set the contents, etc.

fyi @jrieken

[jiron12]

I do understand correctly, that adding code to the language Services on the Monaco object will make 'things' from the referenced file available in all instances of the Editor?

If yes, is it possbile to reference differnent code for different editor instances?

Thanks for any suggestions
Joel

[jrieken]

If yes, is it possbile to reference differnent code for different editor instances?

No the languages are not scoped per editor instance

[jiron12]

Thanks for the confirmation.

And there is also no other possibility to reference external code per editor instance?

[jonathanhotono]

Thanks @alexandrudima & @jrieken
monaco.languages.typescript.javascriptDefaults.addExtraLib
Should do fine. When adding this extra lib, is it also capable to read normal javascript file or only typescript reference file? If so this might answer @jiron12 question.

[jrieken]

When adding this extra lib, is it also capable to read normal javascript file or only typescript reference file?

You pass anything the TypeScript compiler given its current options accepts. So, with allowJs you can also get JS files fed into the compiler, however it doesn't really make sense. The extraLib feature is meant for providing ambient type declarations. Such that you get suggestions for a library that you have, lets say jQuery.d.ts

[alexdima]

@jrieken Should we improve the sample at https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults with a better description and/or showing how to bring in something more realistic like jquery.d.ts instead of the Facts class?

[windischb]

I also have troubles with addExtraLib...

For testing i tried to put following in the Playground Editor:

monaco.languages.typescript.javascriptDefaults.addExtraLib([
"declare module foo {",
" export class bar {",
' public getDate():string;',
' }',
'}',
].join('\n'), 'foo.d.ts');

var jsCode = [
"import {bar} from 'foo'",
"",
"var b = new bar();",
"var t = b.getDate();"
].join('\n');

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

All i'll get is an Error Message wich says that "Cannot find Module foo"...

[jrieken]

@windischb You declaration is incorrect - you must enclose the module name in quotes like declare mode "foo" { ... } to make it usable for import {} from "foo"

[windischb]

I have tried to enclose the module name in quotes, but it doesn't work either...

The only way i didn't get those errors is to set language to "javascript".
Can you give me a simple working example, please?

Many thanks!

[windischb]

I think i found my Problem!
i have always used
"monaco.languages.typescript.javascriptDefaults.addExtraLib" instead of
"monaco.languages.typescript.typescriptDefaults.addExtraLib"...

It works now, thanks!