Kontextuell typning: härledning från sammanhanget
Förstå hur TypeScript härleder typer från det omgivande sammanhanget
Kontextuell typning: härledning från sammanhanget är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.
Vad är kontextuell typning?
Kontextuell typning uppstår när TypeScript härleder typen för ett uttryck utifrån den position där det förekommer – kontexten tillhandahåller typen, inte värdet i sig.
document.addEventListener("click", (e) => {
// e is inferred as MouseEvent from the event type
console.log(e.clientX);
});Kontextuell typning i callback-funktioner
När du skickar en callback till en typad funktion härleder TypeScript parametertyperna från den förväntade callback-signaturen.
const nums = [1, 2, 3];
nums.forEach((n) => {
// n inferred as number from Array<number>
console.log(n.toFixed(2));
});Kontextuell typning och objektliteraler
När en objektliteral tilldelas till en typad variabel härleds dess egenskapstyper från den typen, vilket möjliggör exakta kontroller.
interface Config { timeout: number; retries: number; }
const config: Config = {
timeout: 3000,
retries: 3,
// extra: true // Error: excess property
};Kontextuell typning i JSX
I React är händelsehanterarprops kontextuellt typade, så typerna för händelseparametrar härleds automatiskt.
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)} />Kontextuell typning kontra explicita annoteringar
Kontextuell typning är kraftfull men kan åsidosättas av explicita annoteringar. En explicit annotering prioriteras framför kontextuell typning när båda finns.
const handler: (x: string) => void = (x: number) => {}; // Error
// Explicit annotation (number) conflicts with contextual (string)Kontextuell typning med destrukturering
Destrukturerade parametrar i kontextuellt typade funktioner ärver också sina typer från kontexten.
const pairs: [string, number][] = [["a", 1]];
pairs.forEach(([key, value]) => {
// key: string, value: number — contextually typed
console.log(key.toUpperCase(), value * 2);
});Kontextuell typning och returtyper
När en funktion tilldelas till en typad variabel härleds även returtypen kontextuellt.
type Transform = (x: number) => string;
const double: Transform = (x) => x * 2; // Error: number not string
const str: Transform = (x) => String(x * 2); // OKKontextuell typning i villkorsuttryck
TypeScript kan överföra kontextuella typer till ternära uttryck och logiska operatorer.
const result: string | null =
Math.random() > 0.5 ? "yes" : null; // both arms typed by contextBegränsningar med kontextuell typning
Kontextuell typning gäller inte när uttrycket befinner sig i en icke-kontextuell position, till exempel en fristående variabel utan annotering.
const fn = (x) => x + 1; // x: any — no context to infer from
// Add annotation: const fn = (x: number) => x + 1;Dubbelriktad typinferens
TypeScript utför dubbelriktad typinferens: både uppifrån och ned (kontextuell) och nedifrån och upp (från uttrycket). De samverkar för att ge dig den mest exakta typen.
function apply<T>(fn: (x: T) => T, val: T): T { return fn(val); }
apply((x) => x.toUpperCase(), "hello"); // x inferred as stringSammanfattning: kontextuell typning
Kontextuell typning låter TypeScript härleda typer från den position där ett uttryck används – callback-funktioner, tilldelningar, JSX-props och destrukturering drar alla nytta av denna inferensmekanism.
Snabbkontroll
När tillämpas kontextuell typning på en callback-parameter?
Det här har du lärt dig
Kontextuell typning innebär att TypeScript härleder typer från positionen snarare än värdet. Det gör callback-funktioner, händelsehanterare och typade tilldelningar koncisa samtidigt som de förblir typsäkra.
Lär dig TypeScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 101
- Lektioner
- 352
Vanliga frågor
Är lektionen ”Kontextuell typning: härledning från sammanhanget” gratis?
Ja – hela texten till ”Kontextuell typning: härledning från sammanhanget” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Kontextuell typning: härledning från sammanhanget”?
Förstå hur TypeScript härleder typer från det omgivande sammanhanget Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?
Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Kontextuell typning: härledning från sammanhanget”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?
Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Mekanismer för typbreddning och narrowing
- Kontextuell typning: härledning från sammanhanget
- Freshness och kontroll av överflödiga egenskaper
- const-assertioner och as const