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/lodash@4.14.162/
• 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?

Thanks for this. I was having the same problem. I ended up writing a script that kind of automates parts of it. It still has to be adapted for each individual dependency, but it's a start:

const fs = require("fs");
const getFilesRecursively = require("./get-files-in-folder");

// Read the dist folders that contains the .d.ts files
const files = getFilesRecursively(
  "./node_modules/@airgap/beacon-sdk/dist/cjs/"
).filter((file) => file.endsWith(".d.ts"));
files.push(
  ...getFilesRecursively("./node_modules/@taquito/").filter((file) =>
    file.endsWith(".d.ts")
  )
);

const getFile = (filename) => {
  const text = fs.readFileSync(filename, { encoding: "utf8" });

  return text;
};

// Clean up file paths
const outArray = files.map((dir) => ({
  name: dir
    .substring(13)
    .split("/dist/cjs/")
    .join("/")
    .split("/taquito/dist/types/")
    .join("/"),
  dts: getFile(dir),
}));

// Save to a file
fs.writeFileSync(
  "./src/components/monaco-types.ts",
  `export const libs = ${JSON.stringify(outArray)}`
);

This is the project and commit with the code: airgap-it/beacon-docs@729f25e