将 Typescript 类型声明添加到 Monaco 编辑器

Question

我有一个摩纳哥编辑器，用户可以输入自定义 JavaScript 代码。在这个 Monaco 编辑器中，他们可以使用 Lodash 功能。我希望能够通过包含类型定义为他们提供 lodash 的智能感知/代码完成。

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

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

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

Answer 1

我想添加包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...
});

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

Answer 2

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

嗯，这真是令人头疼！这当然不是一个优雅的解决方案，但它确实有效。希望有人可以使用这些笔记来节省大量时间。

已知的问题：

• 这不容易扩展到任何其他库
• 需要了解 lodash 类型库的一些内部知识，这可能会在 lodash 更新时中断

添加raw-loader和@types/lodash

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

（截至撰写本文时，这些版本分别为 4.14.162 和 4.0.2）

导入并注册 .d.ts 文件

查看@types/lodash/index.d.ts，复制所有common引用并导入它们。:

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';

• 注意：Vetur 会在 VS Code 中抱怨导入.d.ts文件，但不会出错。

然后将它们注册到 monaco（无论 monaco 在您的项目中的哪个位置）：

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');

笔记：

• 文件名在这里很重要（以某种方式）；移除.d.ts扩展部分会导致它们损坏。

参考资料/外部链接

• （基本上无用）文档： https: //microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.typescript.languageservicedefaults.html#addextralib
• 生长激素问题：
  • #758: monaco-typescript 没有从 addExtraLib 中获取配置的模块
  • #754: addExtraLib 方法不能要求“.d.ts”文件的内容作为浏览器中的字符串
• StackOverflow 问题：
  • 将 Typescript 类型声明添加到 Monaco 编辑器
• 摩纳哥演示使用addExtraLib：https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults
• @types/lodash at unpkg，如果您想直接查看.d.ts文件：https://unpkg.com/browse/@types/lodash@4.14.162/
• GH 搜索使用addExtraLib：https://github.com/search?l =JavaScript&q=addExtraLib&type=Code

开放性问题

• 文件名实际上有什么作用？另外，协议前缀有什么用？

Answer 3

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

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

检查这个如何传递参数的演示