Articles
Wprowadzenie do TypeScript
TypeScript i tsconfig.json

TypeScript i tsconfig.json

Ten artykuł wyjaśnia TypeScript i tsconfig.json.

Zaczynając od podstawowej roli TypeScript, wyjaśnimy na konkretnych przykładach, jak tsconfig.json funkcjonuje w projekcie.

YouTube Video

TypeScript i tsconfig.json

TypeScript to „JavaScript z typami”. Jednak aby skutecznie korzystać z TypeScript w prawdziwych projektach, niezbędne jest poprawne zrozumienie oraz świadome skonfigurowanie tsconfig.json.

Dlaczego potrzebujemy TypeScript?

Głównym powodem używania TypeScript jest 'możliwość wykrycia błędów przed uruchomieniem'.

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

Ten kod nie spowodowałby błędu w JavaScript aż do uruchomienia, natomiast w TypeScript prowadzi do błędu typu podczas kompilacji.

To 'wczesne wykrywanie' znacząco poprawia efektywność i jakość programowania.

Jak wykonywany jest TypeScript?

Z zasady TypeScript nie może być wykonywany bezpośrednio. Musisz przekształcić go na JavaScript za pomocą tsc (TypeScript Compiler)..

1npm install -D typescript
2npx tsc --init
  • Wykonując tę operację, generowany jest plik tsconfig.json, stanowiący centralny plik definiujący zachowanie projektu TypeScript.

Jaką rolę pełni plik tsconfig.json?

tsconfig.json to plik konfiguracyjny, który określa 'które pliki', 'według jakich reguł' i 'jak je przekształcić'.. Chociaż na pierwszy rzut oka może się wydawać skomplikowany, tylko kilka ustawień jest naprawdę ważnych.

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}
  • Dzięki tym ustawieniom możliwy jest nowoczesny i bezpieczny rozwój w TypeScript.

target: Wersja JavaScript do wygenerowania

target określa poziom specyfikacji generowanego JavaScript.

1"target": "ES2020"

Dzięki temu TypeScript wygeneruje kod JavaScript zgodny z ES2020. Dla starszych środowisk wybierz ES5; dla najnowszych środowisk – ES2022 itd.

Przy ustawieniu ESNext 

1"target": "ESNext"

  • ESNext oznacza, że najnowsza dostępna składnia JavaScript zostanie wygenerowana bez zmian. TypeScript nie transpileruje składni, pozostawiając jej obsługę środowisku uruchomieniowemu, np. Node.js lub przeglądarkom.

  • Dlatego ESNext jest odpowiedni, gdy kierujesz projekt tylko na najnowsze wersje Node.js lub używasz Babel/bundlera do osobnego transpilowania. Z drugiej strony, jeśli środowisko uruchomieniowe nie obsługuje najnowszej składni, może to prowadzić do błędów w czasie wykonywania – należy uważać.

module: Określ format modułu

module określa format modułu.

1"module": "ESNext"
  • ESNext to standard na froncie oraz w nowoczesnych środowiskach Node.js.
  • Wybierz "CommonJS" tylko jeśli jest to niezbędne.

strict: Maksymalizuj bezpieczeństwo typów

strict to przełącznik maksymalizujący bezpieczeństwo w TypeScript.

1"strict": true
  • Włączenie tej opcji pozwoli wychwycić wszelkie niejednoznaczności typów i potencjalne błędy.

tryb strict i niejawny any

Po włączeniu strict, TypeScript traktuje zmienne, których typów nie można wywnioskować, jako błąd.

1function printValue(value) {
2	console.log(value);
3}
  • Ta zmienna value nie ma informacji o typie podczas deklaracji, więc TypeScript nie może określić jej typu. W rezultacie TypeScript używa domyślnie typu any, co w trybie strict wygeneruje ostrzeżenie (błąd).
1function printValue(value: number) {
2	console.log(value);
3}
  • Wyraźnie określając typ w ten sposób, TypeScript wie, że „ta zmienna obsługuje tylko liczby”. W TypeScript ważniejsze jest, aby typ mógł zostać jednoznacznie określony, niż by typ mógł być pominięty.

include/exclude: Kontrola nad tym, które pliki będą kompilowane

W pliku tsconfig.json możesz określić które pliki uwzględnić, a które wykluczyć z kompilacji.

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}
  • W ten sposób tylko pliki znajdujące się w src będą zarządzane przez TypeScript.
  • node_modules wskazane w exclude nie będą kompilowane, nawet jeśli ich ścieżka znalazła się w include.

outDir: Określ katalog wyjściowy

Ustaw outDir, aby zarządzać miejscem dla plików wynikowych.

1"outDir": "dist"
  • Dzięki temu wszystkie wyniki kompilacji trafią do folderu dist. W praktyce oddzielanie kodu źródłowego od artefaktów kompilacji to standard.

rootDir: Określ katalog źródłowy

rootDir określa katalog traktowany przez TypeScript jako źródłowy.

1"rootDir": "src"

  • To ustawienie pozwala TypeScript zachować strukturę katalogów na podstawie src podczas generowania plików. Na przykład src/index.ts zostanie wygenerowany jako dist/index.js.

  • Struktura katalogów określona w rootDir zostanie odzwierciedlona w outDir.

esModuleInterop: Łączenie CommonJS i ES Modules

Następnie przyjrzyjmy się opcji esModuleInterop.

1"esModuleInterop": true
  • Jeśli ta opcja jest włączona, można bezpiecznie używać modułów CommonJS z składnią import.
1import fs from "fs";
  • To ustawienie jest prawie niezbędne podczas pracy z Node.js.

noImplicitAny: Zakaz niejawnych typów 'any'

Ważne jest także wzmocnienie kontroli typów w tsconfig.json.

1"noImplicitAny": true
  • Dzięki temu możesz zakazać używania niejawnych typów any. To umożliwia niezawodne wykrycie miejsc, w których zapomniano określić typ.

Konfiguracja wykrywania nieużywanego kodu

Ustawienia wykrywające nieużywany kod są również pomocne w poprawie łatwości utrzymania projektu.

1"noUnusedLocals": true,
2"noUnusedParameters": true
  • Dzięki temu zbędne zmienne i argumenty są natychmiast oznaczane ostrzeżeniami.

lib: Określ wbudowane API dostępne do użycia

lib to ustawienie określające standardowe API, których obecność TypeScript zakłada.

1"lib": ["ES2020", "DOM"]
  • Dzięki temu ustawieniu dostępne stają się następujące typy:. Dzięki ES2020, dostępne stają się nowoczesne funkcje, takie jak Promise, Map i Set. Dzięki DOM dostępne są API przeglądarkowe, takie jak document, window i HTMLElement.

Na froncie należy uwzględnić DOM; dla projektów tylko Node.js usuń DOM, aby uniknąć niepotrzebnych globalnych typów.

moduleResolution: Reguły wyszukiwania modułów

moduleResolution określa w jaki sposób rozwiązywane są moduły określone w importach.

1"moduleResolution": "Node"

Dwie główne opcje to:.

  • Jeśli wybierzesz Node, używane są reguły rozwiązywania modułów Node.js.
  • Classic to starsza, specyficzna dla TypeScript metoda, obecnie rzadko używana.

W środowiskach z Node.js lub bundlerem bezpiecznie jest wyraźnie ustawić Node.

Minimalny, gotowy do produkcji tsconfig.json

Na podstawie powyższych informacji, minimalny, gotowy do produkcji plik tsconfig.json wyglądałby następująco:.

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

Ta konfiguracja stanowi bezpieczną podstawę zarówno dla projektów frontendowych, jak i Node.js.

Podsumowanie: tsconfig.json to 'zbiór reguł'

tsconfig.json to nie tylko plik konfiguracyjny, ale 'zbiór reguł' dla całego projektu. Dzięki tsconfig.json jasno określasz takie zasady jak:.

  • Poziom bezpieczeństwa typów.
  • Konwencje kodowania dla zespołu.
  • Zapobieganie przyszłym błędom.

Dzięki zrozumieniu tsconfig.json będziesz w stanie nie tylko pisać w TypeScript, ale również projektować bezpieczne środowiska TypeScript w swoich projektach.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Najlepsze praktyki programowania w TypeScript