typescript - 使用 TypeScript 运行 Quill 编辑器

Question

如何让 Quill 编辑器在 TypeScript 中运行？

我有一个来自 Quill site 的 WYSIWYG 编辑器 Quill 的工作示例.只需将以下代码复制到一个 HTML 文件中，例如 example.html，就会有一个简单的文本编辑器示例:

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

现在我正在尝试让这个示例在 TypeScript 中运行。第一件事是安装 quill，然后安装 TypeScript 的类型，它应该是 @types/quill。将它们添加到 package.json 文件中并运行 yarn 或 npm 加载类:

"dependencies": {
    "@types/jquery": "3.3.31",
    "@types/quill": "^2.0.3",
    "@types/react": "16.9.11",
    "@types/react-dom": "16.9.4",
    "@types/react-router-dom": "5.1.2",
    "bootstrap": "4.3.1",
    "jquery": "3.4.1",
    "popper.js": "1.16.0",
    "quill": "^1.3.7",
    "react": "16.11.0",
    "react-dom": "16.11.0",
    "react-router-dom": "5.1.2",
},

但是当使用 webpack-dev-server 运行示例时，我得到一个错误。命令是:

"scripts": {
    "develop": "webpack-dev-server --mode development --open --port 8081 --host 0.0.0.0 --config webpack.dev.config.js"
}

错误是:

ERROR in [at-loader] ./node_modules/@types/quill/node_modules/quill-delta/dist/Delta.d.ts:1:8 
    TS1259: Module '"/home/myuser/Documents/quill-example/node_modules/@types/quill/node_modules/fast-diff/diff"' can only be default-imported using the 'esModuleInterop' flag

我想 @types/quill 包有问题，对吧？但究竟是什么失败了？ esModuleInterop 到底在做什么？这个错误有什么修复方法吗？

我找不到任何 Quill TypeScript 示例。在 TypeScript 中运行它应该相当容易，对吧？

Answer 1

开启esModuleInterop。这样做应该不会有任何问题。

---

基本上，有两个用于导入/导出的接口(interface)。

CommonJS 方式: (这个在前)

// a.js
module.exports = { foo: 'foo', bar: 'bar' }
exports.baz = 'baz'

// b.js
const { foo, bar, baz } = require('./a.js')

请注意，导出始终是单个完整对象。 module.exports 是可以require 的值。

和 ES6 方式: (新的和现在推荐的标准)

// a.js
export default { foo, bar }
export const baz = 'baz'

// b.js
import baz, { foo, bar } from './a'

请注意，现在有命名导出和默认导出。 ES6 模块不只有一个导出值，但可以导出多个值(其中一个是默认值)。这些差异使得这些语法之间的转换有点复杂。

esModuleInterop 编译器选项允许您使用 ES6 风格的 import 和 CommonJS 风格的 module.exports，反之亦然。

Much deeper explanation here.

此外，this github issue似乎表明 quill 需要打开 esModuleInterop。这很好。它不应该给你带来任何问题。

It sounds like we are going the path of relying on people to follow Typescript's recommendation for turning on esModuleInterop so will not keep this PR open.

所以他们讨论了不需要它，决定反对它，并关闭了这个问题。