TypeScript Syntax

JavaScript vs TypeScript Syntax: Vergleich und Unterschiede

JavaScript und TypeScript sind in vielerlei Hinsicht ähnlich, da TypeScript eine Überschreibsprache von JavaScript ist. Infolgedessen basiert die Syntax von TypeScript weitgehend auf der von JavaScript, mit einigen zusätzlichen Funktionen und Syntaxelementen, die speziell für Typsicherheit und Skalierbarkeit entwickelt wurden.

 
let x = 4; // JavaScript 
let x: number = 4; // TypeScript

TypeScript Klassensyntax: Einführung und Besonderheiten

In TypeScript, wie auch in anderen objektorientierten Sprachen, ist die Klasse ein grundlegendes Konstrukt, das für die Definition von Datenstrukturen und Verhaltensweisen verwendet wird. Wenn du bereits mit Klassen in JavaScript vertraut bist, wirst du feststellen, dass die TypeScript Klassensyntax äußerst ähnlich ist, jedoch mit einigen wichtigen Unterschieden.

class Person {
    name:string;
    constructor(n:string){
        this.name = n;
    }
    sayHello() {
        return "Hello, " + this.name;
    }
}

TypeScript Function Syntax: Funktionen erstellen und verwenden

Funktionen spielen eine zentrale Rolle in der TypeScript-Syntax, sie sind das Hauptwerkzeug für die Modularisierung und Wiederverwendung von Code. Die Syntax für die Definition von Funktionen in TypeScript ähnelt der in JavaScript, mit dem Unterschied, dass TypeScript die Typisierung der Funktionsparameter und des Rückgabewerts ermöglicht.

function greet(name: string): string {
    return 'Hello ' + name;
}

TypeScript Import Syntax: Module richtig importieren

In TypeScript, wie auch in modernem JavaScript, wird Code nicht in einem einzelnen großen Skript geschrieben, sondern in mehreren Modulen, die dann importiert werden müssen. Die Syntax zum Importieren von Modulen in TypeScript ist identisch mit der in ES6 JavaScript.

import { ModuleName } from './path/to/module';

Generics und Enums in Typescript: Verständnis und Anwendung

Generics und Enums sind zwei mächtige Konzepte in TypeScript, die dir erlauben, flexible und wiederverwendbare Codekomponenten zu erstellen.

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

function identity(arg: T): T {
    return arg;
}

Typen und Schnittstellen in TypeScript: Funktion und Bedeutung

Der wichtigste Unterschied zwischen TypeScript und JavaScript ist das Typsystem von TypeScript. Dieses statische Typsystem ermöglicht es TypeScript, Typfehler zu erkennen und zu verhindern, bevor der Code ausgeführt wird.

interface Person {
    name: string;
    age: number;
}

function greet(person: Person) {
    return "Hello, " + person.name;
}

Dekoratoren in TypeScript: Syntax und Anwendungsmöglichkeiten

Dekoratoren sind eine experimentelle Funktion in TypeScript, die dir erlauben, Annotationen und eine Metaprogrammierung in einem einheitlichen Syntaxschema zu verwenden.

@classDecorator
class MyClass { }

Übungen zur TypeScript Syntax: Beispiele und Lösungsansätze

Der beste Weg, um TypeScript Syntax zu lernen, ist durch Praxis. Unten sind einige Übungen, die dir helfen werden, dein Verständnis zu vertiefen.

TypeScript Variablendeklaration und Arrow Function Syntax

Im Rahmen dessen, was TypeScript von JavaScript unterscheidet, sind zwei Elemente von besonderem Interesse: die Art und Weise, wie Variablen deklariert werden, und die Verwendung von Pfeilfunktionen, auch bekannt als Arrow Functions. Beide Elemente heben die Vorteile der TypeScript Syntax hervor und sind wesentliche Bestandteile beim Erstellen skalierbarer und effizienter TypeScript-Programme.

TypeScript Variablendeklaration: Best Practices und Tipps

Bei der Variablendeklaration in TypeScript gibt es einige wichtige Punkte zu beachten. Im Unterschied zu JavaScript, legst du in TypeScript den Datentyp einer Variablen bei ihrer Deklaration fest. Dabei gibt es verschiedene Arten von Variablen, die du deklarieren kannst, darunter Boolesche Werte, Zahlen, Zeichenketten und Arrays.

let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let list: number[] = [1, 2, 3];

Arrow Functions in TypeScript: Syntax und Verwendung

Pfeilfunktionen, auch bekannt als Arrow Functions, sind eine weitere wichtige Syntax-Erweiterung in TypeScript. Sie bieten eine kompakte Syntax, um anonyme Funktionen zu definieren, und sie teilen das gleiche 'this'-Konstrukt wie die Funktionen, in denen sie definiert werden, im Unterschied zu normalen Funktionen.

function square(n) { // herkömmliche Funktion
  return n * n;
}

let square = n => n * n; // Pfeilfunktion

TypeScript Typen Erklärung: Verstehen und Anwenden

Wie du vielleicht bereits erahnen kannst, sind Typen ein zentrales Konzept in TypeScript. Sie ermöglichen es dir, sicherzustellen, dass deine Funktionen und Variablen in einer bestimmten, vorhersehbaren Weise agieren. TypeScript bietet eine Vielzahl von eingebauten Typen, einschließlich Primitiven wie 'Number', 'String', 'Boolean', 'Null' und 'Undefined', sowie komplexeren Typen wie 'Array', 'Tuple', 'Enum', 'Any', 'Void', 'Never', und 'Unknown'.

let isCompleted: boolean = false;
let decimal: number = 8;
let hex: number = 0xf00d;
let color: string = "white";

Weiterführende Themen zur TypeScript Syntax

Während die vorhergehenden Abschnitte eine grundlegende Übersicht über die TypeScript Syntax bieten, gibt es einige fortgeschrittene Aspekte, die du benötigst, um ein solides Verständnis für die Möglichkeiten und den Umfang von TypeScript zu erlangen. In den folgenden Abschnitten lernst du mehr über den Abstract Syntax Tree, Interfaces, Modules, Enums, Namespaces, Kommentare und Generics in TypeScript.

Abstract Syntax Tree TypeScript: Erstellung und Anwendung

Der Abstract Syntax Tree (AST) ist ein essentielles Konzept für das Verständnis, wie TypeScript (und viele andere Programmiersprachen) intern operieren. Es ist eine Baumstruktur, in der jede Node eine Konstruktion aus dem Quellcode repräsentiert. Wenn du TypeScript-Code kompilierst, erzeugt der TypeScript Compiler einen AST aus deinem Quellcode.

subtract(x, add(y, z));

      subtract
      /     \
     x      add
            /   \
           y     z

TypeScript Interfaces Syntax: Verstehen und Anwenden

Interfaces sind ein leistungsstarkes Werkzeug in TypeScript. Sie ermöglichen es dir, die Struktur eines bestimmten Objekttyps zu definieren und sicherzustellen, dass alle Objekte, die als dieser Typ gekennzeichnet sind, diese Struktur einhalten.

interface Rectangle {
  width: number;
  height: number;
}

TypeScript Modules Syntax: Einführung und Anwendung

Modules in TypeScript ermöglichen es dir, deinen Code in logische, wiederverwendbare Einheiten zu organisieren. Sie bieten den Vorteil der Code-Kapselung und erleichtern die Zusammenarbeit in großen Projekten.

// math.ts
export function add(a: number, b: number) {
    return a + b;
}

// main.ts
import { add } from './math';
console.log(add(1, 2));

TypeScript Enums und Namespaces: Einsatz und Bedeutung

Enums und Namespaces sind zwei weitere wichtige Konzepte in TypeScript. Mit Enums kannst du eine Menge von benannten Konstanten definieren, und Namespaces bieten eine Möglichkeit, verwandte Codeblöcke zu organisieren.

// Enums
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

// Namespaces
namespace Shapes {
  export class Rectangle {
    // class content
  }
}
let r = new Shapes.Rectangle();

TypeScript Kommentar Syntax: Richtig kommentieren

Kommentare sind in TypeScript genauso wichtig wie in JavaScript. Sie dienen dazu, deinen Code zu erklären und andere Programmierer (oder dich selbst in der Zukunft) darüber zu informieren, was der Code tut. TypeScript unterstützt sowohl einzeilige (//) als auch mehrzeilige (/\* \*/) Kommentare.

// Dies ist ein einzeiliger Kommentar

/\*
Dies ist ein
mehrzeiliger Kommentar
\*/

TypeScript Generics Syntax: Erklärung und Anwendungsbeispiele

Generics sind ein mächtiges Werkzeug in TypeScript. Sie bieten eine Möglichkeit, die Typen von Eigenschaften, Methoden, Klassen und Interfaces zu abstrahieren, wodurch du wiederverwendbaren und flexiblen Code schreiben kannst.

function identity(arg: T): T {
    return arg;
}

let output = identity("a string");

TypeScript Syntax: Beispiele für fortgeschrittene Anwendungsbereiche

Die Syntax von TypeScript ermöglicht viele fortgeschrittene Anwendungsbereiche, einschließlich komplexer Datentypen, benutzerdefinierter Typwächter und mächtiger Typmanipulationen. Für alle diese fortgeschrittenen Funktionen und Konzepte gelten die grundlegenden Regeln und Syntax von TypeScript, so dass das Erlernen der Grundlagen dich gut auf diese fortgeschrittenen Themen vorbereitet.

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

function printPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

const point = {x: 10, y: 20};
printPoint(point);