TypeScript: Migracja do TypeScript

3.9+

0:00W tej chwili przechodzimy już do podsumowania naszego kursu

0:04i w ramach niego chciałbym podzielić się z tobą pewnymi wskazówkami które pozwolą

0:08ci wykorzystać tą wiedzę którą zdobyłeś na przestrzeni tego i poprzedniego

0:12kursu no i wykorzystać ją w praktyce bez wątpienia takim tematem

0:16jest migracja do typescriptu istniejącego projektu javascript na

0:21początku kursu wspominałem że kod javascript jest w pełni kompatybilny

0:25z kodem typescript i choć teoretycznie jest to prawda to w momencie

0:29gdy do istniejącego projektu javascript podłączamy typescript wymaga

0:34on od nas dodatkowej konfiguracji no i jednocześnie zadbania o to

0:38aby stopniowo przepisywać kod javascript na typescript istnieje

0:42ku temu kilka strategii które za chwilę ci omówię ale gdybym miał

0:46jest sprowadzić do kilku zdań powiedziałbym tak migrację należy

0:50rozpocząć od podłączenia typescriptu do naszego projektu a następnie

0:55doprowadzenia do tego aby w ogóle go uruchomić w momencie gdy to już

0:59zrobimy połowa pracy jest za nami ponieważ potem wystarczy że stopniowo

1:03będziemy przepisywać istniejący kod na typescript no i z biegiem

1:07czasu cała nasza aplikacja zostanie przepisana do tego języka ostatecznie

1:12z całą pewnością musimy przygotować się na to że nie wszystko pójdzie od razu zgodnie

1:16z naszym planem mało tego mogą zdarzyć się sytuacje chociażby

1:20w momencie gdy mamy rozbudowany projekt że migracja do typescriptu musi

1:24stać się pewnego rodzaju priorytetem aby w ogóle doszła do skutku dzięki

1:29temu że taki prioryted sobie nadamy sam proces migracji potrwa

1:33po prostu krócej i tak naprawdę w ogóle się wydarzy no

1:37bo jeżeli ciągle będziemy traktować to jako dodatek i nieustannie nawet tworząc

1:41nowe funkcje będziemy omijać dodawanie typowania no to donikąd

1:45nas to nie doprowadzi kontynuując jednak temat strategii pierwszą

1:49z nich jest miksowanie kodu javascript z kodem typescript wygląda

1:53to tak że do naszego projektu po prostu dodajemy pliki typescript a w pliku

1:57tsconfig.json ustawiamy opcję allowJs ustawioną na true

2:01w ten sposób zwróć uwagę że mam w moim projekcie plik app.js

2:06ale w momencie gdy uruchomię proces kompilacji typescriptu no

2:10to pomimo tego że nie mam tutaj kodu typescript i nie mam również informacji

2:14o typach nie wystąpił tutaj żaden błąd a plik app.js po prostu został

2:18przeniesiony do katalogu dist i w tym momencie dopiero gdybym dodał

2:23tutaj jakiś plik typescript to on oczywiście zostałby zweryfikowany

2:27pod kątem typów z jednej strony od razu podczas developmentu mamy informacje

2:31o błędach no a jednocześnie w procesie kompilacji plik app.js

2:35zostanie tutaj zignorowany natomiast typescript zostanie zweryfikowany

2:39pod kątem istniejących błędów no i co prawda w tym momencie mamy

2:43tutaj tylko dwa pliki natomiast na przestrzeni nieco większego projektu sprawdza się

2:48to dość dobrze podkreślam tylko jedną rzecz abyś dbał o to aby

2:52przy rozbudowie plików app.js regularnie dodawać typy w

2:56momencie gdy nie będziesz tego robił zawsze na koniec dnia będziesz zostawał z taką

3:00hybrydą kodu javascript oraz typescript tymczasem przejdźmy do

3:04kolejnej strategii i ona akurat mówi o wykorzystaniu JSDoc

3:09czyli generalnie dodawania typów poprzez wykorzystanie komentarzy

3:13bezpośrednio w pliku javascript i w praktyce wygląda to tak że mamy

3:17zestaw adnotacji które możemy wykorzystywać w komentarzach do

3:21tego aby opisywać poszczególne typy zmiennych oraz funkcji na

3:25podstawie tak opisanego kodu javascript jesteśmy w stanie wygenerować pliki

3:29definicji typów które pokazywałem ci w jednej z poprzednich lekcji

3:33tymczasem link do tej strony dołączam do materiałów tej lekcji i jednocześnie

3:37wracam do kolejnej strategii a tą strategią jest inkrementacja została

3:42na świetnie opisana w tym artykule który na przykładzie aplikacji zawierającej ponad

3:47100000 linii kodu opisuje proces takiej migracji gorąco

3:51zachęcam cię do spokojnego zapoznania się z nim a tymczasem zobaczmy szybko

3:55co oni tutaj właściwie zrobili tutaj pierwszym krokiem jaki podjął zespół programistów

4:00pracujący nad tym projektem było to aby utworzyć plik tsconfig

4:04a następnie zmienić rozszerzenia plików z js na ts

4:08efekt tego był taki że otrzymali komunikat o tym że w projekt znajduje się

4:12ponad 3000 błędów jak się pewnie domyślasz naprawienie ich wszystkich za

4:16jednym razem nie było możliwe w związku z tym skonfigurowali narzędzie do testu

4:20w taki sposób aby za każdym razem uruchamiało projekt z pomocą kompilera

4:25typescript a następnie zapisywało snapshot zawierający

4:29informacje o liście błędów typescript które aktualnie występują w

4:33projekcie no i cały sekret tutaj polegał na tym że w momencie gdy

4:37programiści dodawali jakieś zmiany snapshot ten był regenerowany a

4:41następnie uwzględniany w procesie pull request w momencie gdy jakaś wprowadzana

4:46zmiana generowała więcej błędów typescript niż faktycznie ich poprawiała

4:50nie była akceptowana zatem celem było tutaj stopniowe zmniejszanie

4:54liczby błędów oczywiście w ramach bieżącej konfiguracji typescriptu

4:58w momencie gdy te błędy zostawały zmniejszane stopniowo zwiększono

5:03też wymagania pliku konfiguracyjnego typescript względem kodu dzięki

5:07temu w wyniku samego rozwoju takiej aplikacji który trwał tutaj nieprzerwanie

5:11z biegiem czasu proces migracji tutaj postępował raz

5:16jeszcze bardzo zachęcam cię do zapoznania się z tym artykułem oraz repozytorium

5:20które możesz pobrać tutaj który pokazuje w jaki sposób można

5:24skonfigurować takie snapshoty tymczasem skoro przeszliśmy już przez takie

5:28trzy ogólne strategie migracji istniejącego kodu javascript do typescript

5:32spróbujmy również zmigrować nasz projekt jak widzisz mam tutaj

5:36naprawdę prostą aplikację express.js czyli kod napisany w node.js

5:40który bardzo chciałbym zmigrować do typescriptu pierwszy

5:44krok tak naprawdę mam już za sobą ponieważ chodziło tutaj o utworzenie pliku konfiguracyjnego

5:49typescript tutaj jak widzisz mam takie podstawowe ustawienia oraz tą

5:53opcję allowJs którą w tym momencie chciałbym wyłączyć teraz jeżeli

5:57chciałbym skompilować ten projekt zobacz co się stanie otrzymałem

6:04informację o błędzie który zawiera się w pliku module.ts no i faktycznie

6:08ten błąd istnieje więc na razie go zlikwiduję ale jeżeli teraz

6:12ponownie uruchomię nasz kompilator wszystko teoretycznie jest w porządku ale

6:17mi również zależy na tym aby nasz plik główny aplikacji został interpretowany

6:21jako typescript zatem zmieniam rozszerzenie tego pliku i ponownie

6:25uruchamiam proces kompilacji no i teraz nagle się okazuje

6:30że jednak brakuje mi różnych typów w kodzie który mam zapisany

6:34tutaj i konkretnie są to trzy błędy dotyczą one tego że

6:38mam tutaj niejawnie określony typ any parametrów funkcji w

6:42tej sytuacji mógłbym z jednej strony dodać tutaj po prostu wprost typ any

6:46albo alternatywnie wyłączyć tryb strict w pliku konfiguracyjnym typescript

6:51jeżeli teraz uruchomię proces kompilacji mam

6:56jeszcze jeden błąd informujący mnie o tym że nie mamy tutaj definicji typów zarówno

7:01dla node.js jak i express w związku z tym dodam teraz te typy

7:05no i teraz ponownie uruchomię kompilator w tym momencie

7:09żadnych błędów już tutaj nie mamy no i nasz projekt został poprawnie

7:13wygenerowany i swoją drogą chciałbym wrócić teraz jeszcze do jednej

7:17małej rzeczy mianowicie w związku z tym że zainstalowaliśmy tutaj definicję

7:21typów dla express oraz node.js no to możemy wykorzystać

7:25je w naszym projekcie podobnie zresztą musimy zrobić z każdą biblioteką

7:29którą importujemy do naszego projektu jednocześnie skoro posiadamy

7:34już informacje o typach morzem je również wykorzystać jeżeli

7:38w tym momencie przestawił bym tryb strict na true no to jak pamiętasz

7:42kompilator wyrzuci nam teraz błędy spróbujemy je teraz naprawić

7:46w tym konkretnym momencie mamy tutaj informacje o tym że parametry

7:50naszej funkcji nie posiadają odpowiedniego typu zatem skoro korzystamy

7:55już z kompilatora typescript możemy tutaj wykorzystać importy es6

7:59czyli z pomocą słowa kluczowego import importuję express oraz

8:03niezbędne typy które posłużą mi do tego aby określić typy tych dwóch zmiennych

8:07i w tym momencie zamieniliśmy kod javascript na typescript jednocześnie też

8:12chciałbym tutaj zwrócić uwagę na jedną rzecz o której w tym momencie z jakiegoś powodu

8:16mój kompilator nie informuje o właśnie w tej chwili przypomniało mu się

8:20o błędzie jak widzisz otrzymaliśmy tutaj informację mówiącą

8:24nam o tym że w ten sposób nie możemy zaimportować obiektu exspress ponieważ

8:29został on wyeksportowany w sposób wspierany przez CommonJS modules

8:33zatem to co możemy z tym zrobić to po prostu posłuchać sugestii

8:37którą mamy dokładnie tutaj czyli w pliku konfiguracyjnym dodajemy

8:41następującą flagę no i teraz jeżeli damy chwilę naszemu kompilatorowi

8:45no to wszystko powinno być w porzadku i teraz tylko zapiszę

8:50plik a następnie uruchomię ponownie kompilator i nasz projekt powinien

8:54działać tak jak należy faktycznie żadnych błędów tutaj nie mamy kod

8:58został tutaj wyeksportowany tak jak chcemy i wszystko wydaje się

9:03działać ostatecznie to co może cię jeszcze tutaj interesować to

9:07po prostu uruchomienie tego projektu jeżeli teraz uruchomię plik

9:11z poleceniem node otrzymam szereg różnych błędów to co

9:15jednak możemy z tym zrobić to uruchomić projekt z poleceniem ts-node

9:19jak widzisz wykorzystuję tutaj npx oczywiście sam ts-node możesz zainstalować

9:23globalnie w swoim systemie w każdym razie w momencie gdy uruchamię

9:27teraz ten projekt otrzymuję informację o tym że serwer nie

9:31może zostać uruchomiony bo mam uruchomiony jakiś inny serwer teraz wykorzystując

9:36magia kina już to naprawiłem i spróbujemy uruchomić go ponownie teraz

9:41wszystko wydaje się działać poprawnie a ja po wejściu na adres localhost 3000

9:46mam taki oto komunikat ale domyślam się że w procesie developmentu

9:50interesowałoby cię to że jeżeli wprowadzisz jakąś zmianę do pliku to fajnie

9:54by było aby te zmiany zostały natychmiast odzwierciedlane w przeglądarce w

9:58tej chwili musielibyśmy ponownie uruchomić serwer rozwiązanie które

10:02może ci przyjść do głowy to po prostu wykorzystanie narzędzia nodemon i problem

10:07polega na tym że niestety nodemon również z typescriptem nie działa aczkolwiek

10:11jest możliwość uruchomienia ts-node oraz nodemon ale w tym wszystkim

10:15mamy jeszcze jedną alternatywę tą alternatywą jest

10:19ts-node-dev jeżeli teraz uruchomię ten serwer w taki sposób

10:23to otrzymuję błąd informujący mnie o tym że nie mam zainstalowanego typescriptu

10:28no i faktycznie jest to prawda w tym momencie zainstalowałem

10:32lokalnie w moim projekcie typescript i jeżeli teraz ponownie uruchomię to polecenie wygląda

10:37na to że serwer został uruchomiony i faktycznie wszystko tutaj działa

10:41jeżeli teraz wprowadzę jakąś zmianę do pliku a następnie zapiszę

10:45ten plik to od razu mamy informacje o tym że serwer został zrestartowany

10:49i rzeczywiście zmiany są widoczne tak że jak widzisz

10:53w tym momencie przeszliśmy taki proces migracji kodu javascript do kodu

10:57typescript na przykładzie aplikacji express mam nadzieję że to wszystko

11:01dało ci taki ogólny zarys tego w jaki sposób wygląda migracja projektów

11:05javascript do typescript no i jednocześnie muszę podkreślić że sam proces

11:10migracji u podstaw jest dokładnie taki sam wszędzie ale znacząco

11:14się różni w zależności od specyfiki aplikacji jej rozmiaru oraz naszych

11:19wymagań proponuję więc teraz abyś po prostu sprawdził jak to wygląda

11:23na jednym z twoich projektów i tutaj raz jeszcze musisz pamiętać o tym

11:27że w pierwszej kolejności tworzysz plik tsconfig.json z jakimiś ustawieniami

11:31które pasują do twoich potrzeb a następnie zamieniasz rozszerzenia plików

11:35javascript na typescript w momencie uruchomienia projektu od razu będziesz

11:40miał informacje o ewentualnych błędach które musisz poprawić raz

11:44jeszcze podkreślam że najważniejsze jest tutaj doświadczenie i po prostu nastawienie się

11:48na to że tych błędów na początkowym etapie będzie dużo ale tak

11:52jak mówię dobra wiadomość jest taka że stopniowo możemy sobie z nimi bez problemu

11:57radzić tymczasem ja dziękuję ci za uwagę i słyszymy się za chwilę

12:01w kolejnej lekcji