React集成@monaco-editor/react时TypeScript类型报错如何解决

你遇到的“无法将导入用作类型”报错，是因为TypeScript默认将import * as monaco from 'xxx'识别为值导入，直接用它做类型注解时会触发校验错误。另外你之前只把monaco.d.ts加到include配置不生效，是因为类型声明需要在compilerOptions的types字段中注册，或者手动导入类型。

分两步操作即可修复：

1. 调整tsconfig.json配置（可选，可全局复用monaco类型） #

在tsconfig.json的compilerOptions块中添加monaco-editor的类型声明注册，不用再手动引入类型文件：

{
  "compilerOptions": {
    // 其他原有配置
    "types": ["monaco-editor"]
  }
}

2. 修正代码中的类型导入与注解 #

修改代码中的导入部分、类型定义、useRef类型注解，完整修正后的代码片段如下：

import { useState, useRef } from 'react';
import Editor from '@monaco-editor/react';
import styles from '../Code.module.css';
// 导入monaco运行时对象
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
// 单独导入类型用于类型注解（ts 4.5+支持）
import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';

type Language = {
  languageName: string;
  languageID: number;
};

type EditorProps = {
  language: Language;
  onCodeChange: Function;
};

const CodeEditor = ({ language, onCodeChange }: EditorProps) => {
  console.log('language is ', language);

  const [editorValue, setEditorValue] = useState('//some comment');

  // 给ref补充正确类型
  const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null);
  const monacoRef = useRef<typeof monaco | null>(null);

  // 直接用导入的Monaco类型做注解，参数重命名避免和导入的monaco命名冲突
  const handleEditorDidMount = (editor: Monaco.editor.IStandaloneCodeEditor, monacoInstance: typeof monaco) => {
    editorRef.current = editor;
    monacoRef.current = monacoInstance;
    
    console.log(monacoInstance.languages.getLanguages());
    console.log('editor', editor.getModel()?.getLanguageIdentifier().language);
  };

  const handleEditorValueChange = (value: string|undefined) => {
    setEditorValue(value ?? '');
  };
  const editorOptions: Monaco.editor.IStandaloneEditorConstructionOptions = {
    fontSize: 15,
    minimap: {
      enabled: true,
    },
  };
  return (
    <div className={styles.editorBlock}>
      <div className={styles.editorNav}>
        <button>Submit</button>
        <button>Change Language</button>
      </div>
      <Editor
        height="90vh"
        language={language.languageName}
        defaultValue={editorValue}
        onMount={handleEditorDidMount}
        onChange={handleEditorValueChange}
        options={editorOptions}
      />
    </div>
  );
};

补充说明 #

• 给getModel()加了可选链操作符，避免编辑器未初始化完成时调用报错
• 如果已经配置了tsconfig的types字段，可以去掉import type * as Monaco的语句，直接全局使用monaco.xxx作为类型注解即可

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