TypeScript

Lesezeit: 6 Minuten

TypeScript ist eine funktionale und objektorientierte optional typisierte Programmiersprache, die zu JavaScript transpiliert wird und zugleich eine Obermenge derselbigen Sprache ist. Als Begründer der Sprache gilt der bei Microsoft angestellte dänische Software Engineer Anders Hejlsberg, der auch maßgeblich C# mitgestaltet hat.

Nach zwei Jahren Entwicklungszeit wurde TypeScript im Jahr 2012 unter der Version 0.8 das erste Mal der Öffentlichkeit zugänglich gemacht. Die Version 1.0 erschien im Jahr 2014. Im gleichen Jahr ist der Quellcode von TypeScript zu GitHub umgezogen.

Alleinstellungsmerkmale

JavaScript war in seiner Anfangszeit nicht dafür konzipiert, Enterprise-Anwendungen zu bauen. Durch die Einführung eines Typensystems kompensiert TypeScript dies und schafft eine Sprache, mit der sich auch große Projekte mit einer Vielzahl von Entwicklern gut umsetzen lassen.

Zwar gibt es auch andersweitige Bestreben wie JSDoc und Flow, JavaScript um Typinformationen zu erweitern, im Unterschied zu TypeScript hat sich aber keine der Alternativen weitläufig durchsetzen können.

Einsatzbereiche

Die IDE Visual Studio Code, die Frameworks Angular, Circle.js, Ionic, Nestjs und Vue.js, die reaktive JavaScript-Erweiterung RxJS, die Testbibliothek Jest und die Echtzeit-3D-Engine Babylon.js sind überwiegend in TypeScript geschrieben. Viele bekannte JavaScript-Frameworks unterstützen TypeScript neben JavaScript. Diverse NPM-Pakete bieten zusätzliche Typeninformationen für die Einbindung in TypeScript-Code.

Pros

TypeScript bringt die wesentlichen Vorteile in seinen Design Goals auf den Punkt. Das Typensystem, durch das sich TypeScript auszeichnet, liefert zusätzliche Kontextinformationen und gibt bessere Strukturierungsmöglichkeiten für große Codebasen als reines JavaScript. IDEs können Entwickler durch die Typinformationen besser unterstützen, etwa mit Warnungen oder Refactoring-Möglichkeiten. Die zusätzliche Typsicherheit erhöht die Wartbarkeit und ermöglicht eine leichtere Skalierung, auch können gegenüber JavaScript potenziell weniger Fehler entstehen.

TypeScript hat unter anderem als Design-Ziele formuliert, auf Breaking Changes nach Möglichkeit zu verzichten und keine unkonventionellen Syntaxkonstrukte einzuführen, womit sich TypeScript gut für den kommerziellen Einsatz eignet.

Die Sprache ist leicht zu erlernen, da die Syntaxerweiterungen gegenüber JavaScript sich an anderen populären Sprachen orientieren. Gleichzeitig profitiert TypeScript von dem riesigen Ökosystem und der ebenso großen Community von JavaScript. TypeScript selbst ist mittlerweile so verbreitet, dass es von den gängigen JavaScript-Frameworks gute Unterstützung erfährt und es kein Problem ist, Entwickler mit TypeScript-Kenntnissen zu finden.

Zwar implizieren zusätzliche Typinformationen erstmal mehr Code, durch eine gute Typinferenz kann aber auf explizite Deklaration verzichtet werden, wenn der Typ eindeutig abgeleitet werden kann, etwa bei Variablen und Rückgabewerten von Funktionen.

TypeScript bietet neben Interfaces und Generics eine Menge zusätzlicher Hilfstypen, die gut zum prototypenbasierten Ansatz von JavaScript passen, etwa die Typen Partial, Required und Readonly, die alle Attribute einer Klasse entsprechend optional, verbindlich oder immutable machen. Die Verwendung einiger weiterer Typen demonstriert der nachfolgende Code:

interface Foo {
    a: string
    b: string
    c: string
}

type PickFoo = Pick<Foo, "a" | "b">
let a: PickFoo = { a: "a", b: "b" } // compiles
a = { a: "a", b: "b", c: "c" } // compile error

type OmitFoo = Omit<Foo, "a">
let b: OmitFoo = { b: "b", c: "c" } // compiles
b = { a: "a", b: "b", c: "c" } // compile error

type Bar = string | number | undefined

type ExcludeBar = Exclude<Bar, string>
let c: ExcludeBar = 1 // compiles
c = undefined // compiles
c = "" // compile error

type NonNullableBar = NonNullable<Bar>
let d: NonNullableBar = 1 // compiles
d = "" // compiles
d = undefined // compile error

Typdefinitionen in TypeScript können aber nicht nur auf bestehenden Typen aufsetzen, sondern auch ein ganz bestimmtes Set von Werten vorgeben. Damit lässt sich ganz hervorragend typsicherer Code bauen, um CSS-Properties zu setzen, wie das folgende Beispiel verdeutlicht:

type FontSize = 'small' | 'medium' | 'large'

const a: FontSize = 'small' // compiles
const b: FontSize = 'smaller' // compile error

Wie mächtig das Typensystem von TypeScript wirklich ist, wird einem am ehesten klar, wenn man einen Blick in TypeScript-Frameworks wie React wirft.

Cons

Als Obermenge von JavaScript erhöht TypeScript die Komplexität, da es insgesamt mehr Syntax gibt. Da gängige Webbrowser nur JavaScript unterstützen, erhöht TypeScript zugleich die Komplexität des Build-Prozesses, da es immer zu JavaScript transpiliert werden muss.

TypeScript kann ein falsches Gefühl der Sicherheit vermitteln, da die Typsicherheit leicht ausgetrickst werden kann. Dies ist eine bewusste Design-Entscheidung und als Nicht-Ziel in den Design-Zielen formuliert. Der folgende Code verdeutlicht, wie aus einer vermeindlichen String-Property eine Number werden kann:

interface Foo {
    a: string
}

interface Bar {
    a: string | number
}

let x: Foo = { a: "foo" }
let y: Bar = x
y.a = 42

console.log(typeof x.a, x.a)
// Ausgabe: "number 42"

Datenblatt

NameTypeScript
Webseitehttps://www.typescriptlang.org/
Erscheinungsjahr2012
Aktuellste Version (Stand 14. April 2024)5.3.3
Typisierungoptional statisch
Paradigmenfunktional, objektorientiert
ProsCons
grundsätzliche TypsicherheitTypsicherheit kann ausgehebelt werden
potenziell bessere Wartbarkeit und Skalierbarkeit (gemeinsame Arbeit an großen Codebasen) sowie geringere Fehleranfälligkeit als JavaScriptkomplexere Syntax als JavaScript, da Obermenge
Vermeidung von Boilerplate Code durch Typinferenzkomplexerer Build-Prozess, da zu JavaScript transpiliert
leicht zu erlernen
formuliertes Ziel auf Breaking Changes möglichst zu verzichten
Zugriff auf JavaScript-Ökosystem
Zugriff auf JavaScript-Community

virtuallet

virtuallet ist ein kleines Programm von mir, welches ich in diversen Programmiersprachen implementiert habe. Hier geht es direkt zum TypeScript-Code von virtuallet auf GitLab. Hier gibt es weitere Infos zu virtuallet.

- Design-Ziele von TypeScript