New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
quill.d.ts - typescript definition file #777
Comments
Quill is in the DefinitelyTyped project. It does not look like there are definitions for 1.0 but not sure what the protocol is for different or beta versions. |
Would you be willing to include a |
Quill in DefinitelyTyped was updated to 1.0. With TypeScript 2.0 you can add "@types/quill" to package.json: "dependencies": {
"quill": "^1.0.4",
"@types/quill": "*"
} Not sure if it's possible to specify a version. Use it: import * as Quill from 'Quill';
let quill = new Quill('#editor'); I asked if it's possible to improve the import syntax: |
Looking into this. I'll see how I can improve the namespaces and keep the DT team happy. They've gotten a lot pickier about global objects and insist on things being in their own namespace (hence the QuillJS wrapper). |
You can certainly add |
I try to use Quill with angular 2(angular-cli), but I got error when ng serve Error message: Cannot find module 'Quill'. In component, , then i got build error I have already added "@types/quill": "0.0.26", Anyone can share your experience of adding Quill to your project? I found a solution |
Hi @hmtai6 I am not quite sure why you need /// <...> style import. I am assuming you are using it in a Node app? Here is an example of using it in Electron JS app That's a KO Component though and uses RequireJS' AMD loader. I am a little rusty with Angular, but does it expect a certain type of module AMD/UMD/CommonJS ? |
@jhchen typings provided by lib maintainers will be up to date with lib code and it would be easy to use. Current definitions is outdated and wrong and imho it's harder for community to maintain separate up-to-date definitions source than to have definitions as lib part (same for Parchment that already wrote on TypeScript) |
How does one use the |
@johnbendi Could you expand on how you are planning to use it. If you are using type-definitions from DefinitelyTyped, you will get an object with the shape defined in DeltaStatic interface. If you want to create a new object, you can try something like below:
|
@sumitkm Is this the correct way to use your Quill definitions in a TypeScript 2 project with webpack (Angular 2)? package.json: "dependencies": {
"quill": "^1.2.2",
"@types/quill": "^0.0.29"
} vendor.ts: import '../node_modules/quill/dist/quill.snow.css'; editor.component.ts: import { Component, ViewChild, ElementRef } from '@angular/core';
import * as Quill from 'quill';
@Component({
selector: 'u-editor',
templateUrl: './editor.component.html',
styleUrls: ['./editor.component.css'],
})
export class EditorComponent {
@ViewChild('container') containerEl: ElementRef;
private editor: Quill.Quill;
ngAfterViewInit() {
this.editor = new Quill(this.containerEl.nativeElement, {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
}
} Why do I need to do "import * as Quill from 'quill'" instead of "import {Quill} from 'quill'?" |
Bump. @benbro, yes, that seems the correct way to use the Quill constructor, however, something seems wrong with the definition file. I have the same issue as @johnbendi and @benbro. Whenever I try to use the Delta constructor, I get an error message in the browser which says: 'WEBPACK_IMPORTED_MODULE_3_quill.Delta is not a constructor' Any help would be highly appreciated! |
After much prodding:
|
@benbro My understanding at the time of writing the definition was QuillJS is the over-arching namespace containing definitions for Quill, Delta, Range, Clipboard etc. You cannot use You have to use Quill.Quill only when you specifying type in TypeScript. These are then dropped by the TypeScript compiler when compiled to native. When instantiating Delta we have to remember to import the actual definition from the node module as @mdpye has shown above, again because actual definition of Delta is in the Quill library not in the quill.d.ts. Basically quill.d.ts definitions are just that, definitions. You still need to use the correct Node module imports as shown by @mdpye above. Hopefully @JordyVlassembrouck's error gets resolved with the import statement as well. That's partly why they are defined as DeltaStatic in the quill.d.ts type definition. DeltaStatic simply defines the interfaces (or shape) for TypeScript compiler to type check against. You cannot instantiate a class from a typescript definition. Finally, as to the weird versioning, I'll follow up with the DefinitelyTyped team. They seem to have taken over the typings with the launch of Types 2 (and move to npm package manager). Last I checked the definitions were up to date. |
Are there any news to this? @JordyVlassembrouck package.json: "devDependencies": {
"@types/quill": "*"
}
"dependencies": {
"quill": "^1.3.1"
} Typescript: import * as Quill from "quill";
let editor = new Quill.Quill('.quill'); Console Output: Uncaught TypeError: Quill.Quill is not a constructor |
@michaelhertig try this: import * as Quill from 'quill';
let editor: Quill.Quill;
editor = new Quill('.quill'); |
@michaelhertig , the problem does not seem to be solved. I think it has something to do with the type definition or the way the classes are exported. Anyway, we solved it the following way: import * as Delta from 'quill-delta/lib/delta';
const delta = new Delta(jsonObject); Directly importing Delta seems to work. |
@JordyVlassembrouck I think @michaelhertig asked about Quill and not about Delta. To use Delta try this: import * as Quill from 'quill';
let Delta: Quill.DeltaStatic = Quill.import('delta');
let delta = new Delta(jsonObject); |
@michaelhertig |
@benbro @JordyVlassembrouck However, neither of your suggestions worked for me. Even with the newest typings you mentioned. |
@michaelhertig import Quill from 'quill';
let editor: Quill;
editor = new Quill('.quill'); Try to remove node_modules, delete npm or yarn lock file and install again to ensure you have the latest version. |
@sumitkm is it possible to have separate import Delta from 'quill-delta'; Will |
@benbro import * as Quill from "quill";
let quill : any = Quill; //this one is important, otherwise 'Quill' is undefined
let editor = new quill('.quill'); Thanks so much for your help. |
@michaelhertig It allows to reference to quill delta the following way:
Installation instructions can be found here |
@michaelhertig but with your solution you loose all the benefits of using the quill typings... i do not know how the testcases in definitelytyped are executed, because they are running and working, but i can not get it working with real quilljs. |
Did anyone resolve this? 7-ish months later and I'm still experiencing the same issues (as in, no perfect use case):
|
same problem here, but i wasn't able to make it work with any of your solutions guys. really annoying. |
In my case (Angular 5), with the following versions:
To make the typing work, I have to:
or import it locally in Typescript component by (as answered by others above):
After these two steps, I finally can use Quill without errors in my Typescript. |
@hchings Cheers! However, it seems like adding the |
The code in the issue raised worked for me: DefinitelyTyped/DefinitelyTyped#18946 |
@mdpye Dude you saved me! Cheers! |
Quill needs to add the following line
into its |
@hertg 's solution worked for me (using angular 8), Use import * as quill from 'quill';
const Quill = quill as any;
// Use quill as normal...
Quill.register(.........); |
[Describe the issue]
quill.d.ts typescript definition file is needed to import quill in typescript projects like angular2
https://typescript.codeplex.com/wikipage?title=Writing%20Definition%20%28.d.ts%29%20Files
example in other project:
https://github.com/moment/moment/blob/develop/moment.d.ts
Version: [version]
1.0-beta-6
The text was updated successfully, but these errors were encountered: