Features und Nutzung

Features

TypeScript lässt sich als Obermenge („strict superset“) zu ‚ECMAScript 2015‘ definieren, was wiederum eine Obermenge zu ‚ECMAScript 5‘, der Vorgängerversion, ist. So bietet es viele Features über das Repertoire von JavaScript hinaus, wobei manche in ‚ECMAScript 2015‘ ebenfalls übernommene Konstrukte sind, die für ältere JavaScript-Versionen zur Verfügung gestellt werden („Backport“).

Erweiterungen zu ‚ECMAScript 2015‘:

  • Methodensignatur Prüfung zu Kompilierzeit

  • Typinferenz

  • Type Erasure

  • Interfaces

  • Aufzählungstypen

  • Generische Programmierung

  • Namensräume

  • Tupel

  • Async/Await

Backport von ‚ECMAScript 2015‘:

  • Klassen

  • Module

  • Arrow-Syntax für anonyme Funktionen

  • Optionale Parameter und Standardparameter

[TS] [JS]

Typisierung

Der Namensgebende Hauptpunkt ist die Typisierung, welche beispielsweise durch die Methodensignaturen ermöglicht wird. Diese wird beim transpilieren in JavaScript geprüft, wodurch Typsicherheit gewährleistet werden kann.

[TS] [JS]

Nutzung und Kompatibilität

Typescript wird, der Nutzung von JavaScript folgend, vor allem in Browsern für Clientseitige Funktionalitäten von Webseiten genutzt. Jedoch findet es auch sonst immer mehr Anwendung, wenn JavaScript eine Rolle spielt, wie beispielsweiße bei der plattformunabhängigen Laufzeitumgebung `Node.js <NodeJS_>`__, welche JavaScript-Code unter Anderem auch serverseitig einsetzbar macht.

[TS] [JS] [NodeJS]

Transpiler

Während korrekter JavaScript-Code, aufgrund der Obermengen-Beziehung, auch immer valider TypeScript-Code ist, müssen Programme umgekehrt zunächst in JavaScript übersetzt werden. Dies wird vom Typescript-Transpiler, oder verschiedenen ähnlichen Tools, übernommen. Standardmäßig generiert der Typescript-Transpiler Code in der Version ‚ECMAScript 5‘, jedoch kann optional auch auf ‚ECMAScript 3‘ oder ‚ECMAScript 2015‘ umgestellt werden.

Während Typescript zunächst Ahead Of Time in JavaScript-Code transpiliert wird, wird dieser JavaScript-Code dann meist Just In Time im Browser kompiliert.

Bemerkung

Der Begriff Transpiler weist darauf hin, dass es sich um eine Umwandlung zwischen zwei Programmiersprachen, auf ungefähr dem selben Abstraktionslevel, handelt. Im Gegensatz dazu übersetzen Compiler den Code in ein niedrigeres Abstraktionslevel.

[TS] [JS] [Transpiler] [JIT]

Typ-Definitions-Dateien

Da Typescript die direkte Zusammenarbeit von Typescript-Code und JavaScript-Code ermöglicht, kann man auch externe Bibliotheken nutzen. Diese lassen sich genau so direkt nutzen, wie wenn die Entwicklung in JavaScript stattfinden würde.

Um JS-Bibliotheken in Typescript jedoch mit allen Vorteilen der Typisierung nutzen zu können, ohne diese neu implementieren zu müssen, gibt es die Möglichkeit Definitions-Dateien zu erstellen, welche die nötigen Typdefinitionen für die Nutzung der Bibliothek vorgeben. Diese Definitionen sind für bekannte Bibliotheken, wie `jQuery <jQuery_>`__ oder `Node.js <NodeJS_>`__, sowie auch für viele kleinere Projekte, meist von Dritten bereits erstellt, und zur Verfügung gestellt.

DefinitelyTyped

Das GitHub-Repository DefinitelyTyped_ ist eine klare Empfehlung, um herauszufinden ob für ein bestimmtes Projekt bereits diese Typescript-Definitionen vorhanden sind, um diese in eigene Projekt einbinden zu können. `jQuery-Definitions-Datei <jQuery-Def_>`__ und `Node.js-Definitions-Datei <NodeJS-Def_>`__

So sieht beispielsweiße die erste Definition der jQuery-Funktion on() aus:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jquery/JQuery.d.ts#L7613
7613    /**
7614     * Attach an event handler function for one or more events to the selected elements.
7615     * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
7616     * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the
7617     *                 selector is null or omitted, the event is always triggered when it reaches the selected element.
7618     * @param data Data to be passed to the handler in event.data when an event is triggered.
7619     * @param handler A function to execute when the event is triggered.
7620     * @see \`{@link https://api.jquery.com/on/ }\`
7621     * @since 1.7
7622     */
7623    on<TType extends string,
7624       TData>(
7625        events: TType,
7626        selector: JQuery.Selector,
7627        data: TData,
7628        handler: JQuery.TypeEventHandler<TElement, TData, any, any, TType>
7629    ): this;

Es müssen die verschiedensten Möglichkeiten mit verschiedenen Parametertypen beachtet und extra definiert werden.

Zum Beispiel kann für den Parameter selector auch null und undefined übergeben werden:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jquery/JQuery.d.ts#L7630
7630    /**
7631     * Attach an event handler function for one or more events to the selected elements.
7632     * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
7633     * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the
7634     *                 selector is null or omitted, the event is always triggered when it reaches the selected element.
7635     * @param data Data to be passed to the handler in event.data when an event is triggered.
7636     * @param handler A function to execute when the event is triggered.
7637     * @see \`{@link https://api.jquery.com/on/ }\`
7638     * @since 1.7
7639     */
7640    on<TType extends string,
7641       TData>(
7642        events: TType,
7643        selector: null | undefined,
7644        data: TData,
7645        handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, TType>
7646    ): this;

Wenn beispielsweiße die Verwendung eines Typs veraltet ist, kann sich natürlich auch die zugehörige Dokumentation unterscheiden:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jquery/JQuery.d.ts#L7647
7647    /**
7648     * Attach an event handler function for one or more events to the selected elements.
7649     * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
7650     * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the
7651     *                 selector is null or omitted, the event is always triggered when it reaches the selected element.
7652     * @param data Data to be passed to the handler in event.data when an event is triggered.
7653     * @param handler A function to execute when the event is triggered.
7654     * @see \`{@link https://api.jquery.com/on/ }\`
7655     * @since 1.7
7656     * @deprecated ​ Deprecated. Use \`{@link JQuery.Event }\` in place of \`{@link JQueryEventObject }\`.
7657     */
7658    on(events: string,
7659       selector: JQuery.Selector | null | undefined,
7660       data: any,
7661       handler: ((event: JQueryEventObject) => void)): this;

[TS] [jQuery] [NodeJS] [DefinitelyTyped] [jQuery-Def] [NodeJS-Def]