0

我们正在努力将 Monaco 与我们使用 React 构建的基于 Web 的 RAD 产品集成。它有一个 UI 来创建状态(一个简单的 JSON 结构)和事件处理程序编辑器,用户可以在其中编写函数来处理诸如 onClick 等组件事件。我们使用 Monaco 作为事件处理程序部分。典型的事件处理程序如下所示(简化) -

function onClick($state){
     // do something with $state
}

请注意,$state结构基于用户创建的状态的形状。

现在代码托管在摩纳哥,我们想让用户看到 $state 变量的自动完成。在 Monaco Playground 中查看与此用例最接近的示例,我们是否需要围绕 $state 结构创建一个动态 d.ts 才能使其工作?或者有没有更简单的替代方法,我们将 State 结构注入到编辑器 DOM 中并让它自动完成?

4

1 回答 1

1

使用monaco.languages.typescript.typescriptDefaults.addExtraLib

    $.get('../State.d.ts').done(function (data) {
        console.info('done');


        require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' } });

        require(['vs/editor/editor.main'], function () {
            monaco.languages.typescript.typescriptDefaults.addExtraLib(data, 'StateObject');
            editor = monaco.editor.create(document.getElementById('container'), {
                value: ['aso.EnvironmentName = "DEV"'
                ].join('\n'),
                language: 'typescript'
            });
        });
    })

State.d.ts(您也可以提供 JSON):

interface StateObject {
    CapitalCity: string,
    Population: number,
    ZipCodes: string[]
}

你将为那个对象 git 智能感知。

将 addExtraLib 视为 using/include/require 语句。 在此处输入图像描述

于 2017-03-19T06:02:50.463 回答