Oficjalnie! Svelte obsługuje TypeScript! Jest to jedna z najbardziej oczekiwanych i pożądanych funkcji. Dla programistów oznacza to ulepszenie aplikacji internetowych oraz dostarczenie przyjemniejszych wrażeń z programowania.

Co wynika ze wsparcia dla TypeScript w Svelte?

Wcześniej, aby skorzystać z TypeScript w Svelte trzeba było korzystać z wielu dodatkowych narzędzi. Każdy projekt działał niezależnie. Jednak teraz wszystkie z używanych narzędzi działają w ramach Svelte. Pracownicy Svelte już przed wybuchem pandemii planowali integrację tych narzędzi, aby ułatwić korzystanie z TypeScript.

Instalacja Svelte z TypeScript

Aby wypróbować Svelte z TypeScript, korzystając z tradycyjnego szablonu, należy uruchomić node scripts/setupTypeScript.js:

npx degit sveltejs/template svelte-typescript-app
cd svelte-typescript-app
node scripts/setupTypeScript.js

Jak to wszystko tak właściwie działa?

Obsługę Typescript można porównać do techniki używanej przez TS do dostarczania narzędzi programistycznych.

Mowa o kompilatorze tsc, uruchamianym na linii poleceń do konwersji *.ts do *.js. Dalej jest TSServer, który jest węzłem API odpowiadającym na żądania edytorów tekstu. I to właśnie on zapewnia całą introspekcję w czasie rzeczywistym JS oraz TS dla redaktorów podczas pisania.

W przypadku Svelte także mamy kompilator – svelte-language-server, odpowiadający na wywołania edytora za pośrednictwem LSP (Language Server Protocol). Pierwsza klasa obsługi TypeScript oznacza, że oba te systemy radzą sobie z obsługą kodu TS.

Dodawanie TypeScript do istniejącego projektu

Zanim rozpoczniesz, dodaj zależności:

npm install  --save-dev @tsconfig/svelte typescript svelte-preprocess svelte-check

1. Kompilowanie TypeScript – konfiguracja svelte-preprocess, który przekazuje zawartość bloków <script lang=”ts”> przez kompilator TypeScript.
2. Wsparcie edytora – można korzystać z każdego edytora korzystającego z LSP. Rozszerzenie do tego protokołu poprawia jakość kodowania.
3. Kontrole CI – do kontroli błędów służy narzędzie CLI: svelte-check. Działa tak, jak edytor proszący o błędy we wszystkich plikach .svelte.

Svelte obsługuje TypeScript – zalety

Wsparcie TypeScript daje wiele nowych możliwości:

• Przy pomocy polecenia svelte-check można sprawdzać typ komponentu z TypeScript.
• Obsługa interfejsu API składnika Svelte przez pliki TypeScript – koniec z czerwonymi zawijasami podczas importowania  pliku .svelte do  modułu .ts
• Wewnątrz bloków <script> korzystaj z TypeScript – wystarczy dodać atrybut lang=”ts”
• Podczas pisania komponentów otrzymujesz wskazówki dotyczące autouzupełniania, także w wyrażeniach wewnątrz znaczników.