Angular basiert auf TypeScript, einer Obermenge von JavaScript, die Typsicherheit einführt und es Entwicklern ermöglicht, potenzielle Fehler während der Entwicklung und nicht erst zur Laufzeit zu erkennen. Für Entwickler, die mit TypeScript vertraut sind, wird dies eine vertraute Landschaft sein, aber wenn Sie neu bei TypeScript sind, werfen wir einen Blick auf einige seiner wichtigsten Funktionen, darunter statische Typisierung, Schnittstellen, Klasseneigenschaften und Zugänglichkeitsebenen (z. B. öffentlich und privat). Diese Funktionen werden während Ihrer Reise in die Angular-Entwicklung von entscheidender Bedeutung sein.

1. Statisches Tippen

Eine der Kernfunktionen von TypeScript ist die statische Typisierung. Im Gegensatz zu JavaScript, wo Variablen Werte jeden Typs enthalten können, können Sie mit TypeScript die Typen von Variablen, Eigenschaften und Parametern explizit angeben.

In einfachem JavaScript könnten Sie Variablen wie folgt deklarieren:

let name = "Whiskers";
let age = 5;

In TypeScript können Sie Datentypen erzwingen, indem Sie sie zur Variablendeklaration hinzufügen:

let name: string = "Whiskers";
let age: number = 5;

Mit diesem Setup stellt TypeScript sicher, dass der Name immer eine Zeichenfolge und das Alter immer eine Zahl ist. Wenn Sie versuchen, einen ungültigen Wert zuzuweisen, z. B. eine Zeichenfolge für das Alter, gibt der TypeScript-Compiler einen Fehler aus und der Code wird nicht kompiliert.

Dies trägt dazu bei, potenzielle Fehler in Ihrem Code zu verhindern, indem Fehler während der Entwicklung erkannt werden, wodurch Sie mehr Vertrauen in die Korrektheit Ihres Codes haben.

2. Schnittstellen

In TypeScript ermöglichen Ihnen Schnittstellen, die Form eines Objekts zu definieren. Das bedeutet, dass Sie die erforderlichen Eigenschaften und deren Typen angeben können und TypeScript sicherstellt, dass jedes dieser Schnittstelle zugewiesene Objekt der Form entspricht.

Lassen Sie uns beispielsweise eine Schnittstelle für ein Cat-Objekt definieren:

interface Cat {
    name: string;
    age: number;
    breed?: string; // optional property
}

Wenn Sie nun ein Katzenobjekt erstellen, muss es dieser Schnittstelle entsprechen:

const fluffy: Cat = {
    name: "Fluffy",
    age: 3
};

In diesem Fall sind Name und Alter Pflichtfelder, die Rasse ist jedoch aufgrund des ? optional. Wenn Sie versuchen, ein Cat-Objekt zuzuweisen, das nicht der Schnittstelle entspricht, meldet TypeScript das Problem:

const wrongCat: Cat = {
    name: "Whiskers",
    // missing 'age' property
};

Sie können Eigenschaften auch optional machen, indem Sie das ? verwenden. Symbol, das bei Bedarf Flexibilität ermöglicht, aber dennoch die Typsicherheit aufrechterhält.

3. Klasseneigenschaften

TypeScript-Klassen ähneln JavaScript-Klassen, verfügen jedoch über zusätzliche Typsicherheit und Funktionen. Beispielsweise können Sie Typen für Klasseneigenschaften explizit deklarieren:

class Cat {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

Dadurch wird sichergestellt, dass der Name immer eine Zeichenfolge und das Alter immer eine Zahl ist. Darüber hinaus können Sie Eigenschaften definieren, ohne sie im Konstruktor zu initialisieren:

class Cat {
    name: string;
    breed?: string;
}

TypeScript stellt sicher, dass diese Eigenschaften den von Ihnen deklarierten Typen entsprechen, wodurch Ihr Code vorhersehbarer und einfacher zu debuggen ist.

4. Öffentliche und private Zugänglichkeit

Eine weitere wichtige Funktion in TypeScript ist die Möglichkeit, den Zugriff auf Klassenmitglieder (Eigenschaften und Methoden) mithilfe öffentlicher und privater Zugriffsmodifikatoren zu steuern. Standardmäßig sind alle Klassenmitglieder sowohl in JavaScript als auch in TypeScript öffentlich, sodass von überall aus auf sie zugegriffen werden kann. Sie können Klassenmitglieder jedoch explizit als privat markieren, um ihren Zugriff auf innerhalb der Klasse zu beschränken.

Zum Beispiel:

class Cat {
    public name: string;
    private age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    speak() {
        return `Meow! I am ${this.name}`;
    }
}

In diesem Beispiel ist die Namenseigenschaft öffentlich, sodass außerhalb der Klasse auf sie zugegriffen werden kann. Die Alterseigenschaft ist jedoch privat, sodass nur innerhalb der Klasse selbst auf sie zugegriffen werden kann.

const whiskers = new Cat("Whiskers", 5);
console.log(whiskers.name); // Works fine
console.log(whiskers.age); // Error: 'age' is private

Die Verwendung von private gewährleistet die Kapselung und verhindert versehentliche Änderungen oder den Zugriff auf vertrauliche Klassendaten von außerhalb der Klasse.

5. Konstruktor-Kurzschrift

TypeScript bietet eine praktische Abkürzung zum Deklarieren und Initialisieren von Eigenschaften über den Konstruktor. Anstatt Eigenschaften manuell zu deklarieren und im Konstruktor zuzuweisen, können Sie sie direkt in der Parameterliste des Konstruktors deklarieren.

Hier ist ein einfaches Beispiel:

class Cat {
    constructor(public name: string, private age: number) {}
}

Dieser Code entspricht funktional dem Folgenden:

class Cat {
    public name: string;
    private age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

Die Konstruktor-Kurzschrift vereinfacht den Code und reduziert Wiederholungen. TypeScript generiert automatisch die erforderlichen Eigenschaftsdeklarationen und Zuweisungen, sodass Sie keinen zusätzlichen Code schreiben müssen.

Abschluss

In diesem Artikel haben wir einige der wichtigsten TypeScript-Funktionen behandelt, die Ihnen bei der Angular-Entwicklung häufig begegnen:

• Statische Typisierung stellt sicher, dass Ihre Variablen, Eigenschaften und Parameter konsistente Typen haben.
• Schnittstellen ermöglichen es Ihnen, die Form von Objekten zu definieren und so Ihrem Code weitere Struktur hinzuzufügen.
• Klasseneigenschaften geben Ihren Klassen explizite, typsichere Deklarationen für Felder.
• Öffentliche und private Zugänglichkeit gewährleistet den kontrollierten Zugriff auf Klassenmitglieder und verbessert die Codekapselung.
• Konstruktor-Kurzschrift vereinfacht den Prozess der Initialisierung von Eigenschaften innerhalb von Klassen.

Diese TypeScript-Funktionen sind für das Schreiben robuster und wartbarer Angular-Anwendungen von grundlegender Bedeutung. Wenn Sie sie verstehen, können Sie das volle Potenzial von Angular nutzen, wenn Sie skalierbare, typsichere Anwendungen erstellen.

Lassen Sie uns als Nächstes in die Vorbereitung Ihrer Entwicklungsumgebung für Angular eintauchen und die Tools einrichten, die Sie für den Einstieg benötigen!