Polski frontend

Piotr Kowalski — JavaScript, Front-end oraz Node.js

TypeScript: Jak zacząć?

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

Miejsce: Campus Warsaw 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?

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.

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();

Uruchomienie projektu (w trybie developerskim)

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

$ npm install -g parcel-bundler

Polecenie wykonujemy w katalogu projektu:

$ parcel index.html

Od teraz aplikacja jest dostępna pod adresem http://localhost:1234 :rocket:

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 :heart:

Prośba

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

Z pozdrowieniami dla Aleksandra.