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;)

© All rights reserved.

Supported by