Anzeige
Anzeige
News

Svelte zieht nach: Offizielle Unterstützung für TypeScript ist da

Unterstützung für TypeScript steht schon lange ganz oben auf der Wunschliste der Svelte-Nutzer. Kürzlich verkündete der Svelte-Blog nun endlich First-Class-Support für den statisch typisierten Web-Dev-Liebling.

2 Min.
Artikel merken
Anzeige
Anzeige

Screenshot: svelte.dev/t3n

Svelte ist, wie auch React, Vue oder Angular, ein Framework für das Bauen von Web-Anwendungen. Im Unterschied zu anderen, traditionellen Tools greift Svelte nicht auf ein virtual DOM zurück, sondern wandelt den Framework-Code zur Kompilierzeit in reines Vanilla-JS. Das führt unter anderem dazu, dass mit Svelte gebaute Projekte oft um ein vielfaches schlanker sind. Wie es sich im Vergleich zu React beim Bau einer To-do-App schlägt, könnt ihr zum Beispiel in der t3n 59 nachlesen, Lucas Korten hat das Framework in dieser Magazinausgabe für uns einmal vorgestellt.

Das ging doch schon vorher?

TypeScript in Svelte zu schreiben, war auch vorher möglich. Allerdings war das bisher mit signifikant mehr Aufwand verbunden: In das betreffende Projekt mussten viele verschiedene, voneinander entkoppelte Tools eingebunden werden. Vor kurzem hat sich das Team hinter Svelte der Sache dann angenommen: Alle Tools, die ihr braucht, um TypeScript in Svelte zu verwenden, befinden sich jetzt offiziell unter der Schirmherrschaft des Svelte-Core-Teams, so der zugehörige Blogpost auf dem Svelte-Blog.

Anzeige
Anzeige

Ein neues Svelte-Projekt mit TypeScript-Support out of the Box könnt ihr einfach wie folgt erstellen:

So legt ihr ein Svelte-Projekt mit TS-Support an. (Screenshot: t3n)

Über

Anzeige
Anzeige
Setup-Project-Svelte-2

(Screenshot: t3n)

könnt ihr dann wie gehabt die benötigten Dependencies installieren, Rollup – den von Svelte verwendeten Bundler – über npm run dev starten und euer Projekt wie gehabt auf http://localhost:5000/ aufrufen. Wenn ihr jetzt eine Datei im src-Folder bearbeitet, speichert und einen Page-Refresh macht, solltet ihr die Änderungen hier sehen können. Per Default antwortet der Server zunächst nur auf Requests von Localhost. Um Verbindungen von anderen Computern zu erlauben, müsst ihr die sirv-commands in der package.json des Projekts editieren, sodass sie Option --host 0.0.0.0 beinhalten. Eine Kurzanleitung, wie ihr das Projekt in Production-Mode ausführt, bearbeitet und es schließlich über Vercel oder Surge deployen könnt, findet ihr im Svelte-Template-Projekt auf GitHub.

Anzeige
Anzeige

Der neue native TS-Support äußert sich wie folgt: Ihr könnt jetzt TypeScript innerhalb der <script>-Blöcke schreiben. Bislang war das nur über Umwege möglich. Wichtig ist hier nur das lang="ts“-Attribut:

<script lang="ts">

Anzeige
Anzeige

TS-Preprocessing und Verbesserte Editor-Features

Type-Checking von Komponenten, die TypeScript enthalten, geht jetzt einfach über den Command svelte-check bzw. npm run svelte-check, sofern ihr das Package nicht global installiert habt. Autovervollständigungsvorschläge und Type-Checking passieren jetzt während ihr eure Komponenten schreibt. TypeScript-Files verstehen jetzt zudem die Svelte-Component API, das heißt, die roten kleinen Rechtecke beim Import von .svelte-Files in ein .ts-Modul sind ab jetzt Geschichte. Möglich wird das über entsprechende Anpassungen am Svelte-Compiler: svelte-preprocess, ein Preprocessor mit Support für PostCSS, SCSS, Less, Stylus, CoffeeScript, TypeScript und Pug ist jetzt ein offizielles Svelte-Projekt. Die Neuerungen auf Editor-Ebene sind inspiriert von Vetur, einem Projekt innerhalb des Vue-Ökosystems. Ähnlich wie das Vorbild verfügt Svelte jetzt offiziell über ein Language Server Protokoll, eine VS Code Extension und ein offizielles CLI.

Wer die neue, konsilidierte Unterstützung für TypeScript in einem bereits bestehenden Svelte-Projekt nutzen will, findet auf dem Svelte-Blog eine detaillierte Anleitung dazu.

Passend dazu:

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare

Community-Richtlinien

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige