© paseven/Shutterstock.com
JavaScript Kompendium
Teil 3: TypeScript - Interfaces, Klassen und Generics

Objektorientierte Programmierung

TypeScript bietet alle Konstrukte, um objektorientiert zu programmieren. Mit Interfaces und Klassen lässt sich robuster Code schreiben. Dabei bietet TypeScript insbesondere beim Erstellen von Klassen einige interessante Konzepte, die es so in der C#-Welt bisher nicht gibt, wie beispielsweise Parameter Properties. Parameter Properties sind eine Kurzform zum Erstellen einer Property, die direkt mit einem Konstruktorparameter initialisiert wird. Neben den Grundlagen zu Interfaces und Klassen geht dieser Artikel auch auf Generics ein und zeigt zudem, was bezüglich Typen in TypeScript anders ist als in C#.

Thomas Claudius Huber


Artikelserie Teil 1: TypeScript – Grundlagen für .NET-Entwickler Teil 2: Von „number“ über Arrays bis „undefined“ Teil 3: TypeScript – Interfaces, Klassen und Generics Teil 4: TypeScript – Funktionen Teil 5: TypeScript – Module Teil 6: TypeScript – Decorators Teil 7: TypeScript in Angular Teil 1: TypeScript – Grundlagen für .NET-EntwicklerTeil 2: Von „number“ über Arrays bis „undefined“Teil 3: TypeScript – Interfaces, Klassen und GenericsTeil 4: TypeScript – FunktionenTeil 5: TypeScript – ModuleTeil 6: TypeScript – DecoratorsTeil 7: TypeScript in AngularDer JavaScript-Code aus Listing 1 hat den Nachteil, dass an die Methode ein x-beliebiges Objekt übergeben werden kann, da der friend-Parameter keinen Typ hat. Zudem ist ohne Blick auf den Methodenkörper nicht klar, dass der friend-Parameter eine firstName Property und eine optionale lastName Property haben sollte. Es braucht in JavaScript folglich Kommentare zur Dokumentation. In TypeScript kann ein Interface das Problem lösen. Dabei werden optionale Properties mit einem Fragezeichen nach dem Property-Namen deklariert. Listing 2 zeigt das Friend-Interface, dessen lastName Property optional ist. Das Interface lässt sich auf dem Parameter der getFullName-Funktion als Typ angeben. Wird ein Objekt ohne firstName Property an die getFullName-Methode übergeben, führt dies zu einem Compile-Fehler. Darüber hinaus ist der Typ auf dem Parameter sehr aufschlussreich, was an die Funktion zu übergeben ist. Einen Kommentar zur Dokumentation benötigt es nicht. Zudem bietet der Typ alle Infos für Codeeditoren wie Visual Studio Code, um beim Aufruf der Methode IntelliSense für den Parameter anzuzeigen. Das heißt, wird beim Aufruf ein Objekt mit der JSON-Syntax erstellt, zeigt Visual Studio Code IntelliSense für die beiden Properties firstName und lastName.function getFullName(friend) { let fullName = friend.firstName; if(friend.lastName) { fullName += " " + friend.lastName; } return fullName;}interface Friend { firstName: string; lastName?: string;}function getFullName(friend: Friend) { ...}Jetzt lässt sich die getFullName-Funktion wie folgt aufrufen:getFullName({firstName:"Thomas",lastName:"Huber"});getFullName({firstName:"Thomas"});getFullName({}); // Error: firstName fehltKlassen einsetzenSeit ES2015 sind Klassen Teil des JavaScript-Standards. Mit TypeScript lassen sich wie in ES2015 Klassen nutzen und zudem nach ES5 oder ES3 kompilieren [2]. Eine Klasse in TypeScript hat P...

JavaScript Kompendium
Teil 3: TypeScript - Interfaces, Klassen und Generics

Objektorientierte Programmierung

TypeScript bietet alle Konstrukte, um objektorientiert zu programmieren. Mit Interfaces und Klassen lässt sich robuster Code schreiben. Dabei bietet TypeScript insbesondere beim Erstellen von Klassen einige interessante Konzepte, die es so in der C#-Welt bisher nicht gibt, wie beispielsweise Parameter Properties. Parameter Properties sind eine Kurzform zum Erstellen einer Property, die direkt mit einem Konstruktorparameter initialisiert wird. Neben den Grundlagen zu Interfaces und Klassen geht dieser Artikel auch auf Generics ein und zeigt zudem, was bezüglich Typen in TypeScript anders ist als in C#.

Thomas Claudius Huber


Artikelserie Teil 1: TypeScript – Grundlagen für .NET-Entwickler Teil 2: Von „number“ über Arrays bis „undefined“ Teil 3: TypeScript – Interfaces, Klassen und Generics Teil 4: TypeScript – Funktionen Teil 5: TypeScript – Module Teil 6: TypeScript – Decorators Teil 7: TypeScript in Angular Teil 1: TypeScript – Grundlagen für .NET-EntwicklerTeil 2: Von „number“ über Arrays bis „undefined“Teil 3: TypeScript – Interfaces, Klassen und GenericsTeil 4: TypeScript – FunktionenTeil 5: TypeScript – ModuleTeil 6: TypeScript – DecoratorsTeil 7: TypeScript in AngularDer JavaScript-Code aus Listing 1 hat den Nachteil, dass an die Methode ein x-beliebiges Objekt übergeben werden kann, da der friend-Parameter keinen Typ hat. Zudem ist ohne Blick auf den Methodenkörper nicht klar, dass der friend-Parameter eine firstName Property und eine optionale lastName Property haben sollte. Es braucht in JavaScript folglich Kommentare zur Dokumentation. In TypeScript kann ein Interface das Problem lösen. Dabei werden optionale Properties mit einem Fragezeichen nach dem Property-Namen deklariert. Listing 2 zeigt das Friend-Interface, dessen lastName Property optional ist. Das Interface lässt sich auf dem Parameter der getFullName-Funktion als Typ angeben. Wird ein Objekt ohne firstName Property an die getFullName-Methode übergeben, führt dies zu einem Compile-Fehler. Darüber hinaus ist der Typ auf dem Parameter sehr aufschlussreich, was an die Funktion zu übergeben ist. Einen Kommentar zur Dokumentation benötigt es nicht. Zudem bietet der Typ alle Infos für Codeeditoren wie Visual Studio Code, um beim Aufruf der Methode IntelliSense für den Parameter anzuzeigen. Das heißt, wird beim Aufruf ein Objekt mit der JSON-Syntax erstellt, zeigt Visual Studio Code IntelliSense für die beiden Properties firstName und lastName.function getFullName(friend) { let fullName = friend.firstName; if(friend.lastName) { fullName += " " + friend.lastName; } return fullName;}interface Friend { firstName: string; lastName?: string;}function getFullName(friend: Friend) { ...}Jetzt lässt sich die getFullName-Funktion wie folgt aufrufen:getFullName({firstName:"Thomas",lastName:"Huber"});getFullName({firstName:"Thomas"});getFullName({}); // Error: firstName fehltKlassen einsetzenSeit ES2015 sind Klassen Teil des JavaScript-Standards. Mit TypeScript lassen sich wie in ES2015 Klassen nutzen und zudem nach ES5 oder ES3 kompilieren [2]. Eine Klasse in TypeScript hat P...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang