Webentwicklung: TypeScript in Vue-Projekten

Inhaltsverzeichnis

Wer Vue-Projekte entwickelt, setzt in der Regel JavaScript, und nicht TypeScript ein. Eine kurze Suche bei GitHub ergibt, dass es circa 170.000 Projekte mit JavaScript und 8.500 Projekte mit TypeScript gibt, deren Name oder Beschreibung Vue enthält. Das ist nicht verwunderlich. Als Quasi-Standard sind zum Beispiel Tools wie das Vue CLI definiert, die in den Standardeinstellungen ein Projekt mit Vue 2, Babel, ESLint und JavaScript erstellen. Auch die Dokumentationen von Vue 2 und 3 sprechen nur in ausgewählten Bereichen von TypeScript.

Dabei stellt es im Grunde kein Problem dar, ein Vue-Projekt mit TypeScript zu erstellen. Vue 3 ist in dieser Hinsicht ein sehr dankbares Webframework, da der Kern dieser Version selbst in TypeScript implementiert ist. Aber auch bei Vue 2 stellt sich nicht die Frage, ob TypeScript überhaupt funktioniert, sondern eher, ob die Sprache zu den Projektanforderungen, den verfügbaren Ressourcen und zum eigenen Geschmack passt – ganz gleich, ob es um die Wahl der Options API, der Class-Style-Vue-Komponenten oder der Composition API geht.

Was ist TypeScript?

TypeScript nutzt Konzepte wie Objektorientierung und Typinferenz, um Daten zu beschreiben. Die streng typisierte Skriptsprache kann zum Beispiel mit generischen Datentypen umgehen. Da TypeScript eine Obermenge der Programmiersprache JavaScript ist, kompiliert sie zu ihr, um im Browser zu laufen. Die Datentypen des Typsystems fördern lesbaren Code, Typsicherheit, ein verbessertes Debugging und eine bessere Toolunterstützung. Die Sprache ist seit fast einem Jahrzehnt verfügbar, und in dieser Zeit hat sich viel getan. Inzwischen unterstützen zahlreiche Entwicklungsumgebungen und Texteditoren TypeScript und sein Ökosystem.

Vue und TypeScript

Der Einsatz von TypeScript ist sowohl mit Vue 2.x als auch mit der neuen Version 3.x möglich. Die Core-Bibliotheken hat das Vue-Team in Version 3 mit TypeScript neu implementiert, die Unterstützung von TypeScript in eigenen Projekten ist aber wie schon bei Version 2 optional. Alle Varianten der API-Modelle wie die Options API und die Components API unterstützen TypeScript, und zusätzlich existiert der Class-based Components Style für den Einsatz mit TypeScript. Im weiteren Verlauf wirft dieser Artikel einen genaueren Blick auf die Unterschiede dieser APIs im Zusammenhang mit JavaScript und TypeScript.

Bereits seit einiger Zeit unterstützt Vue durch die Auslieferung mit offiziellen Typ-Deklarationen für TypeScript die Programmiersprache offiziell. Die notwendige Konfiguration für den TypeScript-Support lässt sich entweder direkt beim Anlegen eines Vue-Projekts automatisiert erstellen oder nachträglich manuell hinzufügen. Ein weiteres Tooling ist zunächst nicht notwendig. Die Typ-Deklarationen sind als Paket veröffentlicht und TypeScript weiß, wie diese Deklarationen in npm-Paketen aufzulösen sind, wodurch TypeScript direkt verwendbar ist.

Empfehlenswert ist der Einsatz eines Editors beziehungsweise einer IDE mit TypeScript-Unterstützung. Das stellt aufgrund der Integration in die meisten Entwicklungsumgebungen ebenfalls keine große Hürde mehr dar, zum Beispiel ist TypeScript-Unterstützung in Visual Studio Code oder WebStorm mit von der Partie. Zusätzlich sind Erweiterungen zur Integration der Vue-Unterstützung wie die Vetur Extension zu empfehlen, die Vue-Entwicklerinnen und -Entwicklern schon bekannt sein dürften.

Vor- und Nachteile von Vue mit TypeScript

Vor dem Einsatz von TypeScript stellt sich die Frage, welche Vor- und Nachteile das bringt. Da TypeScript mit JavaScript vollständig interoperabel sein muss, kann das Typisierungssystem bei einer korrekten Nutzung mitunter recht kompliziert sein. Ein weiteres Argument gegen TypeScript ist, dass es im Gegensatz zu JavaScript eine Kompilierung erfordert. Das ist jedoch häufig ein Scheinargument, denn die meisten JavaScript-Anwendungen erfordern heutzutage einen Build-Schritt – ob bei der Nutzung mit Gulp, Grunt, Webpack, Rollup, Babel oder Closure. Für Vue-Projekte ist dieser ebenfalls in den meisten Fällen vorhanden und für TypeScript lediglich zu erweitern. Es darf sich zudem kein überbordendes Sicherheitsgefühl einstellen, nur weil TypeScript die Datentypen prüft, da Bugs dadurch nicht ausgeschlossen sind.

Zu den Vorteilen von TypeScript – unabhängig von der Nutzung mit Vue – zählen Typ-Definitionen, verständlichere Compiler-Meldungen und eine umfassende Tool-Unterstützung. Den größten Vorteil spielt die Kombination von TypeScript und Vue 2.x wohl bei der Class-Style-Syntax für Vue-Komponenten aus. Es lassen sich Komponenten als normale Klassen erstellen, mit regulären Properties, Eigenschaften und Methoden für zum Beispiel Watcher und Events. Das ist nicht nur für diejenigen hilfreich, die aus objektorientierten Programmiersprachen wie C# oder Java kommen. Viele fühlen sich dadurch mehr "zu Hause" als in der Vue-Syntax der Options API. Bei Vue 3.x ist die Kombination der Composition API und TypeScript vielversprechend.