类型

Question

我们正在努力将Monaco与使用React构建的基于Web的RAD产品集成。它有一个UI来创建State（一个简单的JSON结构）和事件处理程序编辑器，用户可以在其中编写函数来处理组件事件，如onClick等。我们使用Monaco作为事件处理程序部分。典型的事件处理程序看起来像这样（简化） -

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

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

现在代码托管在摩纳哥，我们希望让用户看到$ state变量的自动完成。将the closest example转到摩纳哥游乐场的这个用例，我们是否需要在$ state结构周围创建动态d.ts才能使用？或者是否有一个更简单的替代方案，我们将State结构注入编辑器DOM并让它自动完成？

Answer 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 intellisense。

将addExtraLib视为using / include / require语句。