首页 文章

结构自动完成类型

提问于
浏览
0

我们正在努力将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才能使用?或者是否有一个更简单的替代方案,我们将状态结构注入编辑器DOM并让它自动完成?

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 intellisense .

    将addExtraLib视为using / include / require语句 .
    enter image description here

相关问题