javascript - Hvordan får jeg tilgang til typen "Editor" definert av TinyMCE i React og TypeScript?

Jeg prøver å finne ut hvordan jeg får tilgang til typer definert i en NPM-modul.

TinyMCE har en editor React-komponent kalt Editor og den inneholder en onInit-metode som tar to parametere, en hendelse og selve editoren, også av typen Editor men forskjellig fra komponenten.

Så jeg importerer Editor-komponenten fra biblioteket ved å gjøre

import { Editor as TinyMCEEditor } from '@tinymce/tinymce-react';

Og jeg definerer redaktøren som følgende...

<TinyMCEEditor
   apiKey="asdf"
   onInit={(evt, editor) => onInitCallBack(evt, editor)}
   ...
/>

Deretter prøvde jeg å definere tilbakekallingen for å samsvare med den forventede typen

const onInitCallBack = (_, editor: Editor) => {
   ...
};

Det merkelige er at det er i stand til å gjenkjenne Editor-typen når den blir holdt over med musen.

(parameter) editor: Editor

Samt arrangementets type:

(parameter) evt: {
    readonly type: string;
    readonly target: any;
    readonly isDefaultPrevented: () => boolean;
    readonly preventDefault: () => void;
    ...etc
}

Men på onInitCallBack når jeg prøver å definere Editor-typen, sier den at den ikke kan finne navnet 'Editor':

type Editor = /*unresolved*/ any
Cannot find name 'Editor'. ts(2304)

Hva må jeg gjøre for at det skal kunne se Editor-typen som er definert i NPM-pakken?

Hvis jeg prøver å bruke TinyMCEEditor som en type får jeg følgende feil.

(parameter) editor: Editor
Argument of type ‘import("e:/Git/web-app-release-notes-editor/node_modules/tinymce/tinymce").Editor’ is not assignable to
parameter of type ‘import("e:/Git/web-app-release-notes-editor/node_modules/@tinymce/tinymce-
react/1lib/cjs/main/ts/components/Editor").Editor’

Type ‘Editor’ is missing the following properties from type ‘Editor’: elementRef, boundHandlers, rollbackTimer, valueCursor, and
23 more. t5(2345)

Svar #1

Du forveksler React-komponenten Editor og tinymce Editor - merk at de har samme navn. Sikkert trenger du noe som...

import { Editor } from '@tinymce/tinymce-react';
import { Editor as TinyMCEEditor } from 'tinymce';

Da

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

og...

<Editor
   onInit={(evt, editor) => editorRef.current = editor}
   ...
/>

Selv om jeg kanskje har rotet til syntaksen her...

Relaterte artikler