Schnittstellen in TypeScript

Was ist Interface?
Interface ist ein Datentyp
Optionale Felder
Schreibgeschütztes Feld (read-only)
Die Interface erweitert sich von anderen Interface
Die Interface implementieren
Function-Type Interface
Array-Type Interface

1. Was ist Interface?

In TypeScript ist eine Interface ein Konstrukt, das Standards deklariert. Von einer Interface abgeleitete Klassen müssen den von der Interface festgelegten Standards entsprechen.

In JavaScript gibt es kein Interface-Konzept, daher konvertiert der TypeScript-Compiler keine Interface in JavaScript. Die Interface dient als Werkzeug zur Überprüfung der Typen im Programm.

TypeScript verwendet das Schlüsselwort interface, um eine interface zu definieren. Die interface können Felder, Eigenschaften und Methoden umfassen.

interface Greeting {
   name: string;

   sayHello(friendName:string): string; // A method

   sayBye: (friendName: string) => string; // A arrow method
}

Im obigen Beispiel ist Greeting eine Interface, die 1 Feld und 2 Methoden enthält.

name: Ein Field mit dem Datentyp string.
sayHello: Eine reguläre Methode mit einem Parameter string und gibt einen string zurück.
sayBye: Eine Lambda-Methode mit einem Parameter string und gibt eine string zurück. (Lambda-Methoden werden auch als Pfeilmethoden bezeichnet).

2. Interface ist ein Datentyp

Die Interface ist ein Datentyp, und Sie können Objekte direkt erstellen. Die erstellten Objekte müssen alle in der Interface deklarierten Felder, Eigenschaften und Methoden implementieren.

Zum leichteren Verständnis sehen Sie das Beispiel:

interface_ex1.ts

interface Greeting {
    name: string;
    sayHello(friendName: string): string; // A method
    sayBye: (friendName: string) => string; // A arrow method
}
function interface_ex1_test() {
    // Create an object:
    var enPerson1: Greeting = {
        name: "John",
        sayHello: function (friendName: string): string {
            return "Hello " + friendName;
        },
        sayBye: function (friendName: string): string {
            return "Good Bye";
        }
    };
    // Create an object
    var vnPerson1: Greeting = {
        name: "Tran",
        sayHello: function (friendName: string): string {
            return "Xin Chao " + friendName;
        },
        sayBye: function (friendName: string): string {
            return "Tam biet " + friendName;
        }
    };
    // Test objects:
    console.log(enPerson1.name); // John
    console.log(enPerson1.sayHello("Tom")); // Hello Tom

    console.log(vnPerson1.name); // Tran
    console.log(vnPerson1.sayBye("Jerry")); // Tam Biet Jerry
}
interface_ex1_test(); // Call the function.

Output:

John
Hello Tom
Tran
Tam biet Jerry

Wenn Sie ein Objekt direkt aus einer Interface erstellen, müssen Sie die Regel Key-Value befolgen. Dies bedeutet, dass alle Elemente in diesem Objekt gemäß der Regel Key-Value geschrieben werden.

// Create an object:
var enPerson1: Greeting = {
    name: "John",
    sayHello: function (friendName: string): string {
        return "Hello " + friendName;
    },
    sayBye: function (friendName: string): string {
        return "Good Bye";
    }
};

3. Optionale Felder

In TypeScript können Felder eines Interfaces als optional definiert werden, was bedeutet, dass die Klasse oder das Objekt, das diese Interface implementiert, sie ignorieren kann.

interface Interface_Name  {
   optional_field_name? data_type;
   // Other fields and methods (If any)
}

Im folgenden Beispiel ist das Feld empDept optional.

interface_optional_field_ex1.ts

interface IEmployee {
    empCode: number;
    empName: string;
    empDept?: string;
}
function interface_optional_field_ex1_test() {
    let tom: IEmployee = {
        empCode: 1,
        empName: "Tom"
    }
    let jerry: IEmployee = {
        empCode: 2,
        empName: "Jerry",
        empDept: "IT"
    }
    console.log(" --- tom --- ");
    console.log('tom.empName: ' + tom.empName); // Tom
    console.log('tom.empDept: ' + tom.empDept); // undefined
    console.log(" --- jerry --- ");
    console.log('jerry.empName: ' + jerry.empName); // Jerry
    console.log('jerry.empDept: ' + jerry.empDept); // IT
}
interface_optional_field_ex1_test(); // Call the function.

Output:

--- tom ---
tom.empName: Tom
tom.empDept: undefined
 --- jerry ---
jerry.empName: Jerry
jerry.empDept: IT

4. Schreibgeschütztes Feld (read-only)

TypeScript bietet eine Möglichkeit, ein Feld als schreibgeschützt zu markieren. Das bedeutet, dass einem Feld einmal ein Wert zugewiesen wurde, dieser nicht mehr geändert werden kann!

Im folgenden Beispiel ist das SSN-Feld schreibgeschützt. Nachdem ihm ein Wert zugewiesen wurde, können Sie ihm keinen anderen Wert zuweisen. Der Compiler meldet einen Fehler, wenn Sie dagegen verstoßen..

interface_readonly_field_ex1.ts

interface Citizen {
    name: string;
    readonly SSN: number;
}
function interface_readonly_field_ex1_test() {
    let personObj: Citizen = {
        SSN: 11111,
        name: 'Tom'
    };
    personObj.name = 'Jerry'; // OK
    personObj.SSN = 22222; // Compiler Error (!!!!!)
}  
interface_readonly_field_ex1_test(); // Call the function.

5. Die Interface erweitert sich von anderen Interface

In TypeScript kann sich eine Interface aus einer oder mehreren Interface gemäß der folgenden Syntax erstrecken:

interface C extends A, B {
   // codes..
}

Zum Beispiel:

interface_extends_ex1.js

interface IAnimal {
    name: string;
}
interface ICat extends IAnimal {
    age: number;
    move(): void;
}
function interface_extends_ex1_test() {
    let tom = {
        name: "Tom",
        age: 3,
        move: function () {
            console.log("Moving...");
        }
    };
    console.log(`Name: ${tom.name}`);
    console.log(`Age: ${tom.age}`);
    tom.move();
}
interface_extends_ex1_test(); // Call the function.

Output:

Name: Tom
Age: 3
Moving...

6. Die Interface implementieren

Ähnlich wie Java und C#. Interface in TypeScript kann durch eine Klasse implementiert werden. Grundsätzlich kann eine Klasse ein oder mehrere Interfaces implementieren, die der von all diesen Interfaces definierten Struktur entsprechen müssen.

Classes
Konstruktoren in TypeScript

7. Function-Type Interface

TypeScript hat das gleiche Konzept der Functional Interface wie in Java. Wir nennen es vorübergehend Function-Type Interface - Eine Interface hat nur eine Methode, und diese Methode hat keinen Namen, der nur Parameter und Rückgabetyp enthält. Function-Type Interface wird als Funktion verwendet, manchmal hat es auch optionale Felder.

Syntax zum Definieren der Functional Interface:

interface Interface_Name  {
     (param_name_1 data_type_1, param_name_n data_type_n): return_data_type;
}

Function-Type Interface ist eine spezielle Interface, die als Funktion und nicht als Datentyp verwendet wird.
Es macht wenig Sinn, ein Interface zu schreiben, das sich von einem Function-Type Interface aus erstreckt.
Oder das Schreiben einer Klasse, die ein Function-Type Interface implementiert, ist nicht möglich.

Zum Beispiel:

interface IFormatter {
    (text:string) : number;
}

Als Funktion wird Functional interface verwendet. Sehen Sie folgendes Beispiel:

functional_interface_ex1.js

interface IFormatter {
    (text:string) : number;
}
function functional_interface_ex1_test()  {
   var intFormatter: IFormatter = function(text:string): number {
       return parseInt(text);
   }
   var floatFormatter: IFormatter = function(text:string): number {
       return parseFloat(text);
   }
   var text:string = "2001.55";

   var value1 = intFormatter(text); // Use as a function
   console.log(value1);  // 2001
   var value2 = floatFormatter(text); // Use as a function
   console.log(value2);  // 2001.55
} 
functional_interface_ex1_test(); // Call the function.

Output:

2001
2001.55

Function-Type Inteface kann optionale Felder enthalten. Zum Beispiel:

functional_interface_ex2.ts

interface IFormatter {
    (text:string) : number;
    description? : string;
}
function functional_interface_ex2_test()  {
   var intFormatter: IFormatter = function(text:string): number {
       return parseInt(text);
   }  
   intFormatter.description = "Format a string to integer";
  
   var text: string = "2001.55";
   var result = intFormatter(text); // Use as a function
   console.log(intFormatter.description);  // Format a string to integer
   console.log(result);  // 2001  
}
functional_interface_ex2_test(); // Call the function.

Output:

Format a string to integer
2001

8. Array-Type Interface

TypeScript bietet einen Interface-typ zum Simulieren eines Arrays, der als Array-Type Interface bezeichnet wird.

Die Syntax

interface Interface_Name  {
    [index_name_1: index_data_type_1] : value_data_type;
    [index_name_n: index_data_type_n] : value_data_type;
    // Other properties and methods (If any) ...
}

Hinweis: index_data_type_1,..., index_data_type_n müssen unterschiedlich sein, sonst erhalten Sie eine Fehlermeldung:
Duplicate index signature for type 'xxx'

Zum Beispiel:

interface_array_ex1.ts

interface IEmployeeSalary {
    [emp_name:string]:number; // emp_name --> salary
}
function interface_array_ex1_test()  {
    var salaryMap : IEmployeeSalary = {};

    salaryMap["Tom"] = 2000;  
    salaryMap["Jerry"] = 1500;  
    salaryMap["Donald"] = 3000;  

    console.log(salaryMap["Jerry"]); // 1500  
}
interface_array_ex1_test(); // Call the function.

Beispiel: Ein Array-Type Interface mit index_data_type ist number.

interface_array_ex2.ts

interface IFootballerArray {
    [index:number]:string;
}
function interface_array_ex2_test()  {
    var footballerArray : IFootballerArray = ["Ronaldo", "Messi", "Pele"];

    console.log(footballerArray[0]); // Ronaldo
    console.log(footballerArray[1]); // Messi

    footballerArray[0.5] = "<Funny>";
    console.log(footballerArray[0.5]); // <Funny>
}
interface_array_ex2_test(); // Call the function.

Output:

Ronaldo
Messi
<Funny>

Beispiel: Eine Array-Type Interface mit Feldern und Methoden:

interface_array_ex2b.ts

interface IFootballPlayerArray {
    description: string;
    someMethod(): string;
    [index: number]: string;
}
function interface_array_ex2b_test() {
    var footballerArray: IFootballPlayerArray = {
        description: "Famous Football Players",
        someMethod: function (): string {
            return "Something";
        }
    }
    footballerArray[0] = "Ronaldo";
    footballerArray[1] = "Messi";
    footballerArray[2] = "Pele";
    footballerArray[0.5] = "<Funny>";

    console.log(footballerArray.description); // Famous Football Players
    console.log(footballerArray.someMethod()); // Something
    console.log(" --- "); //  ---
    console.log(footballerArray[0]); // Ronaldo
    console.log(footballerArray[1]); // Messi
    console.log(footballerArray[0.5]); // <Funny>
}
interface_array_ex2b_test(); // Call the function.

Output:

Famous Football Players
Something
 ---
Ronaldo
Messi
<Funny>

Beispiel: Eine Array-Type Interface mit 2-dimensionalen Indizes:

interface_array_2d_ex1.ts

interface IStaff {
    [staff_id:number] : number; // staff_id --> salary
    [staff_number:string] : number; // staff_number --> salary
}
function interface_array_2d_ex1_test()  {
    var staffArray : IStaff = {};

    staffArray[100] = 2000;  
    staffArray[101] = 1500;  
    staffArray[102] = 3000;  

    staffArray["S-100"] = 2000;  
    staffArray["S-101"] = 1500;  
    staffArray["S-102"] = 3000;  

    console.log(staffArray[100]); // 2000  
    console.log(staffArray[102]); // 3000  
    console.log(" --- ");  
    console.log(staffArray["S-100"]); // 2000  
    console.log(staffArray["S-102"]); // 3000  
}
interface_array_2d_ex1_test(); // Call the function.

Output:

Schnittstellen in TypeScript

1. Was ist Interface?

2. Interface ist ein Datentyp

3. Optionale Felder

4. Schreibgeschütztes Feld (read-only)

5. Die Interface erweitert sich von anderen Interface

6. Die Interface implementieren

7. Function-Type Interface

8. Array-Type Interface

Anleitungen Typescript

Anleitungen Typescript

Neueste Artikel