TypeScript – pierwsze kroki. Dodawanie do projektu zewnętrznych modułów.

W ostatnich postach na temat TypeScript, opisałem jak korzystać z modułów. Nie będę po raz kolejny wymieniał zalet płynących z korzystania z tego mechanizmu podczas tworzenia programów. Powinno to być już dość oczywiste 🙂 .

Jeśli jednak nie jest to jeszcze oczywiste dla wszystkic, to na pewno ten post pomoże to zrozumieć. Dziś zajmę się zagadnieniem dodawania do projektu modułów zewnętrznych.

Nie oszukujmy się, w dzisiejszych czasach większość nowych aplikacji bazuje na gotowych modułach zewnętrznych. Czy są to małe biblioteki typu lodash czy kolosy w stylu angulara. Modułów w świecie JSa jest mnóstwo i dobrze bo wszyscy na tym korzystamy.

Jak jednak poradzić sobie z dodaniem takich modułów do projektu stworzonego w TypeScript, czyżby całe to dobrodziejstwo w postaci mnogiej ilości modułów zewnętrznych było dla programistów TS’a niedostępne?

Na szczęście tak nie jest. Wręcz przeciwnie, dodanie tego typu modułów jest bardzo proste. Potrzebujemy do tego dwóch rzeczy: pierwsza to wiedza na temat tego jak zachowują się różne moduły w TSie i jak z nich korzystać, druga to definicje typów z dodawanego modułu.

O ile ta pierwsza rzecz jest już dość oczywista o tyle ta druga nie koniecznie. Definicje typów potrzebne są do tego aby TS dobrze rozpoznawał typy wprowadzane przez zewnętrzną bibliotekę. Dzięki temu będzie wiadomo jakie metody i pola posiada element opakowany w obiekt jQuery lub jakie wartości zwracać będzie metoda wywołana z obiekt lodash.

Jeśli to co póki co nie ma sensu, spokojnie, zaraz przejdę do przykładów. Chciałbym stworzyć aplikację, która wykorzystywać będzie obie wspomniane wcześniej biblioteki, czyli jQuery oraz lodash.

Jak pisałem wyżej, najpierw potrzebuję definicji typów, tylko skąd je pobrać? Tutaj z pomocą przychodzi narzędzie Typings, które pobrać można z npm. Wystarczy zainstalować je globalnie używając w konsoli następującej komendy:

Oczywiście aby powyższe polecenie zadziałało, należy mieć zainstalowany na komputerze node.

Teraz można już instalować deklaracje typów wewnątrz projektu. Wystarczy w głównym folderze projektowym użyć komendy typings z odpowiednim atrybutem. Na przykład typings search i nazwa modułu, pozwoli odnaleźć odpowiednie deklaracje.

Wpisanie następującej komendy:

będzie miało taki skutek:

Jest to lista wszystkich deklaracji pasujących do wysłanego zapytania. Mamy tutaj trochę informacji, ale najbardziej interesujące w tym momencie są name czyli nazwa deklaracji oraz source czyli źródło.

W trzecim rzędzie pojawiła się paczka o nazwie jquery, to ją chcę zainstalować. Aby to zrobić, muszę użyć komendy typings install i podać nazwę deklaracji. To wystarczy jeżeli w kolumnie source widnieje global, w innym wypadku przed nazwą należy dodać nazwę źródła plus tylde (bez spacji).

W wypadku jquery źródło to dt, moja komenda będzie więc wyglądała tak:

Wpisanie jej jednak wyświetli komunikat, że ta deklaracja przypisana jest nie do modułu a do biblioteki dodanej do globalnego zakresu. Muszę więc dodać do mojej komendy jeszcze jeden parametr:

Teraz deklaracja zainstaluje się poprawnie. W projekcie powstanie nowy folder: typings, w którym z kolei powstanie folder globals, zawierający folder jquery z potrzebnymi mi deklaracjami. Ta struktura nie ma jednak znaczenia ponieważ TS sam już znajdzie potrzebne typy.

W zasadzie od tej chwili mogę używać w TypeScriptowym projekcie jQuery. Edytor nie będzie zgłaszał błędów gdy zacznę używać obiektów i metod z tej biblioteki. Mało tego, będę otrzymywał odpowiednie podpowiedzi:

Wiadomo aby taki program zadziałał oprócz typów potrzebny też jest kod samej biblioteki, dostępny dla skompilowanego kodu, ale ten waurnek akurat można łatwo spełnić, na przykład dodając do dokumentu HTML odpowiedni tag script linkujący do CDNu jquery.

Dodanie do projektu lodasha będzie równie proste. Wyszukanie deklaracji tej biblioteki w typings pokaże nam, że jest ona dostępna w globalnym źródle. Do tego biblioteka występuje w formie modułu, więc do polecenia instalacji nie trzeba dodawać żadnej flagi. Wystarczy wpisać taką komendę:

I już możemy korzystać z typów lodasha. Oczywiście i tym razem zainstalowałem tylko deklaracje typów. Dodanie samej biblioteki należy wykonać osobno. W tym wypadku przyda się lokalna wersja modułu oraz jakiś module loader, cały proces opisałem w poprzednim wpisie.

To wszystko jeśli chodzi o dodawanie do projektu zewnętrznych modułów. Mam nadzieję, że udało mi się pokazać, że nie jest to wcale takie trudne. Jak zawsze w takim wypadku najlepiej spróbować pobawić się tymi opcjami na własną rękę.

To wszystko na dziś. Jeżeli chcesz być na bieżąco z postami na blogu zachęcam do polubienia mojej strony na facebooku. Zawsze zamieszczam tam informacje o wszystkich nowościach. Jest to też dobre miejsce na kontakt ze mną. Na wszystkie pytania zawsze odpowiem :).