如何在Monaco Editor中加载外部TypeScript类型定义实现智能提示

monaco.languages.typescript.javascriptDefaults.addExtraLib的第一个参数要求传入类型定义的完整文本内容，你当前传了空字符串，相当于没有加载任何有效类型定义，第二个参数才是可选的库唯一标识URL，仅用于Monaco内部去重，不会自动拉取对应地址的内容。

1. 先拉取.d.ts文件内容再加载 #

你需要先手动发起请求拿到d.ts的文本内容，再传入addExtraLib方法：

async function loadDtsToMonaco(libUrl) {
  // 拉取d.ts文件的文本内容
  const res = await fetch(libUrl);
  const dtsContent = await res.text();
  // 加载到JS语言服务，适配js/tsx等文件的提示
  monaco.languages.typescript.javascriptDefaults.addExtraLib(
    dtsContent,
    libUrl
  );
  // 如果编辑器用TS模式，同步加载到TS语言服务
  monaco.languages.typescript.typescriptDefaults.addExtraLib(
    dtsContent,
    libUrl
  );
}

// 调用加载，注意你提供的地址多了一个斜杠，要修正为正常地址
loadDtsToMonaco('http://127.0.0.1:1880/myapp/models/load/index.d.ts');

2. 其他注意事项 #

• 类型定义如果依赖其他第三方类型（比如通用工具类、框架类型），需要将依赖的d.ts文件按同样方法提前加载，否则类型声明会因为依赖缺失不生效
• 加载操作要在Monaco语言服务初始化完成、编辑器打开目标编辑文件之前执行，加载晚于文件打开的话可以手动修改一次编辑器内容触发类型重新校验
• 打包场景下可以直接将d.ts作为静态资源导入，不需要发起请求，比如Vite环境可以用import dtsContent from './index.d.ts?raw'，直接将导入的内容传入addExtraLib即可

• 控制台执行monaco.languages.typescript.javascriptDefaults.getExtraLibs()，可以查看所有已加载的额外类型库，确认你添加的d.ts是否在列表中、内容是否完整
• 若已加载仍无提示，检查d.ts中模块声明declare module 'xxx'的模块路径，是否和编辑器代码中导入的路径完全匹配

内容的提问来源于stack exchange，提问作者Ildelian