Interface

Interfaces har ingen JS-påverkan under körtiden. TypeScript-gränssnitten har mycket kraft för att deklarera variablernas struktur.

De följande två är likvärdiga deklarationer, den första använder en inline-annotation, den andra använder ett gränssnitt:

// Sample A
declare var myPoint: { x: number; y: number; };
// Sample B
interface Point {
 x: number; y: number;
}
declare var myPoint: Point;

Det fina med exempel B är dock att om någon skriver ett bibliotek som bygger på myPoint-biblioteket för att lägga till nya medlemmar, kan de enkelt lägga till den befintliga deklarationen av myPoint:

// Lib a.d.ts
interface Point {
 x: number; y: number;
}
declare var myPoint: Point;
// Lib b.d.ts
interface Point {
 z: number;
}
// Your code
var myPoint.z; // Allowed!

Detta beror på att gränssnitt i TypeScript är öppna. Detta är en viktig princip i TypeScript som gör det möjligt att efterlikna JavaScript:s utbyggbarhet med hjälp av gränssnitt.

Klasser kan implementera gränssnitt

Om du vill använda klasser som måste följa en objektstruktur som någon deklarerat åt dig i en interface kan du använda nyckelordet implements för att säkerställa kompatibilitet:

interface Point {
 x: number; y: number;
}
class MyPoint implements Point {
 x: number; y: number; // Same as Point
}

I princip kommer alla ändringar i det externa Point-gränssnittet att resultera i ett kompileringsfel i din kodbas, så du kan enkelt hålla den synkroniserad:

interface Point {
 x: number; y: number;
 z: number; // New member
}
class MyPoint implements Point { // ERROR : missing member `z`
 x: number; y: number;
}

Notera att implements begränsar strukturen på klassinstanserna i.e.:

var foo: Point = new MyPoint();

Och saker som foo: Point = MyPoint är inte samma sak.

Inte alla gränssnitt är lätt att implementera

Interface är utformade för att deklarera alla godtyckligt galna strukturer som kan finnas i JavaScript.

Tänk på följande gränssnitt där något kan anropas med new:

interface Crazy {
 new (): {
 hello: number
 };
}

Du skulle i princip ha något i stil med:

class CrazyClass implements Crazy {
 constructor() {
 return { hello: 123 };
 }
}
// Because
const crazy = new CrazyClass(); // crazy would be {hello:123}

Du kan deklarera all tokig JS som finns där med gränssnitt och till och med använda dem säkert från TypeScript. Det betyder inte att du kan använda TypeScript-klasser för att implementera dem.