Tener el siguiente fragmento de código que funciona bien con 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;Necesito usarlo en una aplicación React + Typescript, así que tengo que agregar tipos.
¿Qué tipo debe usarse para el editor ?
Intenté así:
function handleEditorDidMount(editor: HTMLInputElement) { editorRef?.current = editor; } function showValue() { // eslint-disable-next-line no-alert alert(editorRef?.current?.getValue()); }Para el primer método, el error es:
The left-hand side of an assignment expression may not be an optional property access.ts(2779) const editorRef: React.MutableRefObject<null>Para el segundo:
Property 'getValue' does not exist on type 'never'.ts(2339)¿Alguna sugerencia?
tipo de importación onMount
import MonacoEditor, { OnMount } from "@monaco-editor/react"; si se desplaza sobre onMount :
type OnMount = (editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => voidúsalo en handleDidMount:
const handleEditorDidMount:OnMount=(editor) { editorRef?.current = editor; }
si ve el tipo, handleEditorDidMount toma 2 argumentos
const handleEditorDidMount:OnMount=(editor,_monaco) { editorRef?.current = editor; } Dado que está utilizando el tipo OnMount , el tipo de argumentos se inferirá mediante mecanografiado:
editor: editor.IStandaloneCodeEditorEl tipo devuelto de useRef(null) es React.MutableRefObject<null> . Pero desea que TypeScript sepa que va a pasar un elemento de entrada a la referencia, por lo que debe establecer explícitamente su tipo const editorRef = useRef(null) as React.MutableRefObject<null | HTMLInputElement>;
editorRef.current siempre estará definido, pero el tipo de editorRef.current ahora es null | HTMLInputElement , porque el tipo de corriente es el tipo que pasa al genérico de React.MutableRefObject .
Con respecto a este error.
The left-hand side of an assignment expression may not be an optional property access.ts(2779) const editorRef: React.MutableRefObject<null> editorRef.current siempre estará definido. Sin embargo, el valor puede ser null ya que lo ha escrito explícitamente. Entonces, ¿no es necesario el ?
Sabiendo esto, puede ajustar su última parte del código para
function showValue() { // eslint-disable-next-line no-alert alert(editorRef.current?.getValue()); }