Välirajapinnat

Välirajapinnoilla ei ole lainkaan JS-vaikutusta suoritusaikana. TypeScriptin rajapinnoissa on paljon valtaa ilmoittaa muuttujien rakenne.

Seuraavat kaksi ovat toisiaan vastaavia deklaraatioita, ensimmäinen käyttää inline-merkintää, toinen käyttää rajapintaa:

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

Mutta esimerkki B:n kauneus on siinä, että jos joku laatii kirjaston, joka perustuu myPoint-kirjastoon lisätäkseen uusia jäseniä, hän voi helposti lisätä olemassa olevaan myPoint-deklaraatioon:

// 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!

Tämä johtuu siitä, että TypeScriptissä rajapinnat ovat avoimia. Tämä on TypeScriptin elintärkeä periaate, sillä sen avulla voidaan jäljitellä JavaScriptin laajennettavuutta rajapintojen avulla.

Luokat voivat toteuttaa rajapintoja

Jos haluat käyttää luokkia, joiden on noudatettava objektirakennetta, jonka joku on julistanut sinulle interface, voit käyttää implements-avainsanaa yhteensopivuuden varmistamiseksi:

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

Periaatteessa tuon implements läsnäollessa kaikki muutokset tuossa ulkoisessa Point rajapinnassa johtavat kääntämisvirheeseen koodipohjassasi, joten voit helposti pitää sen synkronoituna:

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

Huomaa, että implements rajoittaa luokan instanssien rakennetta i.Eli:

var foo: Point = new MyPoint();

Ja sellaiset jutut kuin foo: Point = MyPoint eivät ole sama asia.

Kaikki rajapinnat eivät ole helposti toteutettavissa

Välirajapinnat on suunniteltu niin, että niillä voidaan julistaa mitä tahansa mielivaltaisen hullua rakennetta, jota JavaScriptissä voi olla.

Asettele seuraava rajapinta, jossa jokin on kutsuttavissa new:

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

Sinulla olisi periaatteessa jotain sellaista kuin:

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

Voit julistaa rajapinnoilla kaiken hullun hullun JS:n mitä on olemassa, ja voit jopa käyttää niitä turvallisesti TypeScriptistä. Se ei tarkoita, että voit käyttää TypeScript-luokkia niiden toteuttamiseen.