React+TypeScript中如何访问TinyMCE的Editor实例类型？

问题场景 #

在使用@tinymce/tinymce-react的Editor组件时，onInit回调接收的第二个参数是TinyMCE核心的Editor实例（和导入的React组件类型不同）。当尝试在自定义回调函数中声明该实例的类型时，直接写editor: Editor会提示“无法找到名称'Editor'”，而用组件类型TinyMCEEditor会出现类型不匹配错误，虽然鼠标悬停参数时能识别正确类型。

当前代码示例：

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

<TinyMCEEditor
  apiKey="asdf"
  onInit={(evt, editor) => onInitCallBack(evt, editor)}
  // 其他组件属性
/>

// 此处报错：无法找到名称'Editor'
const onInitCallBack = (_, editor: Editor) => {
  // 业务逻辑代码
};

解决方案 #

方案1：直接导入TinyMCE核心的Editor类型 #

onInit中的editor是TinyMCE核心库的实例，而@tinymce/tinymce-react依赖tinymce包，可直接从核心包导入对应类型：

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

const onInitCallBack = (_, editor: Editor) => {
  // 此时editor类型可被正确识别
};

方案2：从组件Props中提取回调类型 #

如果不想直接依赖核心包类型，可从@tinymce/tinymce-react的组件Props中提取onInit的类型，让TypeScript自动推导参数类型：

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

// 提取onInit的回调类型
type OnInitHandler = NonNullable<EditorProps['onInit']>;

// 使用提取的类型定义回调函数，无需手动声明参数类型
const onInitCallBack: OnInitHandler = (_, editor) => {
  // editor类型自动匹配正确
};

方案3：通过组件类型推导实例类型 #

利用TypeScript的类型工具，从React组件的props中直接提取onInit的参数类型：

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

// 获取onInit回调的第二个参数类型
type TinyMCEInstance = Parameters<NonNullable<TinyMCEEditor['props']['onInit']>>[1];

const onInitCallBack = (_, editor: TinyMCEInstance) => {
  // 类型可被正确识别
};

内容的提问来源于stack exchange，提问作者Alex