javascript - Adding Typescript Type Declarations to Monaco Editor - Stack Overflow

admin管理员组

文章数量:1200426

I have a Monaco editor which the user inputs custom javascript code. Within this Monaco Editor they can use Lodash functionality. I want to be able to give them the intellisense / code completion for lodash, by including the type definitions.

I've seen a few answers relating to adding custom declarations, but none that are including a whole 3rd party libraries declarations. Has anybody had experience with this.

This is what I have so far. Then below I create the editor, similar to the example in the documentation.

monaco.languages.typescript.typescriptDefaults.addExtraLib("", "./../../types/lodash/index.d.ts");

I have a Monaco editor which the user inputs custom javascript code. Within this Monaco Editor they can use Lodash functionality. I want to be able to give them the intellisense / code completion for lodash, by including the type definitions.

I've seen a few answers relating to adding custom declarations, but none that are including a whole 3rd party libraries declarations. Has anybody had experience with this.

This is what I have so far. Then below I create the editor, similar to the example in the documentation.

monaco.languages.typescript.typescriptDefaults.addExtraLib("", "./../../types/lodash/index.d.ts");

• javascript
• typescript
• lodash
• monaco-editor

Share Improve this question Follow edited Sep 12, 2018 at 8:56 George Kemp asked Sep 12, 2018 at 8:27 George KempGeorge Kemp 63122 gold badges88 silver badges2222 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 8

(Copied from my GH Gist: https://gist.github.com/cdrini/9de507f6ac19da30fd27c5f618783b31 )

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?

I'd like to add the package monaco-editor-auto-typings as an option. Disclaimer: I'm the developer of that package.

It continuously scans code entered in the monaco editor, detects imports and automatically loads the declaration files from UnPkg.

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import { AutoTypings, LocalStorageCache } from 'monaco-editor-auto-typings';

const val = `
import React from 'react';
React.useEffect(0); // Type Error!
`;

// Create monaco editor instance
const editor = monaco.editor.create(document.getElementById('root')!, {
  model: monaco.editor.createModel(val, 'typescript'),
});

// Initialize auto typing on monaco editor. Imports will now automatically be typed!
const autoTypings = AutoTypings.create(editor, {
  sourceCache: new LocalStorageCache(), // Cache loaded sources in localStorage. May be omitted
  // Other options...
});

You can explore how it works in the demo.

See this as an example and the apis. you should pass the content of the .d.ts file as the first argument

monaco.languages.typescript.typescriptDefaults.addExtraLib(content, "")

check this demo of how pass arguments

本文标签： javascriptAdding Typescript Type Declarations to Monaco EditorStack Overflow