javascript - Tipuri React Typescript pentru monaco-editor

Având următorul fragment de cod care funcționează bine cu React + Javascript:

import React, { useRef } from "react";

import Editor from "@monaco-editor/react";

function App() {
  const editorRef = useRef(null);

  function handleEditorDidMount(editor, monaco) {
    editorRef.current = editor;
  }

  function showValue() {
    alert(editorRef.current?.getValue());
  }

  return (
    <>
      <button onClick={showValue}>Show value</button>
      <Editor
        height="90vh"
        defaultLanguage="javascript"
        defaultValue="// some comment"
        onMount={handleEditorDidMount}
      />
    </>
  );
}

export default App;

Sandbox aici.

Trebuie să îl folosesc într-o aplicație React + TypeScript, așa că trebuie să adaug tipuri.

Ce tip ar trebui folosit pentru editor?

Încercat astfel:

  function handleEditorDidMount(editor: HTMLInputElement) {
    editorRef?.current = editor;
  }

  function showValue() {
    // eslint-disable-next-line no-alert
    alert(editorRef?.current?.getValue());
  }

Pentru prima metodă, eroarea este:

The left-hand side of an assignment expression may not be an optional property access.ts(2779)
const editorRef: React.MutableRefObject<null>

Pentru al doilea:

Property 'getValue' does not exist on type 'never'.ts(2339)

Aveți sugestii?

Răspuns #1

• importați tip onMount

  import MonacoEditor, { OnMount } from "@monaco-editor/react";
  

dacă treci cu mouse-ul peste onMount:

  type OnMount = (editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void

• folosește-l pe handleDidMount:

  const handleEditorDidMount:OnMount=(editor) { editorRef?.current=editor; }

dacă vezi tipul, handleEditorDidMount primește 2 argumente

const handleEditorDidMount:OnMount=(editor,_monaco) {
    editorRef?.current = editor;
  }

Deoarece folosești tipul OnMount, tipul argumentelor va fi dedus de TypeScript:

          editor: editor.IStandaloneCodeEditor

Răspunsul #2

Pentru a rezolva problemele de TypeScript cu care vă confruntați, puteți destructura tipul OnMount din pachetul editorului Monaco. Tipul OnMount este tipul proprietății onMount și puteți extrage tipul pentru editor accesând primul parametru al tipului OnMount.

Iată cum poți aplica această soluție:

import { Editor as MonacoEditor, type OnMount } from "@monaco-editor/react";

// Extract the type of the editor from the OnMount prop
type IStandaloneCodeEditor = Parameters<OnMount>[0];

...

const editorRef = useRef<IStandaloneCodeEditor | null>(null);

const handleEditorDidMount = (editor: IStandaloneCodeEditor) => {
    editorRef.current = editor;
};

1. Tipul OnMount: Acest tip reprezintă semnătura funcției pentru callback-ul onMount. Folosind Parameters<OnMount>[0], extragem primul parametru al funcției onMount, care este instanța editor, și îl atribuim tipului IStandaloneCodeEditor.
2. useRef<IStandaloneCodeEditor | null>(null): Aceasta asigură că editorRef este tipizat corect pentru a deține o instanță a editorului Monaco sau null inițial.
3. handleEditorDidMount funcție: Această funcție este tipizată pentru a accepta o instanță de editor de tip IStandaloneCodeEditor.