为摩纳哥编辑提供类型提示

Question

我正在尝试使用Monaco编辑器将智能感知/代码完成提供到javascript编辑器中。代码需要是有效的javascript，而不是打字稿。

鉴于一些用户输入了这样的脚本：

function onMyEvent(event)
{
    event.someProperty
}

我想在event参数上提供代码完成，这是一个我有t.ds的typescript类，可以在运行时推断。

理想情况下，我只想告诉摩纳哥event的类型是SomeEventClass，让它完成其余的工作。 即使这意味着向脚本添加类型提示。但是，我无法看到如何做到这一点。 我尝试在用户脚本中使用JSDoc语法和各种组合，但它看起来像阻止FTB看到： https://github.com/Microsoft/monaco-editor/issues/203 和 Adding JavaScript type hints for VSCode/Monaco Intellisence

我也试过注入动态d.ts，按照 https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults

但是声明这个功能似乎对编辑没什么意义。宣布一个新的课程肯定有效，我只是不知道如何告诉摩纳哥该职能中event是一个特定的类型。

我可以看到registerCompletionItemProvider API，但是它并没有给你任何声明项目声明等的上下文，也没有让我自动使用我想要的d.ts文件。

Answer 1

从Monaco版本0.90开始，由于https://github.com/Microsoft/monaco-editor/issues/203已修复，如果在编辑代码中使用JSDoc，则可以部分添加实现此功能。

对于摩纳哥playgound左侧的代码：

    // validation settings
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
    noSemanticValidation: true,
    noSyntaxValidation: false
});

// compiler options
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES6,
    allowNonTsExtensions: true,
    allowJs: true
});

// extra libraries
monaco.languages.typescript.javascriptDefaults.addExtraLib([
    'declare class SomeEventType {',
    '    /**',
    '     * Heres the doco for someProperty',
    '     */',
    '    someProperty: string',
    '}',
].join('\n'), 'filename/facts.d.ts');

var jsCode = [
    '"use strict";',
    '',
    "/**",
    " * @param {SomeEventType} event",
    " */",
    "function onMyEvent(event) {",
    "",
    "}"
].join('\n');

monaco.editor.create(document.getElementById("container"), {
    value: jsCode,
    language: "javascript"
});

表示编辑器现在可以将事件参数解释为SomeEventType：

Answer 2

这就是我们为magikcraft.io做的方法：将这段代码直接放到操场上的左侧窗格中，然后点击Run：

monaco.editor.create(document.getElementById("container"), {
    value: "function hello() {\n\talert('Hello world!');\n}",
    language: "typescript"
});

const fact = `declare namespace custom { export function onMyEvent(event: customClass): void; 

export class customClass { 
    customProperty: string;
}`;
const factFilename = 'myCustomNamespace';
this.monaco.languages.typescript.typescriptDefaults.addExtraLib(fact, factFilename);

现在，在右侧窗格中，键入：custom.，您就可以获得自定义事实的自动填充功能。

Answer 3

将其放入摩纳哥游乐场的编辑器中：

monaco.editor.create(document.getElementById("container"), {
    value: "function hello() {\n\talert('Hello world!');\n}",
    language: "typescript"
});

const fact = `declare function onMyEvent(event: string): void; 
`;
const factFilename = 'myCustomNamespace1';
this.monaco.languages.typescript.typescriptDefaults.addExtraLib(fact, factFilename);

现在，当您在右侧窗格中键入onMyEvent时，您将获得