monaco-editor配置TypeScript后仍报8010类型注解错误如何解决

问题修复方案 #

这个报错的本质是monaco内置的TypeScript语言服务将你当前编辑的文件识别为JavaScript文件，和你手动设置的language参数无关，以下是可直接落地的修复方案：

• 修正编辑器模型的URI后缀
  monaco的TypeScript语言服务优先通过模型的URI后缀判断文件类型，而非你传入的language参数。你当前代码包含JSX语法，必须给模型指定.tsx后缀的URI，示例代码：

// 错误写法：未指定带正确后缀的URI，或者仅在编辑器初始化时传language参数
const wrongModel = monaco.editor.createModel(yourCode, 'typescript');

// 正确写法：指定URI后缀为.tsx，路径可以随便填只要后缀正确即可
const correctModel = monaco.editor.createModel(
  yourCode,
  'typescript',
  monaco.Uri.parse('file:///custom-path/Test.tsx')
);
// 再将模型绑定到编辑器实例
editor.setModel(correctModel);

• 调整编译选项避免类型混淆
  你当前配置中allowJs: true会允许TypeScript服务处理JS文件，可能触发识别逻辑异常，建议修改为false：

monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
  target: monaco.languages.typescript.ScriptTarget.Latest,
  allowNonTsExtensions: true,
  moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
  module: monaco.languages.typescript.ModuleKind.CommonJS,
  noEmit: true,
  esModuleInterop: true,
  jsx: monaco.languages.typescript.JsxEmit.React,
  reactNamespace: "React",
  allowJs: false, // 修改此处为false
  typeRoots: ["node_modules/@types"],
});

• 关闭JavaScript文件的不必要校验（可选）
  避免JavaScript校验逻辑误触发报错：

monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
  noSemanticValidation: true,
  noSyntaxValidation: false
});

• 强制刷新TypeScript服务状态
  修改配置后如果报错未消失，主动触发服务同步：

monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
// 若仍未生效，可销毁原有模型重新创建即可

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