Adding lodash type hinting to monaco using addExtraLib

index.md

Well that was a headache! This is certainly not an elegant solution, but it works. Hopefully someone can use these notes to save themselves a bunch of time.

Known issues:

• This does not scale easily to any other library
• Requires some internal knowledge of lodash's types library which might break on a lodash update

Add raw-loader and @types/lodash

npm install --save-dev @types/lodash raw-loader

(as of writing, these are at 4.14.162 and 4.0.2, respectively)

Import and register the .d.ts files

Looking at @types/lodash/index.d.ts, copy all the common references and import them. :

import LODASH_index from '!raw-loader!@types/lodash/index.d.ts';
import LODASH_common from '!raw-loader!@types/lodash/common/common.d.ts';
import LODASH_array from '!raw-loader!@types/lodash/common/array.d.ts';
import LODASH_collection from '!raw-loader!@types/lodash/common/collection.d.ts';
import LODASH_date from '!raw-loader!@types/lodash/common/date.d.ts';
import LODASH_function from '!raw-loader!@types/lodash/common/function.d.ts';
import LODASH_lang from '!raw-loader!@types/lodash/common/lang.d.ts';
import LODASH_math from '!raw-loader!@types/lodash/common/math.d.ts';
import LODASH_number from '!raw-loader!@types/lodash/common/number.d.ts';
import LODASH_object from '!raw-loader!@types/lodash/common/object.d.ts';
import LODASH_seq from '!raw-loader!@types/lodash/common/seq.d.ts';
import LODASH_string from '!raw-loader!@types/lodash/common/string.d.ts';
import LODASH_util from '!raw-loader!@types/lodash/common/util.d.ts';

• Note: Vetur will complain in VS Code about importing .d.ts files, but won't error.

Then register them into monaco (wherever monaco is in your project):

window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_index, '@types/lodash/index.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_common, '@types/lodash/common/common.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_array, '@types/lodash/common/array.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_collection, '@types/lodash/common/collection.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_date, '@types/lodash/common/date.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_function, '@types/lodash/common/function.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_lang, '@types/lodash/common/lang.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_math, '@types/lodash/common/math.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_number, '@types/lodash/common/number.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_object, '@types/lodash/common/object.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_seq, '@types/lodash/common/seq.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_string, '@types/lodash/common/string.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_util, '@types/lodash/common/util.d.ts');

Note:

• The file names matter here (somehow); removing the .d.ts extension causes them to break.

References/External Links

• The (largely useless) docs: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.typescript.languageservicedefaults.html#addextralib
• GH Issues:
  • #758: monaco-typescript not picking up configured modules from addExtraLib
  • #754: Cannot require contents of '.d.ts' files as string in browser for addExtraLib method
• StackOverflow Questions:
  • Adding Typescript Type Declarations to Monaco Editor
• Monaco demo using addExtraLib: https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults
• @types/lodash at unpkg, if you want to see the .d.ts files directly: https://unpkg.com/browse/@types/[email protected]/
• GH Search for uses of addExtraLib: https://github.com/search?l=JavaScript&q=addExtraLib&type=Code

Open Questions

• What does the filename actually do? Also, what are the protocol prefixes for?

Here was my solution -- allows to easily add multiple libraries into monaco for intellisense
1: npm i @types/webpack-env
2: Add this code to the monaco configs (I called it onMount in @monaco-editor/react)

// Add support for additional libraries
[
  require.context(
    "!!raw-loader!/node_modules/@types/lodash",
    true,
    /\.d.ts$/,
  ),
  require.context("!!raw-loader!/node_modules/zod", true, /\.d.ts$/),
].forEach((lib: any) => {
  lib.keys().forEach((key: string) => {
    // We add every .d.ts file to Monaco
    const contents = lib(key).default;
    const uri = `file:///${key}`;

    monaco?.languages.typescript.typescriptDefaults.addExtraLib(contents, uri);
    monaco?.languages.typescript.javascriptDefaults.addExtraLib(contents, uri);
  });
});

Thanks guys