javascript - 将 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 中探索它的工作原理.