Nauka TypeScriptu – dlaczego warto poznać ten nadzbiór języka JavaScript?

Kiedy programista dołącza obecnie do projektu, jest całkiem spora szansa, że trafi w nim na kod napisany w TypeScripcie. Nie bez przyczyny ten nadzbiór JavaScriptu zyskał swoją popularność. Zastosowanie go w projekcie potrafi istotnie zwiększyć komfort programowania i jakość dostarczanych rozwiązań przy niskim koszcie wdrożenia.

Celem niniejszego artykułu jest pokazanie Ci, w jakim miejscu obecnie znajduje się TypeScript oraz jakie korzyści wynikają z jego stosowania. Ponadto dowiesz się, jak zacząć stosować TypeScript w praktyce – w swoim projekcie lub w dedykowanym środowisku testowym.

Spis treści

1. Co to jest TypeScript i czym różni się od JavaScriptu?
2. Garść statystyk i sytuacja rynkow, czyli dlaczego nauka Typescriptu się opłaca
3. Z czego wynika popularność TypeScriptu?
4. Jak zacząć naukę TypeScriptu?
5. Praktyczne porady na rozpoczęcie przygody z TypeScriptem
6. Dlaczego warto korzystać z TypeScriptu? – podsumowanie i opinia eksperta

Co to jest TypeScript i czym różni się od JavaScriptu?

TypeScript to nadzbiór (ang. superset) języka JavaScript stworzony przez firmę Microsoft. Oznacza to, że TypeScript rozszerza możliwości, jakie oferuje JavaScript. Głównym jego wyróżnikiem jest wprowadzenie statycznego typowania, co umożliwia programowanie w sposób bardziej pewny i bezpieczny. Dzięki temu błędy związane z typowaniem wartości są wykrywane na etapie transpilacji kodu, czyli przetwarzania TypeScriptu do kodu JavaScript.

Garść statystyk i sytuacja rynkowa TypeScriptu

Omawiając obecną sytuację rynkową, warto zacząć od wyników badania 2023 Developer Survey, przeprowadzonego przez Stack Overflow w maju 2023 roku. Wzięło w nim udział ponad 90 000 programistów i programistek z całego świata.

TypeScript znalazł się na piątej pozycji w rankingu najczęściej wykorzystywanych technologii z rezultatem 38,87%. Jego wynik wygląda jeszcze lepiej w kategorii stanowiącej większość ankietowanych, czyli Professional Developers. 43,75% z nich podało TypeScript jako technologię, w której kodują.

Dodatkową motywacją dla developerów do rozpoczęcia nauki TypeScriptu może być fakt, że średnie zarobki programistów TypeScript wypadły nieco lepiej niż programistów JavaScript.

Innym badaniem, na które warto spojrzeć, jest State of JavaScript. W momencie publikacji artykułu najnowszą edycją była ta z 2022 roku, w której udział wzięło ponad 39 000 respondentów. Najważniejszym wnioskiem jest to, że obecnie TypeScript praktycznie nie posiada konkurencji. Wśród uczestników, którzy wykorzystują nadzbiory JavaScript (69,2% respondentów badania), 98,9% z nich podało właśnie TypeScript jako stosowaną technologię.

Na uwagę zasługuje również statystyka porównująca czasy poświęcone na pisanie kodu w JavaScripcie i TypeScripcie Zaledwie nieco ponad 11% uczestników, którzy udzielili odpowiedzi na to pytanie, pisze wyłącznie w JavaScripcie. Dla porównania – 28% respondentów odpowiedziało, że koduje wyłącznie w TypeScripcie, a kolejne 23,7% wskazało, że 90% wytwarzanego przez nich kodu jest kodem TypeScript.

Jeśli omówione statystyki Cię nie przekonały, to być może przekonają Cię dane z jednego z największych polskich job boardów. W styczniu 2024 w kategorii JavaScript zamieszczone było 1099 ofert. Po wpisaniu frazy “TypeScript” liczba zwróconych wyników spadła do “zaledwie” 779. Oznacza to,  że około 70% ofert pracy wymienia TypeScript wśród wymaganych technologii.

W tym samym czasie na innym popularnym polskim job boardzie liczba ofert dla zaznajomionych z TypeScriptem wyniosła 113, zaś ofert z JavaScript 353, co oznacza, że nieco ponad 30% ofert wymagało znajomości TypeScriptu lub uznała to za zaletę kandydata. Jest to sporo mniej niż w przypadku pierwszego portalu, ale wciąż jest to pokaźna liczba.

Jak dowodzą powyższe dane, dla programisty JavaScript znajomość TypeScript przestaje być wyróżnikiem. Staje się standardem. Programiści bez znajomości TypeScriptu będą tracić na rzecz tych, którzy są już obyci z tą technologią.

Czy wiesz, że nasza metoda nauczania jest oparta na ciągłym dostosowywaniu programu szkolenia do bieżącej sytuacji rynkowej i potrzeb rzeczywistych środowisk pracy? Dlatego podczas Programu Wdrożenia do Zawodu Junior Front-end Developera kursanci nie tylko poznają JavaScript i jego biblioteki, ale także uczą się TypeScriptu!

Z czego wynika popularność TypeScriptu?

Istnieje kilka powodów, dla których TypeScript zyskał aż tak wielką popularność.

Jego główną zaletą jest bezpieczeństwo typów. Statyczne typowanie pozwala uniknąć błędów typowania, które w przypadku kodu w JavaScripcie potrafią być szczególnie uciążliwe i prowadzić do „ciekawych” rezultatów.

Poniższy fragment kodu JavaScript pobiera wartość z elementu input znajdującego się w kodzie HTML strony i sprawdza jego typ:

<input type="number" value="123" id="test">
console.log(typeof document.getElementById( 'test' ).value

);

 

W rezultacie w konsoli zostanie wyświetlona wartość “string”. Załóżmy, że aplikacja zawiera 2 elementy input, a programista chce zwrócić sumę liczb z obu pól. Do dokonania obliczeń została przygotowana prosta funkcja sumująca:

function sumValues( a, b ) {
return a+b;
}

Nie wiedząc, że dane pole zwraca wartość typu string, programista może omyłkowo dokonać konkatenacji (złączenia) stringów zamiast dodania do siebie dwóch liczb. Podobnie byłoby w sytuacji, w której programista zapomniałby zamienić jedną z wartości na liczbę.  Rezultat wszystkich poniższych wartości będzie różny od oczekiwanego.

sumValues( “13”, “13” ) // “1313”
sumValues( 13, “13” ) // “1313”
sumValues( “13”, 13 ) // “1313”

Na ratunek przychodzi statyczne typowanie. Zadeklarowanie typu oczekiwanych parametrów oraz typu zwracanej wartości pozwala uniknąć następujących błędów:

function sumValues( a: number, b: number ): number {
return a+b;
}

W takim podejściu, na etapie transpilacji kodu TypeScript do JavaScriptu, zostanie wyrzucony błąd:  “Argument of type 'string’ is not assignable to parameter of type 'number’.”. W codziennej pracy jeszcze częściej mamy do czynienia z sytuacjami, w których spodziewany typ może różnić się od oczekiwanego.  Dlatego im częściej napotyka się problemy tego rodzaju, tym bardziej docenia się statyczne typowanie.

Dodatkową korzyścią wynikającą ze statycznego typowania jest polepszona czytelność kodu, większy komfort pracy i możliwość szybszego dostarczania lepszych rozwiązań. Statyczne typowanie zdejmuje z programisty obowiązek pilnowania typów, a potencjalne pomyłki są wykrywane w sposób automatyczny. Również refaktoryzacja kodu w przypadku kodu strukturalnego może przebiec w szybszy i bezpieczniejszy sposób.

Co więcej, statyczne typowanie pozwala na integrację z narzędziami developerskimi, edytorami kodu linterami czy innymi narzędziami do analizy kodu. Posłużę się przykładem.  Popularny Visual Studio Code posiada wbudowane wsparcie dla TypeScriptu wraz z ogromem możliwości konfiguracji i dopasowania edytora do potrzeb użytkownika. To kolejny czynnik zwiększający komfort pracy, a potencjalnie także jakość dostarczanych rozwiązań.

Oprócz statycznego typowania TypeScript dostarcza również inne funkcje rozszerzające JavaScript. Do najciekawszych z nich należą interfejsy, enumy oraz dostęp do dekoratorów.

Ponadto wiele popularnych bibliotek i frameworków posiada wsparcie dla TypeScriptu, a część z nich nawet wbudowane deklaracje typów. Takie paczki npm oznacza niebieską ikoną TS obok ich nazwy. Przykładem takiej biblioteki jest redux.

Jeśli jednak paczka nie posiada wbudowanych typów, mogą one istnieć w repozytorium DefinitelyTyped. Repozytorium to zawiera typy dla popularnych bibliotek i jest rozwijane przez społeczność. Paczki, dla których zostały zdefiniowane typy w DefinitelyTyped, oznaczone są w npm białą ikoną TS. Typy ze wskazanego repozytorium są dostępne w postaci osobnych paczek dostępnych w formacie @types/nazwa_paczki i wymagają osobnej instalacji.

Przykładem takiej biblioteki jest lodash i odpowiadająca jej @types/lodash. Jeśli dla wykorzystywanej zależności nie ma wbudowanych typów ani nie zostały one dodane do DefinitelyTyped, to można przygotować typy manualnie i osadzić je w projekcie w pliku definicji typów z rozszerzeniem .d.ts. Rozwiązanie to będzie szczególnie przydatne w przypadku stosowania rozwiązań niszowych lub takich, których przepisanie na TypeScript jest nieopłacalne czasowo.

Kolejną niewątpliwą zaletą TypeScriptu jest stojąca za nim społeczność. Zmiany w głównym repozytorium TypeScriptu widać praktycznie codziennie. Część z nich stanowią kontrybucje dokonywane przez użytkowników.

Oprócz samego rozwoju TypeScriptu społeczność udziela się na forach, blogach, YouTube, a także dostarcza produkty w postaci kursów, szkoleń i książek. Na moment publikacji artykułu liczba zadanych pytań związanych z TypeScriptem w serwisie Stack Overflow przekroczyła 227 tysięcy.

Za rozwojem TypeScriptu stoi Microsoft. Sam fakt, że za danym rozwiązaniem stoi duży gracz, ciężko ocenić jako jednoznacznie dobry. Przykładowo Google znane jest z uśmiercania swoich produktów. Jednak w tym konkretnym przypadku fakt opracowania TypeScriptu przez Microsoft uważam za zaletę.

Moim zdaniem rozwój TypeScriptu nie zostanie szybko zakończony z powodu jego popularności, korzyści wynikających ze stosowania tej technologii i braku realnych alternatyw.

Jak zacząć naukę TypeScriptu?

Na samym wstępie warto podkreślić, że jeśli Twój projekt jest napisany w czystym JavaScripcie, to rozpoczęcie przygody z TypeScriptem nie wymaga wiele pracy, gdyż kod w tym języku współpracuje z tym napisanym w JavaScripcie. Migracja kodu z JavaScriptu do TypeScriptu może odbywać się stopniowo.

Zanim jednak wdrożysz TypeScript do projektu komercyjnego, zachęcam do wypróbowania go w małym projekcie pobocznym. Do przygotowania pierwszej aplikacji w TypeScripcie możesz wykorzystać gotowy poradnik z sekcji Get Started z dokumentacji TS.

Pozwoli Ci to na sprawdzenie, jak wygląda praca z kodem TypeScript w praktyce, a także poznanie jego cech charakterystycznych w bezpiecznych warunkach. Innym świetnym rozwiązaniem jest piaskownica dla TypeScriptu, która umożliwi Ci szybkie prototypowanie kodu i weryfikację bez konieczności instalacji i konfiguracji TS na Twoim komputerze.

Twoim największym przyjacielem w procesie nauki TypeScriptu będzie oficjalna dokumentacja. Osobiście uważam ją za jedną z lepszych, z jakimi miałem okazję pracować. Dokumentacja poprowadzi Cię za rączkę oraz w prosty sposób wyjaśni Ci podstawowe zagadnienia i mechanizmy, jakie oferuje ten nadzbiór JavaScriptu.

Pamiętaj jednak, że od czytania dokumentacji ważniejsza jest praktyka, dlatego po raz kolejny zachęcam Cię do wypróbowania TypeScriptu w praktyce i posiłkowania się dokumentacją. Zapewne popełnisz wiele błędów i kilka razy się potkniesz, ale o to właśnie chodzi! W końcu “jak się nie przewrócisz, to się nie nauczysz” .

Praktyczne porady na rozpoczęcie przygody z TypeScriptem

Na koniec zostawię Ci garść praktycznych porad, które warto zapamiętać, rozpoczynając naukę Typescriptu:

• Zapoznaj się z pojęciem typowania strukturalnego, na którym bazuje TypeScript.

 

• Wykorzystaj zalety typowania strukturalnego. Czasami oczekiwanie przekazania obiektu spełniającego interfejs będzie znacznie lepszym pomysłem niż oczekiwanie obiektu określonej klasy. Będzie to szczególnie przydatne, jeśli wykorzystujesz w swoim kodzie Dependency Injection.

 

• Unikaj stosowania typu any w swoim kodzie. Czasami będzie to nieuniknione, ale zwykle wykorzystanie any to droga na skróty, która niweluje korzyści wynikające z wdrożenia TypeScriptu.

 

• Unikaj stosowania klauzuli @ts-ignore. Pozwala ona na wyciszenie błędów kompilatora. Podobnie jak w przypadku typu any czasami jest ona nieunikniona, ale zwykle wyeliminowanie błędu jest możliwe.

 

• Unikaj primitive obsession w swoim kodzie. Zamiast przekazywania do metod listy parametrów warto rozważyć wykorzystanie object params. Pamiętaj, że TypeScript jedynie sprawdza typ przekazanej zmiennej, co w przypadku kilku parametrów tego samego typu wprowadza ryzyko pomylenia ich kolejności.

 

• Stosuj z rozwagą typy generyczne. Nadużywane mogą zmniejszyć czytelność kodu i utrudnić jego zrozumienie.

 

• Używaj z rozwagą operatora “as”, w szczególności formy “as unknown as”. Operator „as” pozwala na rzutowanie (casting) jednego typu na inny, co powinno być wykorzystywane jedynie w uzasadnionych przypadkach. Czasami jednak jego zastosowanie wynika z błędów typowania.

 

• Używaj z rozwagą operatora “!”. Wykorzystuje się go, gdy zmienna oznaczona jest jako potencjalne false value, ale programista wie, że w danym miejscu zmienna na pewno ma wartość niebędącą null lub undefined. Jeśli jest to możliwe, bezpieczniejsze jest zastosowanie mechanizmu type guard.

 

• Pamiętaj, że TypeScript nie zabezpieczy Cię przed niektórymi charakterystykami JavaScriptu, takimi jak np. typeof(NaN) czy typeof(null).

Dlaczego warto korzystać z TypeScriptu? – podsumowanie i opinia eksperta

Mam nadzieję, że udało mi się zachęcić Cię do wypróbowania TypeScriptu. Po mojej trzyletniej przygodzie z tym językiem nie wyobrażam sobie powrotu do pisania kodu w czystym JavaScripcie. Komfort wynikający z wdrożenia TypeScriptu do projektu porównałbym do komfortu, jaki dają dobrze napisane testy automatyczne.

Podobnie do mnie umiejętność tę cenią pracodawcy. Dlatego gdy już poznasz podstawy TypeScriptu, nie zapomnij o tym wspomnieć w swoim CV.

🎉 Miło nam ogłosić nawiązanie współpracy z Dominikiem Szczepaniakiem, autorem bloga programistycznego devszczepaniak.pl! 🤝

Dominik jest autorem branżowym cenionym przez absolwentów naszego Programu Wdrożenia do Zawodu Junior-Front-end Developera, a jego e-book o pytaniach rekrutacyjnych na stanowisko Junior JavaScript Developera był wśród nich hitem.
Zainspirowało nas to do nawiązania kontaktu i połączenia sił w naszej wspólnej misji #WdrażaniaWiedzy i tworzenia wspierającej się społeczności IT.

Dominiku, serdecznie dziękujemy Ci za Twój wkład w Rock’n’Blog — You Rock! 🤘