Interface TypeScript

Une interface est une déclaration d'une série de méthodes abstraites, un ensemble de caractéristiques de méthodes. Ces méthodes doivent toutes être abstraites et doivent être implémentées par des classes concrètes. Ensuite, des tiers peuvent appeler via ce groupe de méthodes abstraites, ce qui permet aux classes concrètes d'exécuter les méthodes spécifiques.

L'interface TypeScript est définie comme suit :

interface interface_name { 
}

Exemple

Dans l'exemple suivant, nous définissons une interface IPerson, puis définissons une variable customer dont le type est IPerson.

customer implémente les propriétés et les méthodes de l'interface IPerson.

TypeScript

interface IPerson { firstName:string, lastName:string, sayHi: ()=>string } var customer:IPerson = { firstName:"Tom", lastName:"Hanks", sayHi: ():string =>{return "Salut"} } console.log("Objet client") console.log(customer.firstName) console.log(customer.lastName) console.log(customer.sayHi()) var employee:IPerson = { firstName:"Jim", lastName:"Blakes", sayHi: ():string =>{return "Bonjour!!!"} } console.log("objet Employee") console.log(employee.firstName) console.log(employee.lastName)

Notez que les interfaces ne peuvent pas être converties en JavaScript. Elles font uniquement partie de TypeScript.

Compilez le code ci-dessus pour obtenir le code JavaScript suivant :

JavaScript

var customer = { firstName: "Tom", lastName: "Hanks", sayHi: function () { return "Hi there"; } }; console.log("Objet client"); console.log(customer.firstName); console.log(customer.lastName); console.log(customer.sayHi()); var employee = { firstName: "Jim", lastName: "Blakes", sayHi: function () { return "Bonjour!!!"; } }; console.log("objet Employee"); console.log(employee.firstName); console.log(employee.lastName);

Le résultat de sortie est:

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

Types d'union et interfaces

L'exemple suivant montre comment utiliser les types d'union dans une interface :

TypeScript

interface RunOptions { program:string; commandline:string[]|string|(()=>string); } //commandline est une chaîne de caractères var options:RunOptions = {program:"test1",commandline:"Hello"}; console.log(options.commandline) //commandline est un tableau de chaînes de caractères options = {program:"test1",commandline:["Hello","World"]}; console.log(options.commandline[0]); console.log(options.commandline[1]); //commandline est une expression de fonction options = {program:"test1",commandline:()=>{return "**Hello World**";}}; var fn:any = options.commandline; console.log(fn());

Compilez le code ci-dessus pour obtenir le code JavaScript suivant :

JavaScript

//commandline est une chaîne de caractères var options = { program: "test1", commandline: "Hello" }; console.log(options.commandline); //commandline est un tableau de chaînes de caractères options = { program: "test1", commandline: ["Hello", "World"] }; console.log(options.commandline[0]); console.log(options.commandline[1]); //commandline est une expression de fonction options = { program: "test1", commandline: function () { return "**Hello World**"; } }; var fn = options.commandline; console.log(fn());

Le résultat de sortie est:

Hello
Hello
World
**Hello World**

Interfaces et tableaux

Dans une interface, nous pouvons attribuer des types différents à la valeur d'index et aux éléments d'un tableau. La valeur d'index peut être un nombre ou une chaîne.

Définir les éléments sur le type chaîne :

Exemple

interface namelist { [index:number]:string } //Les types correspondent, correct var list2:namelist = ["Google","Example","Taobao"] //Erreur : l'élément 1 n'est pas de type string // var list2:namelist = ["Example",1,"Taobao"]

Si d'autres types sont utilisés, une erreur sera signalée :

Exemple

interface namelist { [index:number]:string } //Les types correspondent, correct // var list2:namelist = ["Google","Example","Taobao"] //Erreur : l'élément 1 n'est pas de type string var list2:namelist = ["John",1,"Bran"]
Après exécution, une erreur est signalée comme suit, indiquant une incompatibilité de type :
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; //Le type est correct agelist["example"] = 15 //Erreur de type, erreur de sortie TS2322 : Le type '"google"' n'est pas assignable au type 'number'. // agelist[2] = "google"

Héritage d'interface

L'héritage d'interface signifie qu'une interface peut s'étendre par le biais d'autres interfaces.

TypeScript permet à une interface d'hériter de plusieurs interfaces.

L'héritage utilise le mot-cléextends。

Format de syntaxe de l'héritage d'interface unique :

Child_interface_name extends super_interface_name

Format de syntaxe de l'héritage de plusieurs interfaces :

Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

Les interfaces héritées utilisent des virgules,pour les séparer.

Exemple d'héritage simple

TypeScript

interface Person { age:number } interface Musician extends Person { instrument:string } var drummer = <Musician>{}; drummer.age = 27 drummer.instrument = "Batterie" console.log("Âge :"+drummer.age) console.log("Instrument préféré :"+drummer.instrument)

Compilez le code ci-dessus pour obtenir le code JavaScript suivant :

JavaScript

var drummer = {}; drummer.age = 27; drummer.instrument = "Batterie"; console.log("Âge :" + drummer.age); console.log("Instrument préféré :" + drummer.instrument);

Le résultat de sortie est:

年龄:  27
喜欢的乐器:  Drums

Exemple d'héritage multiple

TypeScript

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

Compilez le code ci-dessus pour obtenir le code JavaScript suivant :

JavaScript

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

Le résultat de sortie est:

value 1: 12 value 2: 23
Autres extensions