TypeScript: Pliki .d.ts

3.9+

0:00W tej lekcji pokażę ci w jaki sposób możesz tworzyć własne pliki zawierające

0:04definicje typów takie pliki posiadają rozszerzenie dts czyli

0:08definition typescript file i mogą być zarówno wykorzystywane w sytuacji

0:12gdy tworzymy własne moduły które chcemy udostępniać innym bądź korzystać

0:17z nich sami albo w sytuacji gdy pracujemy na istniejących plikach

0:21zawierających definicje typów i chcemy je w jakiś sposób rozszerzyć

0:25to wszystko pokażę ci najlepiej na prostym przykładzie mamy

0:29tutaj przykład z poprzedniej lekcji jednak różnica polega na tym że jak widzisz

0:33mamy tutaj błąd informujący nas o tym że typescript nie odnalazł pliku

0:37zawierającego definicji typów co ciekawe jednocześnie też sugeruje

0:41nam co możemy z tym zrobić czyli po prostu uruchomić polecenie npm install types / ramda

0:46no i oczywiście to rozwiązałoby nasz problem

0:51natomiast ja chciałbym ci pokazać w jaki sposób możesz tworzyć własne

0:55pliki z definicjami typów takie pliki możemy umieścić w katalogu

0:59typings bądź na przykład types w katalogu naszego projektu w tej

1:03sytuacji będą to pliki ramdy więc tworzę tutaj również podkatalog

1:07ramda wewnątrz tego podkatalogu tworzę kolejny plik o

1:11nazwie ramda.d.ts jak widzisz mój edytor rozpoznał

1:16że jest to plik typescript jednak jego ikonka różni się od klasycznego pliku

1:20typescript ze względu na to aby poinformować nas o tym że tutaj przechowujemy

1:25definicje czyli inaczej mówiąc tutaj zapisujemy wyłącznie

1:29kod typescript aby utworzyć teraz definicję typów dla naszego

1:33modułu o nazwie ramda potrzebujemy zadeklarować w następujący

1:37sposób moduł jego nazwa musi pokrywać się z oryginalną

1:41nazwą modułu a następnie wewnątrz nawiasów klamrowych eksportujemy

1:46poszczególne funkcje tak aby typescript miał do nich dostęp no i

1:50tutaj mamy naszą funkcję add i typujemy ją dokładnie tak jak robiliśmy

1:54to wcześniej natomiast różnica jest taka że tutaj skupiamy się wyłącznie na

1:58typowaniu a nie przechowujemy w niej implementacji zatem

2:02jeżeli teraz zakomentuję tą linię i wrócę teraz do naszego głównego pliku

2:06no to zwróć uwagę że typescript odnalazł już plik zawierający definicję

2:11typów dla ramdy i jest to konkretnie ten plik który utworzyliśmy

2:15w tym miejscu ale jednocześnie to zaowocowało kolejnym błędem informującym

2:20nas o tym że metoda add nie istnieje w pliku definicji typu dlatego

2:25też typescript nie jest w stanie nam tutaj w żaden sposób pomagać ale

2:30już w momencie gdy odkomentuję tą linię od razu mamy informację

2:34że błąd z tego pliku zniknął no i faktycznie wszystko działa mało

2:38tego zyskałem tutaj wszystkie korzyści wynikające z posiadania typów czyli

2:42mam tutaj informacje o tym jak wygląda ta funkcja oraz również visual

2:47studio code podpowiada mi składnię czyli zasadniczo już teraz wiesz

2:51w jaki sposób tworzyć pliki zawierające definicję typów dla twoich pakietów

2:55natomiast powiedziałem ci również o tym że możesz rozszerzać

2:59istniejące pakiety czyli wyobraź sobie tutaj sytuację polegającą

3:03na tym że chcesz w jakiś sposób rozszerzyć definicję typów które

3:07są dostępne bezpośrednio w pakiecie zainstalowanym przez ramdę zatem proponuję

3:11abyśmy zainstalowali teraz ten pakiet i zobaczyli co

3:15się stanie patrząc na to na pierwszy rzut oka nic

3:20się nie zmieniło dalej posiadam tutaj podpowiadanie składni oraz pełne informacje o funkcji

3:24add natomiast problem tutaj polega na tym że sama ramda

3:28udostępnia nam zdecydowanie więcej metod do których w tej chwili nie mamy dostępu

3:32wynika to z faktu że zainstalowany przez nas moduł który w

3:36tej chwili trafił do katalogu node modules do podkatalogu types

3:40nie został wczytany ze względu na to że zdefiniowaliśmy ten moduł w tym

3:44miejscu czyli jeżeli teraz zakomentuję ten kod nagle okazuje

3:49się że został wczytany ten oryginalny moduł i mamy dostęp do wszystkich

3:53metod oferowanych przez ramdę przy czym wynika to teraz z faktu że

3:57zadeklarowane przez nas definicje nie istnieją no to pytanie co

4:01teraz mógłbym zrobić aby wykorzystać również definicje które pochodzą stąd

4:05okazuje się że sprawa jest stosunkowo prosta potrzebuję

4:10zaimportować ramdy do naszego pliku oraz w pliku konfiguracyjnym typescriptu

4:14ustawić następującą opcję będzie to opcja

4:18typeRoots zawierająca ścieżki które typescript ma przeszukiwać w celu odnalezienia

4:22plików zawierających definicję typów no więc w naszym przypadku będzie

4:27to katalog node modules / types oraz nowo utworzony katalog

4:31types teraz po zapisaniu tego pliku teoretycznie nic się nie

4:35stało ale tak naprawdę metoda add otrzymała tutaj dodatkowe przeciążenie

4:39aby ci to udowodnić ponownie w pliku zawierającym definicję

4:44zakomentuję teraz ten eksport i teraz mamy jasny dowód tego że

4:49faktycznie ten dodatkowy plik zostaje tutaj uwzględniany w tym

4:53konkretnym przypadku oczywiście nie ma to jakiegoś dużego znaczenia ale tak jak

4:57powiedziałem w niektórych sytuacjach okazuje się to być szczególnie przydatne chciałem

5:01żebyś wiedział że taka możliwość istnieje jednocześnie też w zdecydowanej

5:06większości przypadków będziemy wykorzystywać definicje typów dostępnych na

5:10stronie definitely typed org o której mówiłem w poprzedniej lekcji tak

5:14czy inaczej jest jeszcze jedna rzecz którą chciałbym ci pokazać mianowicie

5:18jeżeli teraz w pliku konfiguracyjnym dodam następującą opcję

5:22ustawioną na true oraz dodatkową opcję lib która w

5:26tym konkretnym przypadku wymagana jest wyłącznie przez dodatkowe funkcje ramdy

5:31no to jeżeli teraz skompiluję nasz projekt za chwilę

5:35w katalogu dist pojawi się nie tylko plik app.js ale

5:39również plik zawierający definicję typów w tej chwili zawiera on oczywiście

5:43jeden prosty eksport ale wystarczy że w pliku app.ts na przykład eksportuję

5:47jakąś funkcję a następnie znowu skompiluję nasz projekt to

5:52w tym momencie definicje typów faktycznie zostały dodane i

5:57na tym etapie na temat tworzenia oraz generowania plików zawierających

6:01definicje typów wiesz w zasadzie wszystko to czego potrzebujesz

6:05teraz dziękuję ci za uwagę i zapraszam cię do obejrzenia kolejnej lekcji