PWA

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.

    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 interpretują kod, tj. uruchamiają go linijka po linijce. W skrajnej sytuacji błąd może nigdy nie wystąpić. 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 i do końca życia aplikacji będę miał ten typ zapewniony.

•

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

    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.