如何为编辑器添加d.ts，支持代码提示

[yz1311]

详细描述 bug（必填）

在编写代码的时候，有很多地方用到appHelper里面的固定代码，最好能支持自定义代码提示，monaco也是支持导入.d.ts的

如何复现 bug？（必填，非常重要）

预期行为（必填，非常重要）

能添加自定义的代码提示

bug 截图（可选）

请提供如下信息（必填）

低代码引擎版本 低代码引擎扩展包版本 浏览器版本 其他物料 / 插件 / 工具链版本

更多额外信息（可选）

[alvarto]

项目中的 monaco-editor 是单例的，因此可以在低代码编辑器上下文进行如下操作自主注入，举例：注入 @types/react

import { configure, getSingletonMonaco } from '@alilc/lowcode-plugin-base-monaco-editor/es/monaco'
import reactDefinitions from '!!raw-loader!../../node_modules/@types/react/index.d.ts'

// 保证 monaco editor 是单例
configure({
  singleton: true,
})

function init() {
    getSingletonMonaco()
      .then((monaco) => {
            monaco.languages.typescript.javascriptDefaults.setExtraLibs(
              [{ filePath: 'react', content: reactDefinitions }]
            )
      })
}

[yz1311]

@alvarto 请问有无办法为 this.utils 这种添加代码提示？有了上面的添加方法倒是不知道怎么应用到源码界面的编辑器里面了

[alvarto]

this 声明是做不到的，因为 typescript 要求 this 显式声明，而我们的低代码引擎/源码面板目前仅支持 js 而不支持 ts。

不过因为低代码引擎会将 utils / state 等等放到当前执行环境中，所以可以直接声明 utils 的类型，然后代码中直接引用 utils，这个声明方法类似于：

let utils: {
  /** 可以在低代码中通过 utils.search 获取到所有 search 参数 */
  search: Record<string, any>
}

然后在编辑器中：

[yz1311]

@alvarto 试了，感谢大佬帮助👍，加上这个，太能提升效率了

[yz1311]

@alvarto 所以我理解错了，直接用utils可以提示后面的属性，但是你最终运行的时候，还是得前面加上this，不然运行直接报错了，但是加了this，那个提示又变没了😅

[yz1311]

@alvarto 我改了plugin-code-editor，editor加载code和保存code的时候,对this.utils自动去掉/增加this.，暂时解决，不知道有无啥坑

[alvarto]

对this.utils自动去掉/增加this.，暂时解决

应该没啥坑，我们用的版本好像就会自动加😅，改天需要排查一下是为什么

[liujuping]

@alvarto 所以我理解错了，直接用utils可以提示后面的属性，但是你最终运行的时候，还是得前面加上this，不然运行直接报错了，但是加了this，那个提示又变没了😅

关于没有 this 运行报错的问题，可以看看 thisRequiredInJSE 相关的配置

1.https://www.yuque.com/lce/doc/nhilce#kiTLd 2.https://www.yuque.com/lce/doc/dffghx