– und zwar überall. Variablen mit var »fressen« sich durch alle Blöcke hindurch und sind in der gesamten Funktion und in allen darin verschachtelten Blöcken und Funktionen verfügbar. Das folgende Codebeispiel zeigt zwei Implementierungen, die zum exakt selben Ergebnis führen:
function foobar(foo) {
if (foo) {
var bar = 'angular';
}
// bar = 'angular'
};
function foobar(foo) {
var bar;
if (foo) {
bar = 'angular';
}
// bar = 'angular'
};
Es ist egal, ob wir die Variable innerhalb der if-Verzweigung deklarieren oder außerhalb – sie ist überall gültig. Diese Eigenschaft führt in der Praxis schnell zu Kollisionen von Variablen aus verschiedenen Programmteilen. Um das zu verhindern, wurde häufig auf ein Hilfskonstrukt zurückgegriffen: Der Code wird in eine Funktion gekapselt, die sofort ausgeführt wird, eine sogenannte Immediately-Invoked Function Expression (IIFE). Tatsächlich ist dieser Weg alles andere als schön – war aber lange die »schmerzhafte var-heit« im Alltag der Webentwicklung.
Blockgebundene Variablen mit let
Mit Einführung von ECMAScript 2015 hielt der Variablentyp let Einzug in die Webentwicklung. Mit let lassen sich blockgebundene Variablen definieren. Sie sind nicht in der gesamten Funktion gültig, sondern lediglich innerhalb des Blocks, in dem sie definiert wurden. Im nachfolgenden Beispiel ist also die Variable i nur innerhalb der for-Schleife gültig – so wie man es von einer Variable auch erwarten mag:
for (let i = 0; i < 4; i++) {
// ...
}
// i = undefined
Konstanten mit const
Variablen, die mit var oder let eingeleitet werden, lassen sich jederzeit überschreiben. Häufig ändert sich der Wert einer Variable allerdings nach der Initialisierung nicht mehr. Für solche Fälle gibt es Konstanten. Sie werden mit dem Schlüsselwort const eingeleitet. Wird eine Konstante einmal festgelegt, so lässt sich der Wert nicht mehr überschreiben. Konstanten müssen deshalb auch immer sofort mit einem Wert initialisiert werden:
const foo = 'angular';
// TypeError: Assignment to constant variable.
foo = 'javascript';
// SyntaxError: Missing initializer in const declaration
const bar;
Vorsicht ist allerdings geboten bei Variablen, die ein Objekt oder Array enthalten. Objekte und Arrays werden in JavaScript nur anhand ihrer Speicherreferenz identifiziert. Das bedeutet, dass eine const-Variable nur die Referenz auf das Objekt konstant speichert, wir den Inhalt aber trotzdem verändern können. Der folgende Code ist gültig:
const myObject = { title: 'Angular', year: 2016 };
myObject.year = 2020;
const myArray = [1, 2, 3];
myArray.push(4);
Um gut wartbaren Code zu erhalten, sollten Sie vermeiden, direkt den Wert eines Objekts zu verändern. Ein saubererer Weg ist es, ein Objekt oder Array als unveränderlich (engl. immutable) zu behandeln und bei einer Änderung immer eine Kopie zu erzeugen. Darauf gehen wir gleich im Kontext des Spread-Operators genauer ein.
const, let, var – wann nutze ich welche?
Mit drei verschiedenen Variablenarten stellt sich schnell die Frage, wann welche Art eingesetzt werden sollte. Als Faustregel können Sie sich daher Folgendes merken:
Nutzen Sie zunächst immer const.
Wollen Sie den Wert später im Programm verändern, wählen Sie let.
Nutzen Sie nicht var, denn Sie werden es nicht benötigen.
4.3Die wichtigsten Basistypen
Die starke Typisierung ermöglicht es, die API eines Moduls genau zu beschreiben. Bereits während der Entwicklung können dem Entwickler Informationen und Warnungen bereitgestellt werden, wenn die API nicht korrekt verwendet wird. Die Basistypen von TypeScript möchten wir Ihnen in diesem Abschnitt vorstellen.
Primitive Typen: Zahlen, Zeichenketten und boolesche Werte
Die wichtigsten primitiven Typen in TypeScript sind number, string und boolean. Der Typ number legt den zu verwendenden Wert einer Variable auf eine Ganz- oder Kommazahl fest, es gibt keine weiteren Typen für Zahlen. Wir können den Typ der Variable danach nicht ändern, und die Zuweisung eines Strings zur Variable age schlägt fehl. Zeichenketten werden mithilfe des Typen string zur Verfügung gestellt. Wenn eine Variable nur logische Wahrheitswerte (true oder false) annehmen soll, so empfiehlt sich der Typ boolean. Ein Typ wird immer mit einem Doppelpunkt hinter dem Variablennamen deklariert.
let age: number = 5;
const height: number = 10.5;
const firstname: string = 'Erika';
const isVisible: boolean = true;
// Type '"foo"' is not assignable to type 'number'
age = 'foo';
Typisierte Arrays
In JavaScript ist es möglich, ein Array mit verschiedenen Typen zu befüllen.
const myArray = [
0, // Zahl
'foo', // String
{ firstname: 'Erika' } // Objekt
];
Listing 4–1 JavaScript-Array mit unterschiedlichen Typen
Typisierte
