Запустите Quill Editor с помощью TypeScript

Question

Как мне запустить редактор Quill в TypeScript?

У меня есть рабочий пример WYSIWYG-редактора Quill с сайта 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. У вас не должно возникнуть проблем с этим.

---

В основном, есть два интерфейса для импорта / экспорта.

Общий JS способ: (это было первым)

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

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

Обратите внимание, что экспорт всегда представляет собой единый объект целиком. module.exports - это значение, которое может быть require 'd.

И путь ES6: (новый и теперь рекомендуемый стандарт)

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

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

Обратите внимание, что теперь есть именованные экспорты и экспорты по умолчанию. Модуль ES6 не имеет одно экспортируемое значение, но может экспортировать много значений (одно из которых является значением по умолчанию). Эти различия усложняют перевод между этими синтаксисами.

Опция компилятора esModuleInterop позволяет использовать стиль ES6 import с общим JS стилем module.exports и наоборот.

Здесь более глубокое объяснение.

Кроме того, эта проблема с github , похоже, указывает на то, что для пера требуется esModuleInterop для включения. Что хорошо. Это не должно вызывать у вас никаких проблем.

Звучит так, будто мы идем по пути того, чтобы люди следовали рекомендациям Typescript по включению esModuleInterop, поэтому не будем держать этот пиар открытым.

Поэтому они обсудил, не требуя этого, решил против этого и закрыл вопрос.