PricingLoginStart free
Frontend Academy · Lektion

Generics: T extends och begränsningar

Skriv generiska funktioner och gränssnitt, begränsa typparametrar med extends och använd standardvärden för generics i flexibla API:er.

Lektion 1 av 413 steg

Generics: T extends och begränsningar är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 1 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 Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad är generics?

Generics gör det möjligt att skriva funktioner, klasser och gränssnitt som fungerar med flera typer samtidigt som typsäkerheten bevaras. I stället för att skriva separata funktioner för varje typ skriver ni en enda generisk funktion som parameteriseras med en typvariabel.

En enkel generisk funktion

Typparametern T deklareras inom vinkelparenteser. TypeScript härleder T från argumenttypen – ingen explicit typannotering behövs vid anropet.

function identity<T>(value: T): T {
  return value;
}

identity(42);      // T is inferred as number, returns number
identity('hello'); // T inferred as string
identity<boolean>(true); // explicit

Generiska gränssnitt och typer

Parameterisera gränssnitt och typer med generics för att beskriva återanvändbara datastrukturer.

interface Box<T> {
  value: T;
  label?: string;
}

const numBox: Box<number> = { value: 42 };
const strBox: Box<string> = { value: 'hello', label: 'greeting' };

extends – begränsning av generiska typer

Använd T extends SomeType för att begränsa vad T kan vara. Funktionen accepterar endast typer som uppfyller begränsningen.

function getLength<T extends { length: number }>(item: T): number {
  return item.length; // safe: T is guaranteed to have length
}

getLength('hello');       // 5
getLength([1, 2, 3]);    // 3
getLength({ length: 7 }); // 7
// getLength(42);         // Error: number has no length

keyof och begränsningar för generics

keyof T skapar en union av T:s egenskapsnycklar. Tillsammans med generics möjliggör det typsäker åtkomst till egenskaper.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: 'Alice', age: 30 };
getProperty(user, 'name');  // string
getProperty(user, 'age');   // number
// getProperty(user, 'foo'); // Error

Standardtyper för generics

Ange en standardtyp för en generic-parameter med T = DefaultType. Det används när det finns ett lämpligt standardvärde men anropare kan ersätta det.

interface Paginated<T = unknown> {
  items: T[];
  total: number;
  page: number;
}

const rawPage: Paginated = { items: [], total: 0, page: 1 };
const typedPage: Paginated<User> = { items: [], total: 0, page: 1 };

Flera typparametrar

Funktioner kan ha flera oberoende typparametrar.

function zip<A, B>(arrA: A[], arrB: B[]): Array<[A, B]> {
  return arrA.map((a, i) => [a, arrB[i]]);
}

zip([1, 2, 3], ['a', 'b', 'c']);
// [[1,'a'], [2,'b'], [3,'c']]

Generiska klasser

Klasser kan också vara generiska. Det är vanligt i datastrukturer som stackar, köer och observerbara store-objekt.

class Stack<T> {
  private items: T[] = [];
  push(item: T) { this.items.push(item); }
  pop(): T | undefined { return this.items.pop(); }
  peek(): T | undefined { return this.items.at(-1); }
  get size() { return this.items.length; }
}

const stack = new Stack<number>();
stack.push(1);
stack.push(2);
stack.pop(); // 2

Asynkrona generiska funktioner

Generiska asynkrona funktioner är vanliga vid typsäkra API-anrop.

async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json() as Promise<T>;
}

const users = await fetchJson<User[]>('/api/users');
const profile = await fetchJson<UserProfile>('/api/me');

Infer i villkorade typer

Nyckelordet infer i en villkorad typ extraherar en typ från ett mönster. Det används i bibliotekskod för att extrahera en funktions returtyp eller en array-elementtyp.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

type ElementType<T> = T extends Array<infer E> ? E : never;

type Fn = () => { name: string };
type Result = ReturnType<Fn>; // { name: string }

När ska generics användas?

Använd generics när: 1) samma logik gäller för flera typer, 2) ni behöver en relation mellan indata- och utdatatypen, 3) ni bygger en återanvändbar datastruktur eller ett verktyg. Använd inte generics bara för sakens skull – konkreta typer är tydligare när det bara finns ett användningsfall.

Snabbkontroll

Vad säkerställer begränsningen T extends { length: number }?

Besvara frågan i den interaktiva lektionen

Sammanfattning: generics

Generics parameteriserar typer så att en funktion, klass eller ett gränssnitt fungerar med flera typer. T extends SomeType lägger till begränsningar. keyof T ger unioner av egenskapsnycklar. Standardvärden för generics anges med T = Default. infer extraherar typer i villkorade typer. Använd generics för återanvändbara typsäkra verktyg och datastrukturer.

Gratis att börja

Lär dig HTML 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
41
Lektioner
163
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Generics: T extends och begränsningar” gratis?

Ja – hela texten till ”Generics: T extends och begränsningar” 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 Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Generics: T extends och begränsningar”?

Skriv generiska funktioner och gränssnitt, begränsa typparametrar med extends och använd standardvärden för generics i flexibla API:er. Ni övar på Frontend 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 Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend 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 1 av 4.

Hur lång tid tar lektionen ”Generics: T extends och begränsningar”?

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 Frontend Academy-lektionen?

Ja. Varje Frontend 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

  1. Generics: T extends och begränsningar
  2. Utility-typer: Partial Required Pick Omit
  3. Mapped types och conditional types
  4. Narrowing: typeof instanceof och diskriminerade unioner
← Tillbaka till Frontend Academy