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

Question

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

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

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

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

Answer 1

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

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

检查this如何传递参数的演示

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 扩展名会导致它们损坏。

References/External 链接

（基本上没用的）文档：https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.typescript.languageservicedefaults.html#addextralib
生长激素问题：
- #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
Whosebug 问题：
使用 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

我想添加包 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 中探索它的工作原理。

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

Adding Typescript Type Declarations to Monaco Editor

javascript

typescript

lodash

monaco-editor

添加 raw-loader 和 @types/lodash

导入并注册 .d.ts 文件

References/External 链接

未决问题

添加 `raw-loader` 和 `@types/lodash`