Typowanie kontekstowe: wnioskowanie z kontekstu
Poznaj sposób, w jaki TypeScript wyprowadza typy z otaczającego kontekstu.
Typowanie kontekstowe: wnioskowanie z kontekstu to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 2 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 TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.
Czym jest typowanie kontekstowe
Typowanie kontekstowe zachodzi, gdy TypeScript wnioskuje typ wyrażenia na podstawie miejsca, w którym ono występuje — typ wynika z kontekstu, a nie z samej wartości.
document.addEventListener("click", (e) => {
// e is inferred as MouseEvent from the event type
console.log(e.clientX);
});Typowanie kontekstowe w callbackach
Po przekazaniu callbacka do funkcji z określonym typem TypeScript wnioskuje typy parametrów na podstawie oczekiwanej sygnatury callbacka.
const nums = [1, 2, 3];
nums.forEach((n) => {
// n inferred as number from Array<number>
console.log(n.toFixed(2));
});Typowanie kontekstowe i literały obiektowe
Po przypisaniu literału obiektowego do zmiennej z określonym typem typy jego właściwości są wnioskowane na podstawie tego typu, co umożliwia precyzyjne sprawdzanie.
interface Config { timeout: number; retries: number; }
const config: Config = {
timeout: 3000,
retries: 3,
// extra: true // Error: excess property
};Typowanie kontekstowe w JSX
W React właściwości obsługi zdarzeń są typowane kontekstowo, dlatego typy parametrów zdarzeń są wnioskowane automatycznie.
function Button({ onClick }: { onClick: (e: React.MouseEvent) => void }) {
return <button onClick={onClick}>Click</button>;
}
// Caller: e is inferred as React.MouseEvent
<Button onClick={(e) => console.log(e.currentTarget)} />Typowanie kontekstowe a jawne adnotacje
Typowanie kontekstowe jest przydatne, ale można je zastąpić jawnymi adnotacjami. Gdy występują oba mechanizmy, pierwszeństwo ma adnotacja jawna.
const handler: (x: string) => void = (x: number) => {}; // Error
// Explicit annotation (number) conflicts with contextual (string)Typowanie kontekstowe przy destrukturyzacji
Parametry poddane destrukturyzacji w funkcjach typowanych kontekstowo również dziedziczą typy z kontekstu.
const pairs: [string, number][] = [["a", 1]];
pairs.forEach(([key, value]) => {
// key: string, value: number — contextually typed
console.log(key.toUpperCase(), value * 2);
});Typowanie kontekstowe i typy zwracane
Gdy funkcja zostaje przypisana do zmiennej z określonym typem, typ zwracany również jest wnioskowany kontekstowo.
type Transform = (x: number) => string;
const double: Transform = (x) => x * 2; // Error: number not string
const str: Transform = (x) => String(x * 2); // OKTypowanie kontekstowe w wyrażeniach warunkowych
TypeScript może przekazywać typy kontekstowe do wyrażeń trójargumentowych i operatorów logicznych.
const result: string | null =
Math.random() > 0.5 ? "yes" : null; // both arms typed by contextOgraniczenia typowania kontekstowego
Typowanie kontekstowe nie działa, gdy wyrażenie znajduje się w miejscu bez kontekstu, na przykład w samodzielnej zmiennej bez adnotacji.
const fn = (x) => x + 1; // x: any — no context to infer from
// Add annotation: const fn = (x: number) => x + 1;Wnioskowanie dwukierunkowe
TypeScript wykonuje dwukierunkowe wnioskowanie typów: z góry na dół, czyli kontekstowe, oraz z dołu do góry, na podstawie wyrażenia. Oba kierunki współpracują, aby uzyskać możliwie najdokładniejszy typ.
function apply<T>(fn: (x: T) => T, val: T): T { return fn(val); }
apply((x) => x.toUpperCase(), "hello"); // x inferred as stringPodsumowanie: typowanie kontekstowe
Typowanie kontekstowe pozwala TypeScript wnioskować typy na podstawie miejsca użycia wyrażenia — korzystają z niego callbacki, przypisania, właściwości JSX i destrukturyzacja.
Szybkie sprawdzenie
Kiedy typowanie kontekstowe ma zastosowanie do parametru callbacka?
Czego się nauczono
Typowanie kontekstowe polega na wnioskowaniu typów przez TypeScript na podstawie miejsca użycia, a nie wartości. Dzięki niemu callbacki, procedury obsługi zdarzeń i przypisania z określonym typem pozostają zwięzłe i bezpieczne typowo.
Często zadawane pytania
Czy lekcja „Typowanie kontekstowe: wnioskowanie z kontekstu” jest bezpłatna?
Tak — pełny tekst „Typowanie kontekstowe: wnioskowanie z kontekstu” 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 TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Typowanie kontekstowe: wnioskowanie z kontekstu”?
Poznaj sposób, w jaki TypeScript wyprowadza typy z otaczającego kontekstu. Ćwiczysz TypeScript 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ąć TypeScript Academy?
Nie wymagamy żadnego doświadczenia. TypeScript 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 2 z 4.
Ile czasu zajmuje lekcja „Typowanie kontekstowe: wnioskowanie z kontekstu”?
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 TypeScript Academy?
Tak. Każda lekcja TypeScript 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
- Mechanizmy rozszerzania i zawężania typów
- Typowanie kontekstowe: wnioskowanie z kontekstu
- Świeżość i sprawdzanie nadmiarowych właściwości
- Asercje const i as const