Typings for TypeScript

[ssougnez]

Hi,

I'm currently using ckeditor5 in TypeScript and I think it would be pretty usefull to ship typings definition. Is there something planed about this? I think it should be possible to auto generated them based on the JS files.

EDIT (by @Reinmar, 07.04.2023): It's out! 🚀 Read more in #504 (comment).

EDIT (by @filipsobol, 22.03.2023): The TypeScript migration is at the finish line. Alpha release of version 37 with typings is already out and being tested. We have updated our Vue integration and are in the process of updating React and Angular. You can follow the progress here: #11704.

EDIT (by @Reinmar, 23.08.2022): It's happening. We're migrating to Typescript 🎉 Having official typings is the main goal of the migration.

---

If you'd like support for TypeScript to be introduced react with 👍 to this post.

[Reinmar]

Quoting myself from #347 (comment):

We maintain a very thorough API documentation (JSDoc-based notation) so it should not be hard to generate type definitions and maintain them in https://github.com/DefinitelyTyped/DefinitelyTyped.

I agree that it'd be great if typings were available. But we won't be able to work on that now. I wonder, though, how much work it requires, in general, to produce those typings out of JSDoc comments. The problem in our case may lay in the fact that JSDoc didn't work well for ES6 so we came out with https://www.npmjs.com/package/@ckeditor/jsdoc-plugins – a set of plugins which fix stuff after JSDoc and extend it to better work in our case.

[nadavsinai]

Typescript definitions would greatly help our cause of developing with ckeditor5 platform

[Reinmar]

@ma2ciek I know you made some work on running our source code through TypeScript compiler and using current documentation as type definitions. Could you write here a short summary? Is that feasible? How much work would it be needed?

[ma2ciek]

To sum up that thread, it's possible to use TS compiler to check our JavaScript code by taking advantage of JSDoc our comments. So once our code whole codebase will be type-checked it should be possible to generate proper TS declaration files for every file. But note that the PR that allows generating declaration files from JS code is still an open issue and the TS team is waiting for the community PRs (we can also try the mentioned dts-gen project but IMO it'd be better to wait for the official option).

According to changes needed to bring that type-checking and be somehow TS-compatible, we'd to need to work on:

• converting all module: syntax to normal imports (I assume that the ESlint might complain about unused imports, but maybe there's some plugin for that, dunno) or to the relative import() syntax and add some changes to our JSDoc plugins so it could work properly with that syntax (not sure how much work it'd be needed)
• checking whether our mixins could be understandable by TS - TS supports only single inheritance, but there could be some ways to mimic that effect.
• checking whether the caught errors from JS files are highlighted in all IDEs we use.
• fix all incorrect typedefs, interfaces, types, etc. in the existing code (like that one).

It's hard to tell exactly how much work is needed, IMO it's better to check all potential blockers first.

[jodator]

• checking whether our mixins could be understandable by TS

Shouldn't the interfaces be used for mixins? Instead of

/**
 * @mixes MixinFoo
 * @mixes MixinBar
 */

write:

/**
 * @implements InterfaceFoo
 * @implements InterfaceBar
 */

ps.: TS docs about mixins: https://www.typescriptlang.org/docs/handbook/mixins.html

[ma2ciek]

@jodator, we could use just interfaces, but then the class would need to implement all these interfaces anyway (Otherwise TS will complain). So that's not an option IMO. Yep, I've seen that part about mixins, but we can't do that in many cases as it's massive code duplication (we'd need to mock every property and method for every interface that we need to implement).

[ghost]

To sum up that thread, it's possible to use TS compiler to check our JavaScript code by taking advantage of JSDoc our comments. So once our code whole codebase will be type-checked it should be possible to generate proper TS declaration files for every file. But note that the PR that allows generating declaration files from JS code is still an open issue and the TS team is waiting for the community PRs (we can also try the mentioned dts-gen project but IMO it'd be better to wait for the official option).

[...]

Just stumbled upon this. FYI the issue about allowing generation of typing from JavaScript was merged a few weeks ago, although it looks like it wasn't officially released yet. It'll probably be included in the 3.7 release. (TypeScript 3.7 Iteration Plan)

[CrazyAdmin]

Please/ TypeScript support is very important for use in project. Please implement base Types support

[IonelLupu]

Do you have any plans of rewriting this in Typescript?

[ma2ciek]

Hi @IonelLupu,

There're plans to either rewrite to TS or to use JSDoc annotations and generate declaration files out of them, but I can't guarantee when it happens and if it happens.

See #1415.

[SolidZORO]

@Reinmar @ma2ciek

I recently developed a plugin for CKEditor5 and found that it is really inconvenient to not have TS type files. Although CKEditor5 has a very complete API manual, but the manual is not as convenient and timely as TS type. I know that rewriting CKEditor5 with TS is very difficult, but I think If you want to write a TS type, it is relatively simple, even if all types use any, so I know at least those Methods or Properties are available. thank you for developing such a good and easy-to-use Editor. Grateful！

[laxusgooee]

I have used CKEditor all my life, I can't believe i looking up alternatives because of Typings support.

[popuguytheparrot]

Hi. What about react typings?

[mmichaelis]

Short update regarding DefinitelyTyped:

You may have observed, that typings for DefinitelyTyped got updated recently by @fedemp, and a lot of more typings got added (see closed and pending PRs).

But as JSDoc of CKEditor comes with flaws, these typings carry on and enhance the flaws (like for example properties marked as readonly in JSDoc, but which require to be writeable by extending classes).

Currently, we handle this by bug-reports at DefinitelyTyped, but perhaps the better way to go is to report a bug regarding JSDoc here. This would be an immediate gain for JavaScript developers, as well as the TypeScript community, which is in need of easy to rebuilt typings from existing sources.

[0biWanKenobi]

Hi, what about Vue typings?

[jperg2tami]

Need typings!

[fedemp]

If you all want typings for Typescript, please help by approving PRs .e.g DefinitelyTyped/DefinitelyTyped#57571

[rsuardi]

Need typings!

[johnmanko]

npm i --save-dev @types/ckeditor__ckeditor5-build-classic
npm i --save-dev @types/ckeditor__ckeditor5-build-balloon

[nadavsinai]

npm i --save-dev @types/ckeditor__ckeditor5-build-classic
npm i --save-dev @types/ckeditor__ckeditor5-build-balloon

are these official? why not add them to each package ?

[mmichaelis]

npm i --save-dev @types/ckeditor__ckeditor5-build-classic
npm i --save-dev @types/ckeditor__ckeditor5-build-balloon

are these official? why not add them to each package ?

IIRC, they are not official (thus, by CKEditor-team) but a contribution. Anyone could provide more packages. Unfortunately, they are also not always in sync with the actual implementation – most of the time, it is the JSdoc to blame, which provides wrong details. That's why I sometimes report such JSdoc issues to CKEditor, hoping for better generated typings next time.

[fedemp]

If somebody has some minutes, know enough about CKEditor, and can test some types, these PR's need approval.

https://github.com/DefinitelyTyped/DefinitelyTyped/pulls?q=is%3Aopen+is%3Apr+author%3Afedemp+draft%3Afalse

[Jake-Thomas-Hall]

Hey,

Following the points from this thread, I implemented an example of how to use ckeditor in Angular.

To be clear, for most scenarios you'd probably just want to use ckeditor's regular Angular component - but this shows how you can actually use the editor without needing that component, if you need that for whatever reason.

It also includes @types/ckeditor__ckeditor5-build-classic in order to allow intellisense, since that would be very helpful if you want to use ckeditor in this way.

Repo: Jake-Thomas-Hall/ckeditor-angular-example

[Reinmar]

Some good news, everyone: #11704 :)

[Reinmar]

Some status update.

We're doing a good progress migrating packages. We covered more than 50% of them, including all the core ones (that are by far the biggest ones). So in general, it feels like we're 75% done.

Once all packages are migrated, we'll start publishing the types to npm. So far, those are omitted as they would be incomplete.

Keep your fingers crossed, TS is coming 🏃

[Reinmar]

Some good news :)

✅  We migrated all the code already.

🚀  And released 37.0.0-alpha.0 of all open source CKEditor 5 packages. This version introduces typings for all these packages.

More information: #11704 (comment)

[filipsobol]

TypeScript migration at the finish line 🏃

Since last update from @Reinmar, we have released new alpha versions that improve types and fix bugs. We also released an alpha of our Vue integration and are in the process of updating the React and Angular integrations. For more detailed updates, you can follow our progress here: #11704.

So far we are quite happy with the results, but any feedback would be greatly appreciated.

[filipsobol]

Alpha versions of the React and Angular integrations are now also available. See #11704 for more details.

[arkflpc]

Hi everyone,

I am happy to announce that we have completed the migration of CKEditor5 project to TypeScript! We appreciate all the feedback that we received from the community during this process.

For those who are interested, we have documented the migration steps in our documentation (here). We have also created a separate documentation on how to use CKEditor5 in TypeScript projects (here).

We would like to invite everyone to provide their feedback in our other ticket (#12027) where we will track our future improvements.

Moving forward, we plan to update CKEditor5 Online Builder and ckeditor5-package-generator to use TypeScript, make typings work with DLLs, migrate the inspector to TS, update our Contribution Guide and other documentation to reflect that it is now a TypeScript project, and other miscellaneous stuff.

Thank you all for your continued support and contributions.