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

Question

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

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

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

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...
});

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

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
• 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
• 摩纳哥演示使用addExtraLib:https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults
• @types/lodash 在 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, "")

查看this演示如何传递参数