TypeScript ist eine von Microsoft (Anders Hejlsberg) entwickelte Programmiersprache, die auf Javascript aufbaut und diese um wichtige Funktionen erweitert. Um TypeScript Code im Browser nutzen zu können, muss dieser erst durch einen Transcompiler angepasst werden.

Einer der entscheidenden Vorzüge der Verwendung von TypeScript gegenüber dem Einsatz von JavaScript ist die Möglichkeit, bei der Variablendefinition einen Datentyp explizit anzugeben.

TypeScript kennt unterschiedliche Datentypen. Zum Beispiel:

• Boolean
• Number
• String

Des Weiteren zielt TypeScript auf eine objektorientierte Programmierung und bietet deshalb Sprachkonstrukte wie Klassen, Vererbung oder Module.

Nutzung von TypeScript

TypeScript kann man am einfachsten mit dem Codeeditor Visual Studio Code nutzen, da dieser TypeScript bereits nativ unterstützt.

Dazu erstellt man z.B.: die Datei „main.ts“ und befüllt diese mit einfachem TypeScript Code:

let message: string = 'Hello World';
console.log(message);

Wie oben erwähnt, kann man eine TypeScript Datei nicht einfach im Browser nutzen. Die Datei muss erst mit einem Transcompiler in normalen Javascript Code umgewandelt werden. Den Transcompiler kann man mittels NPM Befehl installieren. Dazu muss Node.js installiert sein.

npm install -g typescript

Danach kann man TypeScript Code umwandeln:

Der Befehl erstellt im gleichen Ordner eine main.js Datei.

// Inhalt main.ts
let message: string = 'Hello World';
console.log(message);

// Inhalt main.js
var message = 'Hello World';
console.log(message);

Hier sieht man, dass der Typ „string“ verschwunden ist und „let“ zu „var“ wurde. Nutzt man Klassen und andere weiter unter beschriebene Funktionen ändert sich recht viel.

Will man die umgewandelten Dateien in einem extra Order abspeichern, in dem vielleicht auch eine HTML Datei ist, die die Javascript Datei nutzt, kann man eine „tsconfig.json“ Datei erstellen und in den Order mit den TypeScript Dateien legen.

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "build"
    }
}

Danach reicht das Kommando „tsc“ aus, um den TypeScript Code zu transcompilen und in den Zielordner zu schieben.

Typisierung

Nun kann man Variablen mit eigenem Typ erstellen:

Der Vorteil dieser Typisierung ist, dass der Codeeditor einen Fehler wirft, wenn man einer Variablen einen falsche Typ zuweisen will:

Neben diesen einfachen Typzuweisungen, kann man auch typisierte Arrays (Generics) erstellen:

Klassen

Klassen kann man auch ohne TypeScript in JavaScript erstellen, doch fehlt einem hier die Möglichkeit, z.B.: die Sichtbarkeit von Attributen anzupassen. Des Weiteren ist der Aufbau einer Klasse ähnlicher wie in anderen objektorientierten Programmiersprachen wie Java oder C#:

class Person {
    private name: string;
    private alter: number;

    constructor(_name: string, _alter: number) {
        this.name = _name;
        this.alter = _alter;
    }

    public getName(): string {
        return this.name;
    }

    public getAlter(): number {
        return this.alter;
    }
}

let myPerson = new Person("Richi", 66);

Klassen können von anderen Klassen erben:

class Lehrer extends Person {
    private schule: string;

    constructor(_name: string, _alter: number, _schule: string) {
        super(_name, _alter);
        this.schule = _schule;
    }

    public getSchule(): string {
        return this.schule;
    }
}

let myLehrer = new Lehrer("Fritz", 33, "Mittelschule")

Interfaces

Interfaces sind besondere Klassen in denen man nur Methodenköpfe und Konstanten definiert. Klassen können dann diese Interfaces implementieren, um sicher zu stellen, dass die Klasse alle benötigten Methoden hat.

interface Car {
    getGeschwindigkeit(): number;
    getHersteller(): string;
}

class Golf implements Car {
    private geschwindigkeit: number;
    private hersteller: string;

    constructor(_geschwindigkeit: number, _hersteller: string) {
        this.geschwindigkeit = _geschwindigkeit;
        this.hersteller = _hersteller;
    }

    public getGeschwindigkeit(): number {
        return this.geschwindigkeit;
    }

    public getHersteller(): string {
        return this.hersteller;
    }
}

Module

TypeScript unterstützt die Aufteilung von Code in Module. Man kann Module, also z.B.: eine eigene Klasse, selbst erstellen und dann in einer TypeScript Datei importieren, die die Funktion benötigt oder man importiert Module von anderen Entwicklern, welche z.B.: in NPM veröffentlicht wurden.

//Export
export class Person { ... }

// Import
import { Person } from "./Person"

Links

• Offizielle Homepage von TypeScript
• TypeScript tutorial in Visual Studio Code
• Starting a TypeScript Project in 2021
• YouTube: Webpack & TypeScript Setup