JavaScript-Framework: Vue.js 3.3 legt Wert auf die Developer Experience

Das Release aktualisiert die Vue Language Tools und soll Entwicklerinnen und Entwicklern vor allem den Umgang mit TypeScript erleichtern.

In Pocket speichern vorlesen Druckansicht 14 Kommentare lesen

(Bild: Lapina/Shutterstock.com)

Lesezeit: 2 Min.

Das quelloffene JavaScript-Framework Vue.js hat unter der Bezeichnung "Rurouni Kenshin" Version 3.3 erreicht. Seit der letzten Minor Version vor rund zwei Jahren sind einige Neuerungen eingeflossen. Insbesondere soll sich die TypeScript-bezogene Developer Experience des Frameworks zum Erstellen von Web-UIs verbessert haben, das im Jahr 2014 der weiterhin als Project Lead tätige Entwickler Evan You ins Leben gerufen hat.

Gemeinsam mit dem Release von Version 1.6 der Vue Language Tools, ehemals als Volar benannt, sollen viele seit Längerem bestehende Schwierigkeiten bei der Verwendung von Vue.js mit TypeScript nun nicht mehr bestehen.

Wie Evan You in einem Blogeintrag mitteilt, soll Vue.js 3.3 die Nutzung von <script setup> mit TypeScript erleichtern. Dabei handelt es sich um syntaktischen Zucker zur Kompilierungszeit für das Verwenden der Composition API innerhalb von Single-File Components (SFCs).

So kann der Compiler nun importierte Typen auflösen und mit einem eingeschränkten Satz komplexer Typen umgehen, was bislang nicht möglich war:

<script setup lang="ts">
import type { Props } from './foo'

// imported + intersection type
defineProps<Props & { extraProp?: string }>()
</script>

Im Pull Request #8083 auf GitHub können Interessierte den Weg zu dieser Neuerung nachverfolgen.

Daneben soll defineEmits ein ergonomischeres Verhalten aufweisen, um Emits mit Typen zu deklarieren. Dieses Beispiel zeigt den bisherigen Einsatz von defineEmits:

// BEFORE
const emit = defineEmits<{
  (e: 'foo', id: number): void
  (e: 'bar', name: string, ...rest: any[]): void
}>()

Ein weiteres Beispiel zeigt das Verhalten in Version 3.3:

// AFTER
const emit = defineEmits<{
  foo: [id: number]
  bar: [name: string, ...rest: any[]]
}>()

Neben zahlreichen weiteren Änderungen sowie experimentellen Features hat sich auch die Maintenance-Infrastruktur geändert, was laut Entwicklerteam zu deutlichen Beschleunigungen geführt habe. Beispielsweise sollen zehnmal schnellere Builds dadurch möglich sein, dass das Vue.js-Team das Type-Checking vom Rollup-Build getrennt hat und von rollup-plugin-typescript2 zu rollup-plugin-esbuild gewechselt ist.

Heise-Konferenz: enterJS 2023

Am 21. und 22. Juni 2023 richten die Veranstalter dpunkt.verlag, heise Developer und iX die Enterprise-JavaScript-Konferenz enterJS in Darmstadt aus. In über 35 Vorträgen kommen JavaScript- und TypeScript-Sprachneuerungen, neue und etablierte Tools und Frameworks – darunter React, SvelteKit und Astro – sowie Barrierefreiheit und Softwarearchitektur zur Sprache.

Ganztägige Workshops stehen sowohl vor Ort als auch online bereit.

Auszug aus dem Programm:

Alle weiteren Details zu Vue.js 3.3 lassen sich dem offiziellen Blog und dem Changelog entnehmen.

(mai)