TypeScript Academy · Lektion

Utökning och sammanslagning av interface

Utöka interface och förstå deklarationssammanslagning

Lektion 3 av 413 steg

Utökning och sammanslagning av interface är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 3 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.

Välkommen

Gränssnitt kan utöka andra gränssnitt för att bygga vidare på befintliga strukturer, och TypeScript slår automatiskt ihop flera deklarationer av samma gränssnitt.

Utöka ett gränssnitt

Använd nyckelordet `extends` för att skapa ett nytt gränssnitt som innehåller alla egenskaper från det överordnade gränssnittet.
interface Animal { name: string; }
interface Dog extends Animal {
  breed: string;
}
const rex: Dog = { name: 'Rex', breed: 'Labrador' };

Utöka flera gränssnitt

Ett gränssnitt kan utöka flera gränssnitt samtidigt och kombinera alla deras egenskaper.
interface Flyable { fly(): void; }
interface Swimmable { swim(): void; }
interface Duck extends Flyable, Swimmable {
  quack(): void;
}

Åsidosätta egenskaper vid utökning

Ett utökat gränssnitt kan åsidosätta en egenskap från det överordnade gränssnittet, men den nya typen måste kunna tilldelas till den överordnade typen.
interface Base { value: string | number; }
interface Derived extends Base { value: string; } // OK — string is narrower
// interface Bad extends Base { value: boolean; } // Error

Deklarationssammanslagning

När du deklarerar två gränssnitt med samma namn slår TypeScript ihop dem till ett enda gränssnitt med alla egenskaper.
interface Window { title: string; }
interface Window { location: Location; }
// Merged: Window has both title and location

Utöka bibliotekstyper

Deklarationssammanslagning används för att utöka typer från tredjepartsbibliotek. Du kan till exempel lägga till egenskaper i Express gränssnitt `Request`.
// express.d.ts
declare namespace Express {
  interface Request {
    user?: User;
  }
}

Gränssnitt som utökar ett typalias

Ett gränssnitt kan utöka ett typalias så länge aliaset är en objekttyp.
type Named = { name: string };
interface User extends Named { email: string; }

Kedjor av nästlade utökningar

Kedjor av utökningar kan ha flera nivåer.
interface A { a: number; }
interface B extends A { b: number; }
interface C extends B { c: number; }
const obj: C = { a: 1, b: 2, c: 3 };

extends jämfört med implements

`extends` används för arv mellan gränssnitt eller mellan klasser. `implements` används när en klass ska uppfylla kontraktet för ett gränssnitt.
interface Serializable { serialize(): string; }
class Model implements Serializable {
  serialize() { return JSON.stringify(this); }
}

Sammanslagning gäller all användning

När gränssnitt slås ihop får all befintlig kod som använder gränssnittet automatiskt de nya egenskaperna, vilket är anledningen till att biblioteksutökning fungerar.

Sammanslagning jämfört med utökning: när används vad?

Använd `extends` för att skapa ett nytt gränssnitt baserat på ett befintligt. Använd sammanslagning (samma namn) för att lägga till egenskaper i ett gränssnitt från en separat fil, till exempel vid biblioteksutökning.

Snabb kontroll

Vilken TypeScript-funktion gör det möjligt att lägga till egenskaper i ett gränssnitt från ett tredjepartsbibliotek?

Sammanfattning

Gränssnitt utökar andra gränssnitt med `extends` och kombinerar deras strukturer. Deklarationssammanslagning kombinerar automatiskt gränssnitt med samma namn. Det gör det möjligt att utöka bibliotek utan att ändra tredjepartskoden.
Gratis att börja

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 ”Utökning och sammanslagning av interface” gratis?

Ja – hela texten till ”Utökning och sammanslagning av interface” 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 ”Utökning och sammanslagning av interface”?

Utöka interface och förstå deklarationssammanslagning 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 3 av 4.

Hur lång tid tar lektionen ”Utökning och sammanslagning av interface”?

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

  1. Definiera objektstrukturer med interface
  2. Typalias för komplexa typer
  3. Utökning och sammanslagning av interface
  4. Interface eller type: när ska de användas
← Tillbaka till TypeScript Academy