Question

我有一个Monaco编辑器，用户输入了自定义的javascript代码。在此Monaco Editor中，他们可以使用Lodash功能。我希望能够通过包括类型定义为他们提供lodash的智能/代码补全。

我看到了一些与添加自定义声明有关的答案，但是没有一个答案包含完整的第三方库声明。有没有人有经验。

这是我到目前为止所拥有的。然后在下面创建编辑器，类似于文档中的示例。

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

Answer 1

将其作为示例和api。您应该将.d.ts文件的内容作为第一个参数传递

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

检查this演示如何传递参数

Answer 2

我想添加包 monaco-editor-auto-typings 作为选项。免责声明：我是该软件包的开发者。

它不断扫描在 monaco 编辑器中输入的代码，检测导入并自动从 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...
});

您可以在 demo 中探索它的工作原理。

Answer 3

（从我的GH原理中复制：https://gist.github.com/cdrini/9de507f6ac19da30fd27c5f618783b31）

那真是令人头疼！这当然不是一个很好的解决方案，但它可以工作。希望有人可以使用这些笔记来节省大量时间。

已知问题：

这无法轻松扩展到任何其他库
需要lodash的类型库的一些内部知识，这些知识可能会在lodash更新时中断

添加`list`和`raw-loader`

@types/lodash

（在撰写本文时，它们分别位于4.14.162和4.0.2）

导入并注册.d.ts文件

查看@types/lodash/index.d.ts，复制所有npm install --save-dev @types/lodash raw-loader引用并将其导入。：

common

注意：Vetur将在VS Code中抱怨导入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';文件，但不会出错。

然后将它们注册到monaco中（无论项目中的monaco位于何处）：

.d.ts

注意：

文件名在这里很重要（以某种方式）；删除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');扩展名会导致它们中断。

参考/外部链接

（大部分没有用的）文档：https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.typescript.languageservicedefaults.html#addextralib
GH问题：
- #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问题：
- Adding Typescript Type Declarations to Monaco Editor
使用.d.ts：https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults
@ types / lodash在unpkg上：https://unpkg.com/browse/@types/lodash@4.14.162/
GH搜索addExtraLib：https://github.com/search?l=JavaScript&q=addExtraLib&type=Code的用途

悬而未决的问题

文件名实际上是做什么的？另外，协议前缀是什么？

将打字稿类型声明添加到摩纳哥编辑器

3 个答案:

添加`list`和`raw-loader`

导入并注册.d.ts文件

参考/外部链接

悬而未决的问题

将打字稿类型声明添加到摩纳哥编辑器

3 个答案:

添加list和raw-loader

导入并注册.d.ts文件

参考/外部链接

悬而未决的问题

添加`list`和`raw-loader`