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

Question

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

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

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

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

标签： javascripttypescriptlodashmonaco-editor

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

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