Fachbücher kompakt zusammengefasst

    TypeScript: Grundlagen und Vorteile

    Inhalt

    1. Grundlagen TypeScript
    2. Vorteile der Typisierung
    3. Beispiele der Typisierung
      1. Variablen-Deklaration und Initialisierung
      2. Array-Deklaration und Initialisierung
      3. Klassen-Deklaration und Initialisierung ihrer Eigenschaften
      4. Methoden und die Initialisierung ihrer Parameter und Rückgabewerte
      5. Konstruktor-Methode
    4. Wichtige Features
      1. Arrow-Function
    5. Glossar

    1. Grundlagen TypeScript

    TypeScript ist eine statisch typisierte Skriptsprache, die das Design von JavaScript enthält, auch als Obermenge von ihr bezeichnet wird, mit der JavaScript um weitere Features ergänzt wird. Der große Unterschied und insbesondere der wesentliche Vorteil besteht darin, dass TypeScript über ein Typsystem verfügt, ähnlich wie C++, Java oder Python.

    Dass heißt, dass Variablen, Funktionsparameter, Rückgabewerte mit einem bestimmten Typ (string, number, boolean …) definiert werden, was in JavaScript nicht notwendig, bzw. nicht möglich ist.

    Kompiliert erhält man aus den TypeScript-Dateien, die mit der Endung .ts erstellt werden, wieder JavaScript. Denn TypeScript-Code ist nicht im Browser lauffähig und muss mit dem TypeScript-Compiler transpiliert, also in eine andere Sprache übertragen werden.

    2. Vorteile der Typisierung

    Die konkreten Vorteile gegenüber nicht typisierten Sprachen wie JavaScript sind:

    2.1 die Lesbarkeit wird für den Entwickler erhöht
    Für uns Entwickler ist der Code zudem verständlicher und lesbarer. Variablen, Funktionsparametern und Rückgabewerten kann der Einsatz oder die Verwendung besser schon bei der Definition angesehen werden.

    2.2 Laufzeitfehler können während der Entwicklung besser ermittelt werden
    Durch Programmierfehler auftretende Laufzeitfehler können noch vor der Ausführung im Browser ermittelt werden.

    2.3 weniger Laufzeitfehler während der Entwicklung
    Dadurch werden folgend aktiv Laufzeitfehler vermieden, was die Entwicklung effizienter macht.

    2.4 die Code-Analyse verläuft präziser
    Das bedeutet für die Arbeit mit der IDE eine bessere Code-Vervollständigung, bessere Navigation zwischen den Methoden und Klassen und Refactoring-Unterstützung (Refactoring).

    3. Beispiele der Typisierung

    Die Typisierung von Variablen, Funktionsparametern, Rückgabewerten zeige ich anhand einiger Beispiele. Dazu gehört auch kurz die Erwähnung der Klassen-Deklarartion und der Konstruktor-Methode:

    3.1 Variablen-Deklaration und Initialisierung

    TypeScript
    
    const city: string = 'London';
    const capital: boolean = true;
    const population: number = 9000000;
    JavaScript
    
    const city = 'London';
    const capital = true;
    const population = 9000000;

    3.2 Array-Deklaration und Initialisierung

    TypeScript
    
    const cities: string[] = ['London', 'Manchester', 'Newcastle']
    JavaScript
    
    const cities = ['London', 'Manchester', 'Newcastle']

    3.3 Klassen-Deklaration und Initialisierung ihrer Eigenschaften

    Klassen enthalten drei Hauptbestandteile, die Eigenschaften, die Methoden und den Konstruktor. Eigenschaften können noch mit den Zugriffsmodifizierern public, private, static, protected und readonly deklariert werden, wobei public als Default-Wert gesetzt wird.

    TypeScript
    
    class City {
      name: string;
      capital: boolean;
      population: number;
    }

    3.4 Methoden und die Initialisierung ihrer Parameter und Rückgabewerte

    Methoden werden als Funktionen von Klassen bezeichnet. Ihnen können Parameter und Rückgabewerte übergeben werden, die genauso wie Variablen, typisiert werden können.

    TypeScript
    
    class City {
      ...
      populationGrowth(nextYear: number): number {
        this.population += nextYear;
        return this.population;
      }
    }

    3.5 Konstruktor-Methode

    Die Konstruktor-Methode wird genutzt, um Eigenschaften für den späteren Einsatz zu deklarieren.

    TypeScript (Basisschreibweise)
    
    class City {
      private population: number;
    
      constructor(population: number) {
        this.population = population;
      }
    }
    
    const myPopulation = new City(9500000);
    TypeScript (Kurzschreibweise)  
    
    class City {   
      constructor(private population: number) {} 
    }

    4. Wichtige Features

    4.1. Arrow-Functions

    Eine Arrow-Function, auch Lambda-Function genannt, ist eine anonyme Funktion und kann mit dem Pfeil (=>) in Kurzschreibweise in einer Zeile geschrieben werden. Die folgenden vier Varianten können verwendet werden, wobei die vierte die mittlerweile bekannte Schreibweise in TypeScript und damit auch in Angular ist:

    1. Variante
    
    function (population) {
      return population * 2; 
    }
    2. Variante
    
    (population) => {
      return population * 2; 
    }
    3. Variante
    
    population => {
      return population * 2; 
    }
    4. Variante  
    
    population => population * 2;

    5. Glossar

    varVariablen-Deklaration mit Gültigkeitsbereich innerhalb einer Funktion
    letVariablen-Deklaration mit Gültigkeitsbereich innerhalb eines Blocks (z.B. innerhalb einer For-Schleife)
    constVariablen-Deklaration einer Konstante, deren Wert im Programm nicht veränderbar ist
    Deklarationeine Variable wird mit var, let oder const für einen Gültigkeitsbereich festgelegt und typisiert (z.B. let username: string;)
    Initialisierungeiner Variable wird ein Wert entsprechend ihres Typs zugewiesen (z.B. username = ‚Michael‘;)
    Typinferenzeine Variable wird in einer Zeile deklariert und initialisiert, da TypeScript den Typ anhand des Wertes automatisch erkennt (z.B. population = 9000000;)

    Neueste Beiträge

    Angular: die wichtigsten Begriffe ausführlich erklärt

    Inhalt Begriffe in Angular und ihre BedeutungAllgemeinLifecycle-Hooks 1. Begriffe in Angular und ihre Bedeutung

    TypeScript: Grundlagen und Vorteile

    Inhalt Grundlagen TypeScriptVorteile der TypisierungBeispiele der TypisierungVariablen-Deklaration und InitialisierungArray-Deklaration und InitialisierungKlassen-Deklaration und Initialisierung ihrer EigenschaftenMethoden und die Initialisierung...

    JavaScript: Objekte erzeugen und Values abrufen

    Inhalt Grundlagen ArraysGrundlagen ObjekteObjekt mit enthaltenen ArraysObjekt mit verschachtelten Arrays 1. Grundlagen Arrays

    Ionic (V4): Bewährte User Interface Komponenten einfach implementieren

    Inhalt Anforderungen, um mit Ionic (V4) zu entwickelnImplementierung ausgewählter Komponenten ausführlich erklärt 1. Anforderungen, um...

    Git und die wichtigsten fortgeschrittenen Techniken

    Inhalt Schnelleinstieg - Befehle fortgeschrittener TechnikenKann man aus Git noch mehr herausholen?Fortgeschrittene Techniken ausführlich erklärt

    Ähnliche Beiträge

    Kommentar schreiben

    Deinen Kommentar abschicken
    Gebe bitte deinen Namen ein