Poradniki

Dlaczego TypeScript uratował mi 4 godziny w ostatni piątek

Autor Eric Kudler, Mentor Fullstack·20 września 2024·5 min czytania

W zeszły piątek o 16:14 byłem przekonany, że zamknę laptopa i zacznę weekend o czasie. Mieliśmy wrzucić małą poprawkę do API dla klienta z branży logistycznej, u którego obsługujemy 47 aktywnych kont kierowców. Nagle edytor zaświecił się na czerwono w miejscu, którego nikt z nas nie dotykał od 3 tygodni. Okazało się, że TypeScript wyłapał błąd logiczny w danych, który bez typowania położyłby cały system przy pierwszej próbie logowania.

Piątkowa walka z czasem i literówka za 0 zł

Sytuacja była prosta: dopisywałem nową funkcję do modułu rozliczeń. W normalnym JavaScript, bez dodatkowej warstwy typów, pisałbym kod przez godzinę, a potem spędził kolejne trzy na szukaniu przyczyny, dla której pole 'invoice_id' nagle staje się puste. W Eric Kudler Fullstack Mentoring zawsze powtarzam moim kursantom, że kod, który działa, to taki, który sam o siebie dba. TypeScript zadziałał tutaj jak darmowy asystent, który krzyknął 'stój!', zanim błąd trafił na serwer. To nie była magia, tylko czysta logika struktury danych, którą narzuciliśmy sobie na początku projektu.

Zamiast siedzieć nad debugowaniem do 20:30, naprawiłem problem w 4 minuty. Literówka w nazwie właściwości obiektu, która przychodziła z bazy danych, była ukryta głęboko w funkcji mapującej. Bez TS musiałbym ręcznie sprawdzać console.logiem każdy krok przetwarzania danych dla 83 różnych pozycji w tablicy. Tutaj wystarczyło najechać myszką na czerwony wężyk w edytorze. To jest właśnie ta różnica między radosnym klepaniem w klawiaturę a budowaniem portfolio, które faktycznie działa i rozwiązuje problemy, a nie generuje nowe.

Wiele osób boi się TypeScripta, bo myślą, że to tylko pisanie dodatkowego kodu, który nic nie wnosi. Prawda jest taka, że te 4 godziny uratowane w piątek to realny czas, który mogłem poświęcić na odpoczynek albo na mentoring z nową grupą 7 osób, która właśnie zaczyna naukę Node.js. W małych projektach, gdzie budżet i czas są ograniczone, nie stać nas na błędy, które można wyłapać automatycznie. TypeScript to polisa ubezpieczeniowa, za którą płacisz tylko odrobiną większej uwagi podczas pisania.

TypeScript zadziałał tutaj jak darmowy asystent, który krzyknął 'stój!', zanim błąd trafił na serwer.
Piątkowa walka z czasem i literówka za 0 zł

Dlaczego console.log to najgorszy przyjaciel programisty

Często widzę u początkujących programistów tendencję do sprawdzania wszystkiego w konsoli. Piszą kawałek kodu, odświeżają przeglądarkę, patrzą co wyszło, poprawiają i tak w kółko. To jest lanie wody w procesie pracy. W Eric Kudler Fullstack Mentoring uczę, jak od tego odejść. Gdy masz dobrze skonfigurowany TypeScript, połowa Twoich testów odbywa się w locie. Nie musisz zastanawiać się, czy obiekt 'user' ma pole 'email' czy 'user_email'. Masz to podpowiedziane od razu. To oszczędza mnóstwo energii umysłowej, którą możesz zużyć na projektowanie logiki aplikacji.

Ostatnio jeden z moich kursantów, który pracuje nad systemem rezerwacji dla lokalnego warsztatu, miał problem z integrowaniem kalendarza. Męczył się z tym przez dwa dni, używając czystego JavaScriptu. Dane z API przychodziły w formacie ISO, a on próbował je dodawać jak liczby. Gdy zmieniliśmy plik na .ts i zdefiniowaliśmy interfejsy, edytor natychmiast pokazał 12 błędów. Naprawienie ich zajęło nam 18 minut podczas wspólnej sesji online. To jest właśnie to, co nazywam konkretną nauką kodowania: mniej domysłów, więcej pewności.

Praca z typami zmusza Cię też do myślenia o architekturze aplikacji zanim w ogóle zaczniesz pisać funkcje. Musisz wiedzieć, co wchodzi do systemu i co z niego wychodzi. To brzmi jak dodatkowa praca, ale w rzeczywistości to najkrótsza droga do celu. Jeśli chcesz budować portfolio, które zaimponuje rekruterowi w Gdańsku czy Warszawie, nie pokazuj mu tylko ładnych obrazków w React. Pokaż mu kod w TypeScript, który jest czytelny, bezpieczny i łatwy w utrzymaniu przez innych programistów.

Zasady gry w Eric Kudler Fullstack Mentoring

Moje podejście jest proste: siedzimy nad tym, aż ruszy, ale robimy to z głową. Nie uczę teorii z podręczników sprzed 5 lat. Skupiamy się na tym, co jest potrzebne w codziennej pracy programisty fullstack. Jeśli uczymy się TypeScripta, to nie po to, żeby pisać skomplikowane typy generyczne dla samej sztuki. Uczymy się go po to, żebyś mógł spokojnie pójść na kawę, wiedząc, że Twoja aplikacja nie wywali się po wpisaniu przez użytkownika litery zamiast cyfry w polu ceny.

W zeszłym kwartale 47 osób pod moim okiem zmieniło swoją ścieżkę zawodową. Większość z nich na początku uważała TypeScript za zbędną komplikację. Dzisiaj żaden z nich nie wyobraża sobie powrotu do czystego JS. Dlaczego? Bo zobaczyli, że dzięki typom mogą szybciej dostarczać funkcje, za które płaci klient. W biznesie liczy się efekt. Naprawmy to razem – jeśli Twój kod sprawia Ci ból, to znaczy, że brakuje mu struktury, którą daje TS.

Pamiętaj, że nauka kodowania to nie wyścig. To raczej rzemiosło. Budujemy solidne podstawy, żebyś potem nie musiał gasić pożarów w każdy piątkowy wieczór. Moje biuro na ul. Długiej 31 w Gdańsku widziało już wielu sfrustrowanych studentów, którzy po przejściu na TS nagle odzyskali radość z tworzenia. To nie jest kwestia talentu, tylko odpowiednich narzędzi i nawyków, które wpajamy sobie od pierwszego dnia mentoringu.

Moje podejście jest proste: siedzimy nad tym, aż ruszy, ale robimy to z głową.
Zasady gry w Eric Kudler Fullstack Mentoring

Małe kroki, czyli jak wdrożyć TS w 14 minut

Nie musisz od razu przepisywać całego projektu na TypeScript. Możesz zacząć od jednego pliku. W Eric Kudler Fullstack Mentoring pokazuję, jak stopniowo wprowadzać typowanie do istniejących aplikacji. Zaczynamy od najważniejszych części, takich jak komunikacja z bazą danych czy obsługa formularzy. To tam najczęściej zdarzają się błędy, które kosztują realne pieniądze i czas. Skonfigurowanie środowiska zajmuje dosłownie chwilę, a korzyści widzisz po pierwszej napisanej linijce.

Podczas naszych spotkań online często robimy tak zwany 'refactoring'. Bierzemy stary kod i krok po kroku zmieniamy go na nowoczesny standard. To najlepszy sposób, żeby zrozumieć, co TS robi pod maską. Nie ma tu żadnej magii, tylko czysta logika. Jeśli zdefiniujesz, że funkcja przyjmuje tylko liczby, to system nie pozwoli Ci przekazać tam tekstu. To banalne, ale w dużym projekcie, gdzie masz 156 różnych plików, taka kontrola jest zbawienna i zapobiega katastrofom.

Zakończę ten wpis krótkim podsumowaniem: te 4 godziny uratowane w piątek to nie był jednorazowy przypadek. To standard pracy, do którego dążymy w Eric Kudler Fullstack Mentoring. Chcę, żebyś Ty też mógł tak pracować. Konkretnie, bez zbędnego stresu i z poczuciem, że panujesz nad tym, co piszesz. Jeśli chcesz zobaczyć, jak skonfigurować swój pierwszy projekt w TS, zapraszam na darmową konsultację. Sprawdzimy Twój obecny kod i powiem Ci szczerze, co warto w nim poprawić.

Małe kroki, czyli jak wdrożyć TS w 14 minut