TypeScript

TypeScript ist eine Alternative zu JavaScript. Mit diesem enthält der Entwickler Typen zur Entwicklungszeit. TypeScript wird vor Auslieferung zu JavaScript kompiliert.

Ziel des Kurses

Ziel des Kurses ist es den Einstieg in Typescript zu wagen und die Grundlagen zu verstehen.

Einstieg in TypeScript

Kurze Vorstellung von TypeScript

TypeScript is JavaScript with syntax for types.
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

Quelle: https://www.typescriptlang.org/
  • Typescript stellt Typisierung zur Entwicklungszeit (nicht Laufzeit) zur Verfügung

  • Maintainer: Microsoft

  • 75,2k Github Stars

  • 23 Mio. wöchentlichen Downloads

NPM Projekt mit TypeScript einrichten

  1. Erstellen eines neuen NPM Projekts

    1. Ordner mit beliebigen Namen erstellen und mit Terminal in Ordner navigieren

    2. npm init in Terminal eingeben

    3. Dialog durchführen und bestätigen

  2. Hinzufügen von TypeScript

    1. TypeScript mit npm install typescript hinzufügen

    2. TypeScripts Default-Einstellungen mit npx tsc --init ausführen

  3. Anlegen der ersten TypeScript Datei

    1. Anlegen des Ordners src im Projekt

    2. Anlegen der ersten *.ts Datei (bsp. index.ts)

    3. Inhalt der index.ts Datei könnte console.log("ich werde ausgeben werden");

  4. Kompilieren und ausführen der Dateien

    1. tsc in Projektordner ausführen

    2. node src/index.js ausführen

    3. "ich werde ausgeben werden" sollte in der Konsole angezeigt werden

  5. Verbesserung des Projekts

    1. Anpassen der tsconfig.json

      1. outDir auf ./dist setzen

      2. rootDir auf ./src setzen

    2. Hinzufügen von Befehlen in der package.json

      1. "build": "tsc" zu scripts section hinzufügen

      2. "start": "node ./dist/index.js" zu scripts section hinzufügen

Typisierung in TypeScript

Primitive Typen

Verfügbar Typen:

  • string

  • number

  • boolean

  • Arrays

  • any

  • unknown

Deklarierung und Initialisierung von Variablen: const variable: string = "Hallo"

Komplexe Typen

Objekte können auf zwei Wegen deklariert werden. Der erste ist das Befehlswert type.

type TodoListItem = {
    name: string,
    done: boolean
}

Der zweite das Befehlswort interface.

interface TodoList {
    name: string;
    todos: TodoListItem[];
}

Die genauen Unterschiede werden im späteren Verlauf der Vorlesung vorgestellt.

Funktionen

Funktionen sehen ähnlich zu den in JavaScript bekannten aus.

function add(a: number, b:number):number {
    return a + b;
}

Der Rückgabetyp wird dabei hinter der Argumentenliste angegeben. Argumente werden auf die gleiche Art wie jede andere Variable auch deklariert.

*Hausaufgabe*

* Erstellen Sie entsprechend nach der REST-API von http://stephanstrehler.de:8081/todoList die TypeScript Typen und legen sie Dummydaten an.
* Entwickeln Sie eine Funktion welche für jede Liste den Namen und die Anzahl der Elemente dieser zurückgibt.
* Erstellen Sie eine Funktion, welche für die Auswertung ein HTML-Snippet-String erzeugt
* Bauen Sie eine Funktion welche den HTML Rahmen als String zur Verügung stellt und die Snippets entsprechend einbindet
* Speichern sie die Funktion als Datei und überprüfen Sie im Browser die Richtigkeit dieser.

Tipps:
* Für das Speichern der Dateien benötigen Sie das Paket fs
* Der Speicheraufruf kann wie folgt aussehen: fs.writeFileSync("./index.html", htmlString, "utf-8");
* Für eine bessere Lesbarkeit im Umgang mit Strings können Sie TemplateStrings verwenden: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Template_literals