Frontend Academy · Lekcja

Tryb ścisły i eliminowanie any

Włączy Pan/Pani wszystkie flagi trybu ścisłego w tsconfig, użyje unknown zamiast any, bezpiecznie zastosuje asercje typów i zmigruje słabo typowany plik do trybu ścisłego.

Tryb ścisły i eliminowanie any to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Dlaczego tryb strict?

strict: true w pliku tsconfig.json włącza wszystkie flagi bezpieczeństwa TypeScriptu — to standard dla poważnych projektów. Wykrywa błędy związane z null, parametry bez typów i niebezpieczne przypisania już podczas kompilacji.

Co włącza strict

strict to meta-flaga, która włącza: noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, alwaysStrict, noImplicitThis, useUnknownInCatchVariables.

strictNullChecks

Bez tej flagi wartości null i undefined można przypisać do każdego typu — to stałe źródło błędów. Po jej włączeniu należy jawnie obsługiwać przypadki null.

// Without strictNullChecks — runtime error:
function greet(name: string) { return name.toUpperCase(); }
greet(null); // compiler allows, crashes at runtime

// With strictNullChecks:
function greet(name: string | null) {
  if (name == null) return '';
  return name.toUpperCase();
}

noImplicitAny

Parametry bez adnotacji typu bez tej flagi domyślnie otrzymują typ any — system typów jest w ten sposób po cichu omijany. Po włączeniu noImplicitAny należy je opisać adnotacjami.

// Without noImplicitAny:
function format(value) { return value.toUpperCase(); } // value: any

// With:
function format(value: string) { return value.toUpperCase(); }

strictPropertyInitialization

Pola klas bez jednoznacznego inicjalizatora stają się potencjalnie niezdefiniowane. Należy je zainicjalizować albo użyć operatora definite assignment !.

class User {
  name!: string;     // tell TS: I'll set this elsewhere
  age = 0;           // default initialiser
  email: string;     // ERROR with strictPropertyInitialization
  constructor(email: string) { this.email = email; } // FIX: init in ctor
}

Używanie unknown zamiast any

any wyłącza sprawdzanie typów. unknown jest bezpieczny typowo — przed użyciem należy zawęzić jego typ. Zawsze należy preferować unknown.

// any — no checks, bug magnet:
function parse(input: any) {
  return input.toUpperCase(); // compiler is fine, runtime may crash
}

// unknown — must narrow:
function parse(input: unknown) {
  if (typeof input === 'string') {
    return input.toUpperCase();
  }
  throw new Error('Expected string');
}

Bezpieczne asercje typów

Jeśli trzeba użyć asercji (mają Państwo większą wiedzę niż TS), należy preferować składnię as. Nie należy stosować podwójnej asercji (x as unknown as T), chyba że naprawdę nie ma innego wyjścia — to zapach kodu.

const el = document.getElementById('app') as HTMLDivElement;
el.style.background = 'blue';

// Safer alternative: runtime check
const el = document.getElementById('app');
if (!(el instanceof HTMLDivElement)) throw new Error('app missing');
el.style.background = 'blue'; // narrowed to HTMLDivElement

Usuwanie any z projektu

Strategia: należy włączyć strict i naprawiać wynikające z tego błędy, po jednym pliku naraz. Należy używać unknown i zawężania typów. W znanych problematycznych miejscach należy dodać @ts-expect-error wraz z komentarzem TODO, aby nie można było ich zignorować.

Reguła lintowania: no-explicit-any

Należy dodać @typescript-eslint/no-explicit-any do konfiguracji ESLint, aby blokować dodawanie nowych wystąpień any.

// .eslintrc.json
{
  "rules": {
    "@typescript-eslint/no-explicit-any": "error"
  }
}

strictFunctionTypes

Wymusza kontrawariantne sprawdzanie parametrów funkcji — zapobiega przypisywaniu funkcji z szerszymi typami parametrów niż oczekiwane, co mogłoby spowodować awarię w czasie działania.

Typ zmiennej catch

useUnknownInCatchVariables sprawia, że catch (e) wywnioskuje e: unknown zamiast any. Przed uzyskaniem dostępu do właściwości należy zawęzić typ.

try {
  doRisky();
} catch (e) {
  // e is unknown
  if (e instanceof Error) {
    console.error(e.message);
  } else {
    console.error('Unknown error', e);
  }
}

Wskazówki dotyczące migracji

W nowych projektach należy włączyć strict od pierwszego dnia. W starszych projektach flagi należy włączać stopniowo. Najpierw warto włączyć strictNullChecks (największa korzyść), a następnie noImplicitAny. Należy używać //@ts-expect-error zamiast //@ts-ignore, aby komentarz można było usunąć po naprawieniu problemu.

Szybki test

Dlaczego unknown jest bezpieczniejszy niż any, gdy typ wartości jest nieznany?

Podsumowanie: tryb strict

Należy włączyć strict: true, aby uzyskać pełne bezpieczeństwo typów. strictNullChecks wymusza obsługę wartości null. noImplicitAny wymaga adnotacji parametrów. strictPropertyInitialization dotyczy pól klas. Należy używać unknown zamiast any i zawężać typ za pomocą strażników typów. Należy unikać podwójnych asercji. Kod należy sprawdzać za pomocą no-explicit-any. Starszy kod należy migrować po jednym pliku, używając znaczników @ts-expect-error.

Często zadawane pytania

Czy lekcja „Tryb ścisły i eliminowanie any” jest bezpłatna?

Tak — pełny tekst „Tryb ścisły i eliminowanie any” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Tryb ścisły i eliminowanie any”?

Włączy Pan/Pani wszystkie flagi trybu ścisłego w tsconfig, użyje unknown zamiast any, bezpiecznie zastosuje asercje typów i zmigruje słabo typowany plik do trybu ścisłego. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Tryb ścisły i eliminowanie any”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy