Przepisanie w stylu Go w TypeScript 7: co to oznacza dla bezpieczeństwa typów w React

Kompilator przepisany na Go, doskonalsza inferencja typów i jeden mniej powód, by pozostawiać swoje zmienne bez określenia typu.

Załóżmy średniej wielkości bazę kodu React, w której zwykłe uruchomienie narzędzia tsc trwa ponad 45 sekund po raz pierwszy podczas kompilacji. Wtedy musisz cały czas obserwować terminal, kwestionując każdą decyzję architektoniczną, która doprowadziła cię do takiej sytuacji. TypeScript 7 obiecuje sprawić, że taki scenariusz stanie się przeszłością. To nie jest zwykłe uaktualnienie wersji — to całkowita przebudowa kompilatora, a jeśli React jest twoim codziennym narzędziem, warto mu zwrócić uwagę.

Co dokładnie zmieniło się w TypeScript 7?

Oto główny punkt: zespół TypeScript przeniósł kompilator z JavaScript na Go. Wstępne testy pokazują, że czas budowania projektu oraz czas uruchamiania edytora są mniej więcej dziesięć razy szybsze. To nie jest tylko hasło marketingowe — bezpośrednio rozwiązuje problem opóźnień, które odczuwasz, gdy tsserver ma trudności z nadążaniem za rozbudowanym monorepo zaraz po jego otwarciu.

Dla deweloperów React w szczególności wyróżniają się trzy zmiany:

• Kontrola typów działa znacznie szybciej w plikach bogatych w JSX — co jest ulgą dla tych, którzy utrzymują system projektowy składający się z setek komponentów
• Poprawiło się ograniczanie strumienia sterowania, co zmniejsza konieczność użycia nieprzyjemnych przekształceń typów, które wcześniej były konieczne w logice renderowania warunkowego
• Inferencja domyślnych typów dla generyk jest bardziej ścisła, co wpływa na niestandardowe hooki w sposób większy, niż można by się spodziewać

Praktyczny wpływ na bazy kodu React

Kod w React mocno opiera się na wzorcach takich jak useState<T>, useReducer, niestandardowych hookach oraz dostawcach kontekstu. To właśnie w tych obszarach silnej inferencji typów przepisywanie TypeScript 7 przynosi największe korzyści.

Prawdziwy przykład: definiowanie niestandardowego hooka

Rozważmy typowy hook useFetch napisany w starym stylu, gdzie inferencja typów często rozszerza się do any w ścieżkach związanych z błędami:

// Before: inference sometimes widens to `any` on error branches
function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<unknown>(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then(setData)
      .catch(setError); // error type was loosely inferred here
  }, [url]);

  return { data, error };
}

Pod wpływem bardziej restrykcyjnych zasad zawężania typów w TypeScript 7 blok catch teraz przyjmuje dokładniejszy, przewidywalny typ bez konieczności dodatkowych adnotacji — dzięki temu any nie zakrada się już potajemnie do reszty drzewa komponentów.

// After: TS7 narrows error handling paths more precisely
function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json() as Promise<T>)
      .then(setData)
      .catch((err: unknown) => {
        setError(err instanceof Error ? err : new Error(String(err)));
      });
  }, [url]);

  return { data, error };
}

Zalecane dalsze kroki

• Wdrażaj aktualizację stopniowo. TypeScript 7 został stworzony z myślą o kompatybilności wstecznej, ale warto sprawdzić swój proces budowania przed pełnym przeprowadzeniem zmian
• Zbadaj generyki używane w dostarczanych przez Ciebie hookach i providerach kontekstowych — bardziej rygorystyczne rozumienie typów może ujawnić błędy, które wcześniej były niewidoczne
• Po migracji ponownie uruchom swoje testy CI. Sam wzrost szybkości kompilatora może znacząco skrócić czas wykonywania procesów
• Oczekuj, że narzędzia z ekosystemu, takie jak Next.js, Vite i ESLint, potrzebują czasu, aby w pełni nadrobić zaległości, zanim wszystko będzie działać bezproblemowo

Testowanie tego rozwiązania w średniej wielkości projekcie Next.js przez kilka tygodni pokazało, że sama poprawa responsywności edytora wystarczyła, by uzasadnić wysiłek związany z migracją.

Wniosek: TypeScript 7 nie polega na nowej składni do opanowania — to kompilator, który w końcu nadrobił zaległości w odniesieniu do rzeczywistego zachowania dużych aplikacji React w praktyce. Jeśli „TypeScript wydaje się wolny” to częsta skarga w twoim zespole, ta wersja zasługuje na Twoją uwagę. Upewnij się tylko, że dokładnie przetestujesz proces budowania przed wdrożeniem go wszędzie.