While the CoreMedia Studio code you see at runtime is all JavaScript, CoreMedia Studio is completely written in TypeScript. CoreMedia calls this combination of tools and approach Ext TS, where obviously, "TypeScript" replaces the "JavaScript" in Ext JS.

While Sencha, the vendor of Ext JS, provides basic TypeScript typings for the configuration API of their components in order to use them from other frameworks like React or Angular, CoreMedia/Jangaroo supports the full Ext JS API in TypeScript, generated from the official Sencha Ext JS documentation. With Jangaroo Ext TS, TypeScript source code is compiled to Ext-JS-compatible JavaScript.

Ext TS is designed to provide a statically typed way to implement Ext JS applications. Typed object literals, so-called Config objects, are used to declaratively describe Ext UI components (or component trees). During the build process, Ext TS TypeScript files are compiled to JavaScript using the Ext JS class and Config system.

While it is possible to extend CoreMedia Studio with components written in JavaScript, it is recommended to use Ext TS. With the Jangaroo project, CoreMedia offers tools and libraries that provide complete support for this development approach. All public CoreMedia Studio APIs as well as the original Ext JS API are available as TypeScript *.d.ts files, so that you can set up your IDE to provide code completion, validation and documentation lookup.

This section states the rationale for using Ext TS, gives you a rough overview of the approach and tools, and explains in detail how Ext TS TypeScript sources translate to "pure" Ext JS.

Ext TS: the Typed Version of Ext JS

In contrast to JavaScript and JSON, TypeScript is a typed language. While originally, typed languages were chosen to find errors early at compile time, the more important advantage today is that much better tools can be built to ease and speed up development. In a good IDE, errors and possible mistakes are detected as you type, and the IDE even makes suggestions as to what to type next, how to resolve errors, and lets you look up documentation easily. Using a typed language is important for the IDE to be able to derive what the code is referring to. With an untyped language, only limited IDE support is possible, and the IDE must use more or less imprecise heuristics, and will in many cases make ambiguous (or even erroneous) suggestions.

Source File Types and Compilers

CoreMedia Studio is an Ext TS application and as such uses four different kinds of source files:

The Jangaroo build process invokes the Jangaroo compiler to translate TypeScript source file types to JavaScript and then proceeds to handle all JavaScript files. The compiler is invoked through pnpm and based on Babel.

TypeScript Documentation

The following sections go into the details of some Ext TS concepts. They explain how Jangaroo represents Ext JS concepts in TypeScript and compiles such TypeScript back to Ext JavaScript.