Czym jest TypeScript? Prosty przewodnik dla niespecjalistów

TypeScript to JavaScript z typami. Dodajesz etykiety mówiące, jakiego rodzaju danymi ma być każda wartość — liczbą, tekstem, listą zamówień — a TypeScript sprawdza kod pod kątem niezgodności, zanim cokolwiek zacznie działać. Strona TypeScriptu opisuje go jako „JavaScript z składnią dla typów”; typy są usuwane, gdy kod zostaje zamieniony na zwykły JavaScript, który działa wszędzie, gdzie działa JavaScript.

Dlaczego to ma znaczenie, gdy budujesz z AI

Modele AI piszą kod szybko, a szybki kod ma błędy: pole customerName w jednym pliku i customer_name w innym, cena przekazana jako tekst zamiast liczby, funkcja wywołana bez wymaganej wartości. W zwykłym JavaScripcie wiele z tych błędów ujawnia się dopiero wtedy, gdy ktoś kliknie zły przycisk.

TypeScript wyłapuje wiele z nich wcześniej, podczas pisania kodu:

• AI dostaje natychmiastową informację zwrotną. Błędy typów wskazują dokładny wiersz z problemem, więc agent może go naprawić, zanim to zobaczysz.
• Zmiany są bezpieczniejsze. Zmień nazwę pola, a TypeScript oznaczy każde miejsce, które wciąż używa starej nazwy.
• Kod sam się wyjaśnia. Typy dokumentują, czego oczekuje i co zwraca funkcja, co pomaga tobie, AI i każdemu deweloperowi, który będzie z tym pracował później.
• Edytory są mądrzejsze. Autouzupełnianie i „przejdź do definicji” działają lepiej, bo edytor wie, czym jest każda wartość.

To jeden z głównych powodów, dla których wielu twórców aplikacji z AI domyślnie wybiera TypeScript.

Codzienna analogia

Pomyśl o magazynie wysyłkowym z oznaczonymi strefami. Każda strefa ma tabliczkę: „Tylko palety”, „Chłodnia”, „Maks. 500 kg”. Gdy przyjeżdża dostawa, kontroler przy wejściu porównuje towar z tabliczką. Mrożona ryba przeznaczona do strefy suchych produktów zostanie zatrzymana przy wejściu, a nie odkryta tydzień później, gdy zacznie śmierdzieć.

TypeScript to kontroler przy wejściu. Typy to tabliczki. Sprawdzenie odbywa się przed tym, jak towar — twój kod — trafi do użytku. A gdy wszystko jest już na miejscu, tabliczki są zdejmowane: działający JavaScript nie zawiera już żadnych typów.

Jak działa TypeScript

1. Ty (lub AI) piszesz pliki .ts lub .tsx — TypeScript z etykietami typów.
2. Sprawdzacz typów czyta kod i zgłasza niezgodności jako błędy w edytorze lub podczas budowania.
3. Krok budowania usuwa typy, tworząc zwykły JavaScript.
4. JavaScript działa w przeglądarce lub na serwerze (Node.js, Deno, Bun).

Ważna konsekwencja: TypeScript sprawdza kod, który napisałeś, a nie dane, które napływają w trakcie działania aplikacji. Jeśli zewnętrzne API zwróci coś nieoczekiwanego, TypeScript tego nie zobaczy, dopóki nie dodasz walidacji w czasie działania.

Przykład: formularz rezerwacji

Załóżmy, że budujesz aplikację do rezerwacji w salonie fryzjerskim. Oto typ opisujący rezerwację:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // znak ? oznacza pole opcjonalne
};

A funkcja, która oblicza zaliczkę:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

Zobacz teraz, co wyłapuje TypeScript.

Literówka w polu.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript zgłasza, że prise nie jest znaną właściwością, a price brakuje. W zwykłym JavaScripcie cicho obliczyłoby to zaliczkę NaN (nie liczbę).

Niewłaściwy rodzaj wartości.

const booking: Booking = { ...otherFields, price: "40" };

TypeScript zgłasza, że tekst nie może być użyty tam, gdzie oczekiwana jest liczba. Bez niego "40" * 0.2 akurat zadziała, ale "40" + 5 da "405" — błąd, który pojawia się na fakturze.

Usługa, która nie istnieje.

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript zgłasza, że "perm" nie jest dozwoloną usługą. Gdy salon później doda trwałe ondulacje, dopisujesz je do typu, a TypeScript pokazuje każde miejsce, które trzeba zaktualizować — cennik, formularz, kolory kalendarza.

Czego nie wyłapie. Jeśli formularz rezerwacji wyśle z przeglądarki na serwer price: "40", TypeScript po stronie serwera tego nie zobaczy w czasie działania. Dlatego dobrze zbudowane aplikacje również walidują przychodzące dane, często za pomocą biblioteki walidacyjnej, która sprawdza kształt i zamienia je na poprawny Booking.

TypeScript a JavaScript

Wyjaśnienie pojęć

Typowe błędy i mylne przekonania

• „TypeScript sprawia, że kod jest wolny od błędów.” Wyłapuje niezgodności w kształcie danych, a nie w logice. Zaliczka 2% zamiast 20% przejdzie kontrolę typów bez problemu.
• „Typy chronią mnie przed złymi danymi wejściowymi.” Typy znikają w czasie działania. Waliduj dane od użytkowników, formularzy i API.
• any wszędzie. Gdy AI utknie, może sięgnąć po any lub // @ts-ignore, by uciszyć błędy. To ukrywa problemy zamiast je naprawiać.
• Ignorowanie błędów typów, bo podgląd działa. Niektóre narzędzia wciąż uruchamiają kod z błędami typów. Błędy te są wciąż bugami czekającymi na swoją chwilę.
• „TypeScript jest wolniejszy.” Typy są usuwane przed uruchomieniem; działający JavaScript jest zasadniczo taki sam.
• „To tylko dla dużych zespołów.” Solo twórcy też na tym korzystają, zwłaszcza gdy większość zmian wykonuje AI.

O co poprosić swojego asystenta AI

• „Użyj TypeScriptu z włączonym trybem strict.”
• „Zdefiniuj wspólne typy dla głównych rekordów — Customer, Booking, Invoice — i używaj ich zarówno na froncie, jak i na backendzie.”
• „Nie używaj any ani @ts-ignore, żeby ominąć błędy; napraw właściwą przyczynę i powiedz mi, co to było.”
• „Waliduj wszystkie przychodzące dane po stronie serwera, nie tylko za pomocą typów.”
• „Uruchom sprawdzanie typów i napraw każdy błąd, zanim powiesz mi, że gotowe.”
• „Gdy zmieniasz nazwę pola, zaktualizuj każde miejsce, które TypeScript oznacza.”
• „Wyjaśnij ten błąd typu zwykłym językiem.”

Aby dowiedzieć się więcej o sprawdzaniu tego, co wygenerowało AI, zobacz jak sprawdzać kod wygenerowany przez AI oraz jak debugować aplikację zbudowaną przez AI.

TypeScript w Mythex

Jeśli nie prosisz o nic konkretnego, Mythex zaczyna nowe projekty na Vite + React + TypeScript + Tailwind. Edytor kodu zawiera inteligencję językową — uzupełnianie, diagnostykę i przejście do definicji dla TypeScriptu i JavaScriptu, wśród innych języków — więc błędy typów są widoczne w kodzie, a nie tylko w podglądzie. Edytor jest tylko do odczytu w planie Free i w pełni edytowalny w Pro. Możesz nadal poprosić o inną konfigurację w pierwszym poleceniu; strona dokumentacji o doborze technologii wyjaśnia, jak to działa, a dokumentacja edytora kodu opisuje, co edytor pokazuje.

Pytania