Well, not anymore. With the zk-types NPM package, you can now use TypeScript to customize the ZK 10 frontend with an experience similar to programming in Java.
Benefits of TypeScript
Reliable auto-completion; one doesn’t have to wade through API references on the Web.
Easy code navigation by clicking on names instead of searching the whole codebase.
Eliminate typos (e.g., misspelling isAlign as isalign) and mismatching types (passing a string when a number is expected).
Safe inter-op between various module systems (ESM, CommonJS, SystemJS AMD, and global UMD). One can even import a JSON file directly as a type-safe object.
Enable type-aware lint rules. This allows us to craft custom ESLint rules to enforce project wide conventions which can also be automatically fixed by the linter.
Automatic link validation and name/type matching in JSDoc, ensuring stronger synchronization between the documentation and the actual code.
These are the vast improvements we experienced first-hand on a daily basis while working with TypeScript. All in all, TypeScript enables an enormous amount of automated validations and automatic corrections that make ZK 10 easy and safer to use.
zk-types is Optional and Backward-compatible
ZK-types is a new way to customize the ZK 10 frontend that brings smart IDE feedbacks and a more Java-like programming experience.
[Since ZK 10]
ZK10 + TypeScript with zk-types
Having reaped the benefits of a statically-typed ZK framework, we would like to share the gospel with you so that you can enjoy the same benefits when customizing the frontend. See the demo at zk-types-demo. The setup is minimal, but you can also just clone the demo:
Open a new project.
Get the types with: npm install zk-types
Install TypeScript with: npm install typescript
Create the template TypeScript configuration: npx tsc --init
Compile the .ts file with npx tsc (do not specify the filename). You should see an emitted .js file. Copy the .js file to wherever appropriate.
Visual Studio Code and IntelliJ IDEA Ultimate are known to support TypeScript out-of-the-box. IntelliJ IDEA Community does not; please read the this announcement. You will have the best experience when using the supported IDEs.
Exemplary Features of zk-types
Prefer ES6+ syntax, as transpilation, down-leveling, and polyfills will be automatically done.
Replace ad-hoc conventions with first-class language features. The most significant being the deprecation of the zk.$extends pattern in favor of ES6 classes.
Provide a painless deprecation story. Despite replacing zk.$extends with ES6 classes throughout the codebase, we made sure that zk.$extends (1) works as it previously did, (2) can successfully inherit from ES6 classes, (3) allows ES6 classes to successfully inherit from it, and (4) type-annotated in detail.
Aim for null-safety. We made infrequent and consistent the use of null, undefined, uninitialized variables, and optional parameters.
Use generics to model the DOM element type of zk.Widget and the value type of zul.inp.InputWidget.
Narrow down the specification of types. E.g., specify HTMLDivElement instead of the wider HTMLElement, and prefer concrete types to any or unknown.
Take, for instance, zk.augment, the type-safe successor of zk.override. The return value of zk.augment backs up the overridden properties of its first argument, and the return types are designed to automatically narrow down to only those overridden properties. In the illustration below, the overridden properties are the methods _init and hasNext. In fact, the method signatures are also auto-inferred as shown in the auto-complete popup: hasNext(): boolean. How convenient!
The overall zk-types experience is immediate, reliable, accurate, and delightful. We invite you to try out this new approach and let us know what you think!