React Monaco-Editor typescript Integration - reactjs

Question

According to the docs of #monaco-editor/react we need the original monaco-editor as a peer dependency. I installed that as a dev dependency and tried to add node_modules/monaco-editor/monaco.d.ts to the include block in my tsconfig.json. But I am still not able to access the type declarations after this. the only way I could get it to work was to import it like this.
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
but now my type declarations are throwing error when I try to define them for editor and monaco variables. Does anybody know hot get these working ?
here's my code when trying to define the types.
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>
);
};
In my handleEditorDidMount function, the argument monaco throws the error, cant use import as a type

Answer 1

You make a number of wrong assumptions in your code.
Importing a typings file like a normal module won't make the typings available in your IDE.
Monaco has named exports, so use something like: import { languages, editor } from "monaco-editor/esm/vs/editor/editor.api";. This imports the two namespaces languages and editor.
The module react-monaco exports MonacoEditor, not Editor.
monaco (as you imported it) is just the exports object from the monaco module. What do you expect form "typeof monaco"? Makes no sense.
What is the reference to monaco supposed to contain? A reference in React holds a pointer to an object, something that either was instantiated in the DOM or is the instance of a React component. Make no sense to have that ref for the monaco export.
A ref is usually initialised automatically in the render call, like:
<MonacoEditor
ref={this.editorRef}
language={language}
options={opts}
/>
so you don't need the mount function to set that.