Definitelytyped: Latest Quill type definition breaks constructor

[buu700]

After updating to https://github.com/DefinitelyTyped/DefinitelyTyped/blob/111df1541b3904e53224227cb56414e55a54e085/types/quill/index.d.ts, I've had to change my use of Quill from:

import * as Quill from 'quill';
...
const quill = new Quill(...);

to:

... <Quill.Quill> new (<any> Quill)(...);

import {Quill} ... new Quill compiles with the new type definition, but fails at run-time with the error TypeError: __WEBPACK_IMPORTED_MODULE_1_quill__.Quill is not a constructor.

CC @ericeslinger and @mhegazy

[ericeslinger]

I think at the very least, adding an export default Quill in the typing to reflect what's going on in the quill library makes sense. Just posted a PR, but you'll still have to do

import Quill from 'quill';
const q = new Quill();
Quill.import();

instead of import * as Quill from 'quill';

[buu700]

Sounds good, thanks for the quick fix!

[KillerCodeMonkey]

Does not work for me with your fix.

if i import quill --> node_modules/quill/dist/quill is used --> so i need to import it like import * as Quill from 'quill';

but then the new type is not working. any hints?

[ericeslinger]

Is the compilerOptions.module setting in your tsconfig set to es2015 or
commonjs

E

On Sat, Sep 23, 2017, 8:50 AM Bengt Weiße [e-mail] wrote:

Does not work for me with your fix.

if i import quill --> node_modules/quill/dist/quill is used --> so i need
to import it like import * as Quill from 'quill';

but then the new type is not working. any hints?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18946#issuecomment-331644108,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAPm4xqVVXzcy51TLcXSiAexAl2pfK29ks5slSiogaJpZM4O27nD
.

[KillerCodeMonkey]

commonjs for ordinary builds and es2015 for aot build

[ericeslinger]

The quill export seems to require es2015 as the module setting for the
compiler to properly execute import Quill from 'quill'

On Sat, Sep 23, 2017, 9:54 AM Bengt Weiße [e-mail] wrote:

commonjs for ordinary builds and es2015 for aot build

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18946#issuecomment-331650284,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAPm40t1hqlO3fHCsNA0062KWWd_WhQkks5slTe_gaJpZM4O27nD
.

[KillerCodeMonkey]

okay thanks.

@ericeslinger do you know any possibility to build an umd / commonjs package?

[mustafaekim]

I cannot move to es2015 in compiler options. How can I use quill with webpack+typescript+babel setup?

[n1ghtmare]

@mustafaekim I would very much like to know the same. Is there a possibility that the definition is written so that it is compatible with commonjs seeing that it's the default? I'm not even sure why this is marked as closed tbh.

Btw I was able to get it to work by using version 0.0.30 of the quill type definition (not ideal I know but I can't change my compiler options).

[earshinov]

I've managed to make it work with

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "strict": true
  }
}

and TypeScript 2.6.2 (a typical setup for an Angular 5 project):

// Note convenient { ... } imports instead of `import * from 'quill'`
import { Quill, QuillType } from 'app/shared/quill';

class SampleQuillModule {
  // Refer to Quill type as `QuillType`
  constructor(quill: QuillType, options) {
    // ...
  }
  // ...
}

// You can still access Quill statics as Quill.<...>
Quill.register(SampleQuillModule);

The solution is an intermediate module full of dark magic (app/shared/quill in the example):

// Forcibly import quill implementation
import 'quill';


// Perform dark magic so that quill module is properly typed and at the same time works in runtime.
//
// Sample usage:
//
//   // Note convenient { ... } imports instead of `import * from 'quill'`
//   import { Delta, Quill, QuillType } from 'app/shared/quill';
//
//   // Importing auxiliary types is possible, but is rather awkward
//   const _Delta: typeof Delta = Quill.import('delta');
//
//   class SampleQuillModule {
//
//     // Refer to Quill type as `QuillType`
//     constructor(quill: QuillType, options) {
//
//       // Sample usage of the Delta auxiliary type
//       window.setTimeout(() => {
//         quill.updateContents(new _Delta([
//           { insert: 'Hello from SampleQuillModule!' },
//         ]));
//       });
//     }
//   }
//
//   // You can still access Quill statics as Quill.<...>
//   Quill.register(SampleQuillModule);
//
// I did not find a way to merge variable and type declarations so that both are available
// as `Quill`, so I exported the type declaration as `QuillType` to distinguish the two.
// https://www.typescriptlang.org/docs/handbook/declaration-merging.html
//
// Broken Quill typings are a known issue:
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18946
//
// The accepted solution is said to only work in certain TypeScript configurations:
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18946#issuecomment-331650057
//

// re-export auxiliary type declarations from `@types/quill`
export * from 'quill';

// then we need the actual implementation (note the usage of `QuillImplementation` below)
import * as QuillImplementation from 'quill';

// import quill type declaration from `@types/quill`
import { default as QuillTypescriptClass } from 'quill';

// re-export the type declaration
export type QuillType = QuillTypescriptClass;

// export a variable declaration for accessing Quill statics
export const Quill: typeof QuillTypescriptClass = QuillImplementation as any;

It is a shame one has to do this.

Demo repository: https://github.com/earshinov/quill-typings-demo.

I understand it would be much more convenient to have a demo on StackBlitz, but unfortunately it does not expose tsconfig.json for editing. Here is a draft though: https://stackblitz.com/edit/typescript-znkdfw.