TypeScript - Grundsyntax

Hallo da draußen, zukünftige TypeScript-Zauberer! ? Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von TypeScript zu sein. Als jemand, der seit Jahren Programmieren unterrichtet, kann ich Ihnen sagen, dass TypeScript wie eine aufgeladene Version von JavaScript ist und Ihr Coding-Leben erheblich einfacher machen wird. Lassen Sie uns eintauchen!

Dein erster TypeScript-Code

Gut, stellen Sie sich vor, Sie schreiben Ihre erste Zeile in einer neuen Sprache. Aufregend, oder? Lassen Sie uns mit dem klassischen "Hello, World!"-Programm in TypeScript beginnen.

console.log("Hello, World!");

Nun, Sie werden vielleicht denken: "Warten Sie einen Moment, das sieht aus wie JavaScript!" Und Sie hätten recht! TypeScript ist eine Obermenge von JavaScript, was bedeutet, dass alles, was in JavaScript gültig ist, auch in TypeScript gültig ist. Aber keine Sorge, wir kommen gleich zur coolen TypeScript-spezifischen Stuff.

Lassen Sie uns etwas mehr TypeScript-ähnliches ausprobieren:

let message: string = "Hello, TypeScript!";
console.log(message);

Hier ist, was passiert:

• Wir deklarieren eine Variable namens message
• Der Teil : string tells TypeScript, dass diese Variable nur String-Werte enthalten sollte
• Wir weisen der Variable den String "Hello, TypeScript!" zu
• Schließlich geben wir ihn in der Konsole aus

Das ist nur ein kleiner Vorgeschmack auf TypeScript-Typensystem, das eine der leistungsfähigsten Funktionen ist. Es ist wie ein freundlicher Roboter-Assistent, der Ihre Fehler bereits vor der Ausführung Ihres Codes erwischt!

Kompilieren und Ausführen eines TypeScript-Programms

Nun, da wir etwas TypeScript geschrieben haben, wie können wir es eigentlich ausführen? Browser und Node.js verstehen TypeScript direkt nicht,also müssen wir es zuerst in JavaScript übersetzen. Es ist wie das Übersetzen von TypeScript in eine Sprache, die Computer bereits verstehen.

Hier ist, wie man es macht:

1. Speichern Sie Ihren TypeScript-Code in einer Datei mit der Erweiterung .ts, nennen wir sie hello.ts
2. Öffnen Sie Ihr Terminal oder Ihre Kommandozeile
3. Navigieren Sie zu dem Verzeichnis, das Ihre Datei enthält
4. Führen Sie den TypeScript-Compiler aus:

tsc hello.ts

Dies erstellt eine neue Datei namens hello.js im selben Verzeichnis. Das ist Ihr TypeScript-Code, in JavaScript übersetzt!

Um es auszuführen, können Sie Node.js verwenden:

node hello.js

Und voilà! Sie sollten Ihre Nachricht in der Konsole sehen.

Compiler-Flags

Der TypeScript-Compiler ist ziemlich klug, aber manchmal möchten Sie ihm spezifische Anweisungen geben. Hier kommen Compiler-Flags ins Spiel. Sie sind wie spezielle Befehle, die Sie dem Compiler geben können, um sein Verhalten zu ändern.

Hier ist eine Tabelle mit einigen häufigen Compiler-Flags:

Flag	Beschreibung
--outDir	Gibt ein Ausgabeverzeichnis für alle ausgelieferten Dateien an
--target	Gibt die ECMAScript-Zielversion an
--watch	Beobachtet Eingabedateien
--strict	Schaltet alle strengen Typprüfoptionen ein

Zum Beispiel, wenn Sie Ihren TypeScript in eine ältere JavaScript-Version kompilieren möchten, um Kompatibilitätsgründen, könnten Sie verwenden:

tsc --target ES5 hello.ts

Dies weist den Compiler an, JavaScript zu generieren, das mit ECMAScript 5 funktioniert, das von älteren Browsern unterstützt wird.

Bezeichner in TypeScript

In der Programmierung verwenden wir Bezeichner, um Dinge wie Variablen, Funktionen und Klassen zu benennen. Denken Sie daran als Etiketten für die verschiedenen Teile Ihres Codes. In TypeScript gibt es einige Regeln für diese Namen:

• Sie können Buchstaben, Ziffern, Unterstriche und Dollarzeichen enthalten
• Sie müssen mit einem Buchstaben, Unterstrich oder Dollarzeichen beginnen
• Sie sind case-sensitiv (also myVariable und MyVariable sind unterschiedlich)
• Sie dürfen kein reserviertes Schlüsselwort sein (wir werden darüber gleich sprechen!)

Hier sind einige gültige Bezeichner:

let firstName: string = "John";
let _count: number = 5;
let $price: number = 9.99;
let camelCaseIsCommon: boolean = true;

Und einige ungültige:

let 123abc: string = "Ungültig"; // Kann nicht mit einer Zahl beginnen
let my-variable: number = 10; // Kann keine Bindestriche verwenden
let class: string = "Reserviertes Schlüsselwort"; // Kann keine reservierten Schlüsselwörter verwenden

TypeScript ─ Schlüsselwörter

Schlüsselwörter sind spezielle Wörter, die eine spezifische Bedeutung in TypeScript haben. Sie sind wie das Vokabular der Sprache. Sie können sie nicht als Bezeichner verwenden, da TypeScript ihnen bereits eine Aufgabe zugewiesen hat.

Hier ist eine Tabelle mit einigen häufigen TypeScript-Schlüsselwörtern:

Schlüsselwort	Beschreibung
let	Deklariert eine block-spezifische Variable
const	Deklariert eine block-spezifische Konstante
if	Startet eine if-Anweisung
for	Startet eine for-Schleife
function	Deklariert eine Funktion
class	Deklariert eine Klasse
interface	Deklariert eine Schnittstelle
type	Deklariert einen Typen

Zum Beispiel:

let x: number = 5;
const PI: number = 3.14159;

if (x > 0) {
    console.log("x ist positiv");
}

for (let i = 0; i < 5; i++) {
    console.log(i);
}

function greet(name: string): void {
    console.log(`Hello, ${name}!`);
}

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}

interface Shape {
    area(): number;
}

type Point = {
    x: number;
    y: number;
};

Jedes dieser Schlüsselwörter hat einen spezifischen Zweck in der Strukturierung und Definition Ihres Codes.

Kommentare in TypeScript

Kommentare sind wie kleine Notizen, die Sie sich (oder anderen Entwicklern) in Ihrem Code hinterlassen. Sie werden vom Compiler ignoriert, sodass Sie verwenden können, um zu erklären, was Ihr Code macht, ohne wie es ausgeführt wird.

TypeScript unterstützt drei Arten von Kommentaren:

1. Einzeilige Kommentare:

   // Dies ist ein einzeiliger Kommentar
   let x: number = 5; // Sie können sie auch am Ende einer Zeile platzieren

2. Mehrzeilenkommentare:

   /* Dies ist ein mehrzeiliger Kommentar
   Er kann über mehrere Zeilen verlaufen
   Nützlich für längere Erklärungen */
   let y: number = 10;

3. Dokumentationskommentare:

   
   /**

• Dies ist ein Dokumentationskommentar
• Er wird oft verwendet, um Dokumentation für Funktionen oder Klassen zu generieren
• @param name Der zu grüßende Name
• @returns Eine Grußbotschaft */ function greet(name: string): string { return Hello, ${name}!; }

Denken Sie daran, dass gute Kommentare erklären, warum Sie etwas tun, nicht nur, was Sie tun. Der Code selbst sollte klar genug sein, um zu zeigen, was passiert.

TypeScript und Objektorientierung

Eine der großartigen Eigenschaften von TypeScript ist seine Unterstützung für objektorientierte Programmierung (OOP). Wenn Sie neu im Programmieren sind, denken Sie an OOP als eine Möglichkeit, Ihren Code um "Objekte" zu organisieren, die Eigenschaften und Verhaltensweisen haben.

Lassen Sie uns eine einfache Car-Klasse erstellen, um dies zu demonstrieren:

class Car {
    // Eigenschaften
    make: string;
    model: string;
    year: number;

    // Konstruktor
    constructor(make: string, model: string, year: number) {
        this.make = make;
        this.model = model;
        this.year = year;
    }

    // Methode
    describe(): string {
        return `Dies ist ein ${this.year} ${this.make} ${this.model}.`;
    }
}

// Erstellen einer Instanz von Car
let myCar = new Car("Toyota", "Corolla", 2022);

console.log(myCar.describe()); // Gibt aus: Dies ist ein 2022 Toyota Corolla.

Lassen Sie uns das zusammenfassen:

• Wir definieren eine Car-Klasse mit Eigenschaften für make, model und year
• Der constructor ist eine spezielle Methode, die aufgerufen wird, wenn wir ein neues Car erstellen
• Die describe-Methode gibt einen String zurück, der das Auto beschreibt
• Wir erstellen ein neues Car-Objekt und rufen seine describe-Methode auf

TypeScripts Typensystem ist in der OOP besonders leistungsfähig. Es kann Fehler wie das Zuweisen eines Strings zur year-Eigenschaft oder das Aufrufen einer nicht vorhandenen Methode erkennen.

Und das war's! Sie haben gerade Ihre ersten Schritte in die Welt von TypeScript gemacht. Erinnern Sie sich daran, dass das Lernen zu programmieren eine Reise ist, keine Destination. Machen Sie sich keine Sorgen, wenn nicht alles sofort klickt - üben Sie weiter, experimentieren Sie und vor allem: haben Sie Spaß! Vor Ihnen liegen komplexe TypeScript-Anwendungen und Sie werden sich wundern, wie Sie jemals ohne statische Typisierung gelebt haben. Viel Spaß beim Coden! ?

Credits: Image by storyset