TypeScript: Jak zacząć?

• 3 minuty

Kojarzysz TypeScript? Nigdy nie używałeś? Chciałbyś spróbować? Jeśli tak to w tym artykule przedstawię Ci szybki sposób wykorzystania.

Baner promujący artykuł

Po co?

No właśnie. Zawsze przed użyciem jakiegoś narzędzia warto odpowiedzieć sobie na pytanie: po co mi <nazwa technologii>? Jeśli już mamy argumenty “za” i jest ich więcej niż tych “przeciw” to świetnie.

Jak to jest z TypeScriptem?

TypeScript mi pomaga w kilku aspektach. Może to nie jest zbyt dobre miejsce na ten temat, ale w krótkich “żołnierskich” słowach przedstawię Wam najważniejsze zalety TypeScripta (IMO).

  • 1. Interfejsy

    W projektach w których biorę udział (i tam gdzie jest TS) każdy obiekt ma zdefiniowaną strukturę. Pomaga to wyeliminować błędy typu undefined is not an object na poziomie kompilacji (pod warunkiem, że włączysz opcję strict, a przynajmniej strictNullChecks).

    Kompilacja to proces, kiedy kod zamieniany jest na zrozumiały dla programu, który go uruchomi (w naszym przypadku będzie to przeglądarka). Zachodzi on przed wykonaniem kodu przez przeglądarkę. Przeglądarki internetowe parsują cały skrypt przed uruchomieniem (błąd składni zatrzyma cały plik), ale błędy typów, np. wywołanie metody na undefined, wychodzą dopiero w trakcie działania, w konkretnej ścieżce kodu. W skrajnej sytuacji taki błąd może nigdy nie wystąpić podczas testów. W językach “kompilowalnych” czyli w TypeScript, kompilator w fazie “tłumaczenia” krzyknie kiedy nie zrozumie jakiegoś kawałka kodu.

  • 2. Typy wartości

    Era sprawdzania typu minęła. Dokładnie wiem z jakim typem wartości zmiennej mam do czynienia. Nie sprawdzam, czy jest stringiem, czy numberem. Po prostu ustalam podczas definicji jeden typ, a kompilator pilnuje, żeby kod go przestrzegał. Pamiętaj jednak, że typy znikają po kompilacji: dane z zewnątrz (odpowiedź API, JSON.parse, localStorage) mogą mieć w trakcie działania inny kształt, niż deklarujesz, więc takie dane warto sprawdzać, np. biblioteką do walidacji.

•

Jak napisać prosty projekt w TypeScript?

  1. Zmiana rozszerzenia głównego pliku

    Należy zaktualizować rozszerzenie głównego pliku *.js na *.ts.
    Zmiany dokonujemy w systemie plików.

    Oczywiście trzeba jeszcze zmienić ścieżkę do tego pliku w index.html.

  2. Napisz kod w TypeScript

    Przykładowy kod wzięty z przykładowego projektu:

     // main.ts
 import { Lib } from './lib';
 import { pure } from './pure';

 console.log(':: main ::');
 new Lib();
 pure();

  3. Uruchomienie projektu (w trybie developerskim)

    Jako narzędzie do uruchamiania projektu wykorzystamy parcel. Zainstalujmy go na początku.

    Copy + paste

     npm install -g parcel-bundler

    (Aktualizacja 2026: parcel-bundler to Parcel 1. Od 2021 roku jest Parcel 2 w pakiecie parcel: npm install -D parcel, a potem npx parcel index.html.)

    Polecenie wykonujemy w katalogu projektu:

    Copy + paste

     parcel index.html

Od teraz aplikacja jest dostępna pod adresem localhost:1234 🚀

Psst… Na moim GitHubie znajdziesz kod omawianej aplikacji.

•

Doświadczenie z TypeScriptem

Na swoim publicznym GitHubie mam kilka projektów w TypeScript. Opowiem Ci o dwóch testowych:

  • test-jasmine-typescript

    Projekt powstał aby dokonać konfiguracji projektu, gdzie wykorzystywana jest biblioteka Jasmine, a testy jednostkowe pisane są w TypeScript.

  • test-typescript-webpack

    Super prosta konfiguracja TypeScript + Webpack.

Mam też kilka projektów prywatnych o których nie za bardzo mogę opowiadać. Mogę delikatnie uchylić “rąbka tajemnicy”, że od jakiegoś czasu pracujemy z zespołem nad nowym projektem, który oparty jest na Angularze 5 - tym samym używamy TypeScripta i jest ❤️

•

Prośba

Drogi czytelniku, mam do Ciebie pytanie:
Odpowiedz mi proszę w komentarzu, dlaczego Ty używasz TypeScripta?

Z pozdrowieniami dla Aleksandra.

Cya! 👋