TypeScript: Struktura tsconfig.json

3.9+

0:00Plik tsconfig.json jest bez wątpienia takim punktem centralnym każdego

0:04projektu typescript wynika to z faktu że to wewnątrz niego wykorzystujemy

0:08różnego rodzaju opcje które służą nam do tego abyśmy kontrolowali zarówno

0:12działanie samego typescriptu jaki jego kompilatora tych opcji

0:16jak pewnie sam się domyślasz jest dość sporo natomiast tobie wystarczy zrozumienie

0:21tych najważniejszych a każdą kolejną będziesz odkrywał samodzielnie mi

0:25zależy teraz na tym abyś zrozumiał jego role jego strukturę no i tak

0:29jak wspomniałem najważniejsze opcje które będziesz wykorzystywał na codzień

0:33tutaj jak widzisz mam już utworzony plik tsconfig który

0:38znajduje się w głównym katalogu mojego projektu i właśnie sam fakt obecności tego

0:42pliku sugeruje że znajdujemy się w głównym katalogu projektu teraz

0:47wszystkie opcje które mamy do dyspozycji możemy wywołać wciskając kombinacje klawiszy

0:51control i spacja zwróć uwagę że na głównym poziomie

0:55mamy ich do dyspozycji dosłownie kilka wynika to z faktu że

0:59najczęściej poruszamy się po właściwości compilerOptions to

1:03wewnątrz niej pojawiają się prawdziwe możliwości tego konfiguratora w

1:07kursie podstawowym przy okazji lekcji o pliku konfiguracyjnym omówiłem najważniejsze

1:13opcje których potrzebujemy praktycznie za każdym razem w kolejnych

1:17lekcjach przyjrzyjmy się nieco bardziej innym ustawieniom natomiast teraz chciałbym

1:21zwrócić twoją uwagę na jeden mały fak mianowicie gdy nasz projekt

1:25będzie się rozwijał a my będziemy coraz bardziej wymagający w stosunku do

1:29typescriptu może się zdarzyć że będziemy potrzebowali kilku plików

1:33konfiguracyjnych które możemy załączać do tego głównego pliku

1:38konkretnie możemy to zrobić poprzez rozszerzenie czyli

1:42jeżeli teraz utworze sobie tutaj nowy plik który również będzie

1:46zawierał opcję kompilatora będę w stanie ten plik załączyć

1:50do tego właśnie podając ścieżkę w tym miejscu i teraz

1:55jak zauważyłeś zarówno w jednym jak i drugim pliku znajduje się właściwość

1:59compilerOptions nic nie stoi na przeszkodzie abyśmy wewnątrz niej zdefiniowali

2:04dodatkowe opcje które będą połączone z opcjami które zdefiniowaliśmy

2:08tutaj w momencie gdyby te właściwości się powtórzyły zarówno w jednym

2:12jak i drugim pliku to musisz pamiętać że w pierwszej kolejności wczytywane

2:16są opcje z głównego pliku natomiast dopiero później wczytujemy kolejne

2:21pliki oznacza to że pliki które zdefiniujemy tutaj będą

2:25miały pierwszeństwo nad plikiem głównym inaczej mówiąc jeżeli tutaj

2:29mamy opcje target ustawioną na es5 a w naszym dołączanym

2:33pliku ustawimy tą opcję na es6 no to finalnie nasz

2:37kot skompiluje się do wersji es6 kolejnym godnym

2:41wspomnienia jest fakt że możemy tutaj wskazać poszczególne pliki które

2:46mają być wzięte pod uwagę w procesie kompilacji bądź też wskazać katalogi

2:50które mają zostać uwzględnione bądź też wykluczone proponuję

2:54abyśmy dodali teraz nasz plik app.ts do plików które mają zostać

2:58uwzględnione w procesie kompilacji oraz ustawię target na ESNext

3:02i teraz ważne jest to że w momencie gdybyś uruchomił teraz polecenie

3:07tsc app.ts kod typescript który

3:11znajduje się w tym pliku zostanie przekompilowany do javascriptu ale

3:15z pominięciem ustawień które mamy w pliku tsconfig.json mało

3:20tego jak widzisz pojawiły nam się tutaj błędy wynikające z faktu wynikające

3:24z faktu że wykorzystałem tutaj składnię async await a domyślnie kompilator

3:29próbował przetłumaczyć ten kod do wersji es3 i finalnie zaowocowało

3:33to kilkoma błędami tak czyli inaczej plik app.js został tutaj wygenerowany

3:38natomiast gdybyśmy chcieli skorzystać z ustawień które zdefiniowaliśmy

3:42w pliku tsconfig moglibyśmy przekazać do kompilatora flagę

3:47project dzięki temu nasz projekt zostanie skompilowany i przeniesiony

3:51do katalogu dist a wewnątrz niego ze względu na to że ustawiłem

3:55w pliku konfiguracyjnym opcję ESNext otrzymałem dokładnie

3:59taki sam kod nie został on w tej chwili w żaden sposób zmodyfikowany

4:04ze względu na to że w ESNext składnia async await jest

4:09jak najbardziej dostępna mam nadzieję że to wszystko jest dla ciebie jasne

4:13i na ten moment to wszystko kolejnym opcjom będziemy przyglądać się

4:17odpowiednio w kolejnych lekcjach mam nadzieję do usłyszenia za chwilę