React Monaco-Editor 打字稿集成

Question

根据@monaco-editor/react 的文档，我们需要原始的 monaco-editor 作为对等依赖项。我将它安装为开发依赖项，并尝试将node_modules/monaco-editor/monaco.d.ts 添加到我的tsconfig.json 中的include 块中。但是在此之后我仍然无法访问类型声明。我可以让它工作的唯一方法就是像这样导入它。

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

但是现在当我尝试为 editor 和 monaco 变量定义类型声明时，它们会抛出错误。有谁知道让这些工作热起来吗？

这是我尝试定义类型时的代码。

import { useState, useRef } from 'react';
import Editor from '@monaco-editor/react';
import styles from '../Code.module.css';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
type Language = {
  languageName: string;
  languageID: number;
};

type EditorProps = {
  language: Language;
  onCodeChange: Function;
};
type Monaco = typeof monaco // to use it as a type for the monaco variable in handleEditorDidMount function

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

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

  const editorRef = useRef(null);

  const monacoRef = useRef(null);

  const handleEditorDidMount = (editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => {
    editorRef.current = editor;
    monacoRef.current = monaco;
    
    console.log(monaco.languages.getLanguages());
    console.log('editor', editor.getModel().getLanguageIdentifier().language);
  };

  const handleEditorValueChange = (value: string|undefined) => {
    //console.log('event is ', event);
    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>
  );
};

在我的handleEditorDidMount 函数中，参数 monaco 抛出错误，不能使用 import 作为类型

Answer 1

您在代码中做了许多错误的假设。

1. 像普通模块一样导入类型文件不会使类型文件在您的 IDE 中可用。
2. 摩纳哥已命名导出，因此请使用类似：import { languages, editor } from "monaco-editor/esm/vs/editor/editor.api";。这将导入两个命名空间 languages 和 editor。
3. 模块 react-monaco 导出 MonacoEditor，而不是 Editor。
4. monaco（当你导入它时）只是来自 monaco 模块的导出对象。你对“typeof monaco”有什么期望？没有意义。
5. monaco 的引用应该包含什么？ React 中的引用包含一个指向对象的指针，该对象要么在 DOM 中实例化，要么是 React 组件的实例。为摩纳哥出口提供该参考是没有意义的。
6. 引用通常在渲染调用中自动初始化，例如：

                <MonacoEditor
                    ref={this.editorRef}
                    language={language}
                    options={opts}
                />

所以你不需要 mount 函数来设置它。