从ReactQuill命名空间导入接口的相关问题

在ReactQuill v1.3.3的类型定义中，大部分核心接口（比如Delta、Source、ToolbarProps等）都是挂载在ReactQuill命名空间下的，而非作为独立导出项存在。很多开发者会尝试直接从模块导入这些类型，结果遇到编译错误，这里给你两种可行的解决方式：

方式一：通过默认导入的对象访问类型 #

先默认导入ReactQuill组件，然后直接通过该对象访问命名空间下的接口：

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

// 直接使用ReactQuill命名空间下的Delta和Source类型
const handleEditorChange = (
  content: string,
  delta: ReactQuill.Delta,
  source: ReactQuill.Source
) => {
  console.log('编辑器内容变更:', content);
  console.log('变更详情Delta:', delta);
};

// 使用ToolbarProps类型定义自定义工具栏属性
const toolbarModules: ReactQuill.ToolbarProps['modules'] = {
  toolbar: [['bold', 'italic', 'link']]
};

方式二：直接引用命名空间（适用于仅需类型的场景） #

如果你只是需要使用类型而不需要导入ReactQuill组件，可以直接引用全局的ReactQuill命名空间（前提是已安装官方自带的类型或@types/react-quill）：

// 无需导入组件，直接用命名空间类型
type EditorDelta = ReactQuill.Delta;
type ChangeSource = ReactQuill.Source;

const logDelta = (delta: EditorDelta) => {
  console.log(delta.ops);
};

为什么直接导入会失败？ #

查看v1.3.3的类型文件会发现，所有核心类型都定义在namespace ReactQuill内部，模块的默认导出是ReactQuill组件本身，并没有单独导出这些接口。所以你不能写import { Delta } from 'react-quill'这种代码，必须通过命名空间来访问。

扩展类型示例 #

如果需要自定义扩展ReactQuill的类型，也可以基于命名空间下的接口进行继承：

import ReactQuill from 'react-quill';

// 扩展ToolbarProps添加自定义属性
interface CustomToolbarProps extends ReactQuill.ToolbarProps {
  onToolbarClick: () => void;
}

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