TypeScript-Schnittstelle

Eine Schnittstelle ist die Deklaration einer Reihe abstrakter Methoden, eine Sammlung von Methodenmerkmalen. Diese Methoden sollten alle abstrakt sein und müssen von konkreten Klassen implementiert werden. Dann können Dritte über diese Gruppe abstrakter Methoden aufrufen und die konkreten Klassen die spezifischen Methoden ausführen lassen.

Die TypeScript-Schnittstelle wird wie folgt definiert:

interface interface_name { 
}

Beispiel

Im folgenden Beispiel definieren wir eine Schnittstelle IPerson und dann eine Variable customer mit dem Typ IPerson.

customer implementiert die Eigenschaften und Methoden der Schnittstelle IPerson.

TypeScript

interface IPerson { firstName:string, lastName:string, sayHi: ()=>string } var customer:IPerson = { firstName:"Tom", lastName:"Hanks", sayHi: ():string =>{return "Hallo"} } console.log("Kundenobjekt") console.log(customer.firstName) console.log(customer.lastName) console.log(customer.sayHi()) var employee:IPerson = { firstName:"Jim", lastName:"Blakes", sayHi: ():string =>{return "Hallo!!!"} } console.log("Employee-Objekt") console.log(employee.firstName) console.log(employee.lastName)

Beachten Sie, dass Interfaces nicht in JavaScript umgewandelt werden können. Sie sind nur Teil von TypeScript.

Kompilieren Sie den obigen Code, um den folgenden JavaScript-Code zu erhalten:

JavaScript

var customer = { firstName: "Tom", lastName: "Hanks", sayHi: function () { return "Hallo"; } }; console.log("Kundenobjekt"); console.log(customer.firstName); console.log(customer.lastName); console.log(customer.sayHi()); var employee = { firstName: "Jim", lastName: "Blakes", sayHi: function () { return "Hallo!!!"; } }; console.log("Employee-Objekt"); console.log(employee.firstName); console.log(employee.lastName);

Das Ausgabeergebnis ist:

Customer 对象
Tom
Hanks
Hi there
Employee  对象
Jim
Blakes

Union-Typen und Interfaces

Das folgende Beispiel zeigt, wie Union-Typen in einem Interface verwendet werden:

TypeScript

interface RunOptions { program:string; commandline:string[]|string|(()=>string); } //commandline ist ein String var options:RunOptions = {program:"test1",commandline:"Hello"}; console.log(options.commandline) //commandline ist ein String-Array options = {program:"test1",commandline:["Hello","World"]}; console.log(options.commandline[0]); console.log(options.commandline[1]); //commandline ist ein Funktionsausdruck options = {program:"test1",commandline:()=>{return "**Hello World**";}}; var fn:any = options.commandline; console.log(fn());

Kompilieren Sie den obigen Code, um den folgenden JavaScript-Code zu erhalten:

JavaScript

//commandline ist ein String var options = { program: "test1", commandline: "Hello" }; console.log(options.commandline); //commandline ist ein String-Array options = { program: "test1", commandline: ["Hello", "World"] }; console.log(options.commandline[0]); console.log(options.commandline[1]); //commandline ist ein Funktionsausdruck options = { program: "test1", commandline: function () { return "**Hello World**"; } }; var fn = options.commandline; console.log(fn());

Das Ausgabeergebnis ist:

Hello
Hello
World
**Hello World**

Schnittstellen und Arrays

In einer Schnittstelle können wir den Indexwert und die Elemente eines Arrays auf verschiedene Typen setzen. Der Indexwert kann eine Zahl oder eine Zeichenkette sein.

Setzen Sie die Elemente auf den String-Typ:

Beispiel

interface namelist { [index:number]:string } //Typen stimmen überein, korrekt var list2:namelist = ["Google","Example","Taobao"] //Fehler: Element 1 ist nicht vom Typ string // var list2:namelist = ["Example",1,"Taobao"]

Wenn andere Typen verwendet werden, wird ein Fehler gemeldet:

Beispiel

interface namelist { [index:number]:string } //Typen stimmen überein, korrekt // var list2:namelist = ["Google","Example","Taobao"] //Fehler: Element 1 ist nicht vom Typ string var list2:namelist = ["John",1,"Bran"]
Nach der Ausführung wird ein Fehler wie folgt gemeldet, der eine Typabweichung anzeigt:
test.ts:8:30 - error TS2322: Type 'number' is not assignable to type 'string'.

8 var list2:namelist = ["John",1,"Bran"]
                               ~

  test.ts:2:4
    2    [index:number]:string
         ~~~~~~~~~~~~~~~~~~~~~
    The expected type comes from this index signature.


Found 1 error.

TypeScript

interface ages { [index:string]:number } var agelist:ages; //Typ ist korrekt agelist["example"] = 15 //Typfehler, Ausgabefehler TS2322: Typ '"google"' kann nicht dem Typ 'number' zugewiesen werden. // agelist[2] = "google"

Schnittstellenvererbung

Interface-Vererbung bedeutet, dass ein Interface sich durch andere Interfaces erweitern kann.

TypeScript ermöglicht es einem Interface, von mehreren Interfaces zu erben.

Vererbung verwendet das Schlüsselwortextends。

Syntaxformat für die Einzel-Interface-Vererbung:

Child_interface_name extends super_interface_name

Syntaxformat für die Mehrfach-Interface-Vererbung:

Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

Die geerbten Interfaces werden durch Kommas,getrennt.

Beispiel für Einfachvererbung

TypeScript

interface Person { age:number } interface Musician extends Person { instrument:string } var drummer = <Musician>{}; drummer.age = 27 drummer.instrument = "Schlagzeug" console.log("Alter:"+drummer.age) console.log("Lieblingsinstrument:"+drummer.instrument)

Kompilieren Sie den obigen Code, um den folgenden JavaScript-Code zu erhalten:

JavaScript

var drummer = {}; drummer.age = 27; drummer.instrument = "Schlagzeug"; console.log("Alter:" + drummer.age); console.log("Lieblingsinstrument:" + drummer.instrument);

Das Ausgabeergebnis ist:

年龄:  27
喜欢的乐器:  Drums

Beispiel für Mehrfachvererbung

TypeScript

interface IParent1 { v1:number } interface IParent2 { v2:number } interface Child extends IParent1, IParent2 { } var Iobj:Child = { v1:12, v2:23} console.log("Wert 1: "+Iobj.v1+" Wert 2: "+Iobj.v2)

Kompilieren Sie den obigen Code, um den folgenden JavaScript-Code zu erhalten:

JavaScript

var Iobj = { v1: 12, v2: 23 }; console.log("Wert 1: " + Iobj.v1 + " Wert 2: " + Iobj.v2);

Das Ausgabeergebnis ist:

value 1: 12 value 2: 23
Andere Erweiterungen