Od dzisiaj Svelte obsługuje TypeScript
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
- Kompilowanie TypeScript – konfiguracja svelte-preprocess, który przekazuje zawartość bloków <script lang=”ts”> przez kompilator TypeScript.
- Wsparcie edytora – można korzystać z każdego edytora korzystającego z LSP. Rozszerzenie do tego protokołu poprawia jakość kodowania.
- 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.