TypeScript: Ustawienia kompilacji

3.9+

0:00Kontynuując temat ustawień pliku tsconfig.json pokażę

0:04ci teraz ustawienia kompilacji z niektórych omówionych ustawień korzystaliśmy

0:08już na przestrzeni tego kursu bądź poprzedniego ale teraz przyjrzymy się

0:12im nieco bardziej w tym momencie znajdujemy się w pliku tsconfig.json

0:16i mamy tutaj takie podstawowe ustawienia kompilacji najczęściej

0:21wykorzystywaną przeze mnie opcją w tym kursie było ustawienie strict

0:25domyślnie to ustawienie jest wyłączone więc musimy pamiętać o tym

0:29aby ustawić jego wartość na true pierwszą rzeczą o której trzeba tutaj powiedzieć

0:33to fakt że nie chodzi tutaj wyłącznie o to aby ustawić tryb strict w plikach

0:38javascript w rzeczywistości ustawiając tą jedną opcję ustawiamy kilka

0:42innych za jednym zamachem zobaczmy więc co to są za opcję

0:46pierwszą z nich jest opcja noImplicitAny i ona

0:50również domyślnie jest ustawiona na false co ona dokładnie oznacza ano

0:55oznacza to że jeżeli jakaś zmienna z pomocą inferencji typów zostanie określona

0:59na typ any no to typescript potraktuje to jako błąd w

1:03praktyce możemy przejść do pliku app.ts no i utworzyć tutaj

1:07funkcję jeżeli funkcja ta będzie przyjmować teraz jakiś argument i nie określimy jego

1:12typu no to zwróć uwagę że typescript wyrzuca nam tutaj błąd i

1:17właśnie ten błąd jest związany bezpośrednio z opcją noImplicitAny jeżeli

1:21teraz ją zakomentuję i zapiszę plik informacja o błędzie zniknie

1:26ale nadal mamy tu pewnego rodzaju ostrzeżenie mówiące że wykorzystanie

1:30typu any nie jest raczej tutaj dobrym pomysłem ostatecznie

1:34więc proces kompilacji się tutaj powiedzie ale my musimy być świadomi tego

1:38że typescript nie będzie nas ostrzegał o tego typu sytuacjach zatem

1:43przywracam teraz tą opcję następną opcją jest noImplicitThis

1:47czyli kolejne ustawienie które broni nas przed tym

1:52abyśmy nie skończyli z nieokreślonym typem this i aby to zobaczyć

1:56utworzymy sobie teraz klasę będzie ta klasa User zawierająca jedną właściwość

2:01ustawioną na sztywno oraz metodę zwracającą funkcję która

2:05z kolei zwraca właściwość name tej klasy oczywiście gdyby metoda

2:09add zwracała bezpośrednio właściwość name wszystko byłoby tutaj w porządku

2:14ponieważ typescript samodzielnie jest w stanie określić typ this natomiast

2:18w momencie gdy przechodzimy tutaj do kolejnej funkcji nagle ten kontekst jest

2:22gubiony no i oczywiście moglibyśmy zamienić tą funkcję na funkcję

2:26strzałkowo i wszystko byłoby tutaj okej albo alternatywnie moglibyśmy

2:30tutaj określić typ this i właśnie o to abyśmy o tym nie zapominali dba

2:35opcja noImplicitThis kolejnym ustawieniem wchodzącym w skład ustawienia

2:39strict jest opcja alwaysStrict no i właśnie tutaj

2:43mamy bezpośrednie nawiązanie do javascriptu i jego ustawienia use strict włączając

2:49tą opcję mamy pewność że kompilator zawsze zadba o to aby tryb strict

2:53javascriptu był włączony kolejną opcją którą aktywuje nam tryb strict jest

2:58opcja strictBindCallApply czyli jak sama nazwa wskazuje

3:02dotyczy ona metod BindCall oraz Apply konkretnie

3:06zakomentuję ją teraz na chwilę i wrócimy do naszego piku app.ts w którym zdefiniuję

3:11funkcję przyjmującą dwa argumenty zadaniem tej funkcji będzie powtórzenie

3:15pierwszego argumentu czyli wiadomości podaną ilość razy no

3:20i teraz jeżeli wywołamy sobie tą funkcję wszystko jest tutaj w porządku ale sytuacja

3:24zmienia się nieco w momencie gdy wykorzystamy tutaj metodę apply i

3:28jak wiesz w drugim parametrem metody apply jest tablica do której przekazujemy

3:32wartości które mają zostać przekazane jako argumenty i problem

3:36tutaj polega na tym że jeżeli teraz przekażemy tylko jeden argument no

3:41to typescript w żaden sposób nie poinformuję nas o błędzie jeżeli jednak

3:45wrócimy do pliku tsconfig i włączymy naszą opcję no to

3:49teraz wracając do pliku mamy tutaj jasną informację o tym że przekazaliśmy

3:53niewłaściwe argumenty w momencie gdy dodam drugi argument wszystko

3:58jest tutaj w porządku możemy zahaczyć o jeszcze jeden błąd

4:02który pojawił nam się tutaj typescript informuje nas o tym że

4:06metoda repeat nie występuje w typie string a my wiemy że

4:10jednak występuje więc co tutaj jest nie tak ano chodzi o

4:14to że w pliku konfiguracyjnym możemy ustawić jeszcze właściwość

4:18lib do której możemy przekazać opcje es6 dzięki

4:23temu dołączamy tutaj dodatkową bibliotekę która zawiera rozszerzone informacje

4:27o typach dzięki temu problem który mieliśmy tutaj już zniknął

4:31i mało tego jeżeli chcielibyśmy odczytać teraz dostępne metody typu string no to

4:35nie byłoby z tym problemu korzystając teraz

4:39jeszcze z okazji podobna sytuacja może mieć miejsce z elementami związanymi

4:43bezpośrednio z przeglądarką czyli jak widzisz teraz odwołuję się do obiektu document

4:47i próbuję na nim wykonać metodę querySelector typescript

4:52informuje mnie tutaj o błędzie i mało tego od razu sugeruję rozwiązanie

4:56polegające na tym abyśmy w pliku konfiguracyjnym tutaj do tej tablicy

5:01dopisali DOM dzięki temu dodatkowe informacje o

5:05typach trafią już do typescriptu no i mamy tutaj kolejny błąd informujący

5:10nas o tym że przekazujemy do metody from niewłaściwy parametr

5:14tutaj naturalnie powinniśmy skorzystać z metody quarySelectorAll a

5:18następnie przekazać do niej jakiś argument tak że pamiętaj o tym

5:22że jeżeli chodzi o właściwość lib niemal zawsze warto dodać tutaj

5:26przynajmniej te dwie biblioteki no ale wróćmy teraz do tematu ustawienia

5:30strict bo kolejną opcją która włącza się razem z nim jest opcja

5:34strictFunctionTypes no i teraz aby pokazać ci sens

5:38tego ustawienia muszę utworzyć nową funkcję która jako argument będzie

5:43przyjmować callback callback ten będzie wykonywany a do niego

5:47w zależności od wylosowanej liczby będziemy przekazywać odpowiednio ciąg znaków

5:51lub liczbę jeżeli teraz skorzystamy z naszej funkcji

5:55i przekażemy do niej callback o następującym kształcie czyli jak widzisz

5:59jest to callback spodziewający się typu string no to w momencie gdy

6:03wykonamy tutaj console.log i odwołamy się do metody która jest dostępna wyłącznie

6:07dla typu string no to efekt końcowy będzie taki że

6:11raz na 50% przypadków otrzymamy błąd tylko tutaj muszę

6:15zakomentować tą linię no i teraz faktycznie mamy tutaj błąd a

6:20po zapisaniu pliku mamy odpowiedni wynik nie muszę chyba

6:24podkreślać że wystarczy że tutaj mielibyśmy jakieś działania asynchroniczne które

6:28pobierało by dane i zwracało różny typ no to mielibyśmy tutaj

6:33bardzo paskudny problem no ale być może powiesz że przecież mamy

6:37tutaj typ any więc dlaczego mamy się spodziewać że typescript poinformuje

6:41nas tutaj o błędzie no problem polega na tym że nawet jeżeli zdefiniujemy

6:45sobie tutaj dokładny typ tej funkcji a następnie ustawimy ten

6:49typ dla naszego argumentu no to typescript nagle ucichnie a

6:54nasz błąd dalej tutaj występuje w tym momencie jest okej teraz

6:58znowu teraz znowu i znowu ale

7:02niespodzianka błąd nadal występuje dopiero w momencie gdy

7:07aktywuję tą opcję typescript poinformuję mnie o błędzie który

7:11istnieje tutaj mianowicie callback który tutaj mamy nie jest zgodny

7:15typem z callbackiem którego spodziewamy się tu wracając

7:20teraz do pliku tsconfig.json czyli ścisłe inicjalizowanie właściwości

7:24tutaj istotny jest jeszcze fakt że aby ta opcja działała musimy

7:28ustawić jeszcze jedną czyli strictNullChecks teraz w momencie

7:32gdy wrócimy do naszego pliku i zdefiniujemy sobie tutaj klasę to jeżeli

7:37dodamy do niej właściwość i nie zainicjalizujemy jej bezpośrednio lub

7:41na przykład w konstruktorze no to typescript będzie wyświetlał nam tutaj jasny

7:45błąd mówiący o tym że nie możemy tak robić i dlaczego jest to ważne

7:50abyśmy tego pilnowali ano dlatego że jeżeli utworzę teraz nową instancję

7:54na podstawie tej klasy a następnie odwołam się do właściwości która

7:58teoretycznie istnieje no to powinienem otrzymać tutaj błąd tylko

8:03zakomentuję tą linię i jak widzisz faktycznie błąd istnieje

8:07i gdybym nie ustawił tych dwóch ostatnich opcji to ten błąd widoczny

8:11byłby dopiero w momencie wykonywania programu no a tego byśmy zdecydowanie

8:16nie chcieli tym oto sposobem zakończyliśmy omawianie ustawienia

8:20strict a konkretnie wszystkich opcji które się pod nim kryją teraz

8:25mam jeszcze dla ciebie kilka wskazówek których nie będę tak dokładnie omawiał

8:29mianowicie jedną z tych opcji jest noUnusedLocals czyli

8:33zasygnalizowanie nam zadeklarowanych zmiennych których nie używamy w programie

8:37podobnie możemy zrobić z parametrami funkcji tymczasem kolejną

8:42całkiem przydatną opcją jest wymuszanie na nas dodawania słowa kluczowego

8:46break do instrukcji warunkowej switch i tutaj pokażę

8:50szybko na przykładzie o co w tym dokładnie chodzi mianowicie wyobraźmy sobie

8:54tutaj sytuację w której mamy switch który w zależności od podanego

8:58argumentu wyświetla nam inny console.log no i w tej sytuacji jeżeli

9:02usuniemy tutaj słowo kluczowe break to typescript automatycznie

9:06poinformuję nas o tym że jednak musimy to zrobić dzięki temu

9:11wszystko jest tutaj w porządku no i tymczasem mam ostatnią opcję którą

9:15chciałbym się z tobą podzielić jest to opcja która zabezpiecza nas przed tym

9:19aby funkcje zwracały wartości niejawnie bo jak doskonale

9:23wiemy nawet gdy funkcja nie posiada słowa kluczowego return no to domyślną

9:27zwracaną z niej wartością jest wartość undefined w ten oto

9:31sposób przeszliśmy w mojej opinii przez takie najbardziej przydatne opcje pliku

9:35konfiguracyjnego typescriptu i na ten moment to już

9:39wszystko dziękuję ci za uwagę i zapraszam do kolejnej lekcji