TypeScript - Interfaces

Une interface est un contrat syntaxique auquel une entité doit se conformer. En d'autres termes, une interface définit la syntaxe à laquelle toute entité doit adhérer.

Les interfaces définissent les propriétés, les méthodes et les événements, qui sont les membres de l'interface. Les interfaces contiennent uniquement la déclaration des membres. Il est de la responsabilité de la classe dérivée de définir les membres. Cela aide souvent à fournir une structure standard que les classes dérivantes suivraient.

Considérons un objet -

var person = { 
   FirstName:"Tom", 
   LastName:"Hanks", 
   sayHi: ()=>{ return "Hi"} 
};

Si nous considérons la signature de l'objet, cela pourrait être -

{ 
   FirstName:string, 
   LastName:string, 
   sayHi()=>string 
}

Pour réutiliser la signature sur des objets, nous pouvons la définir comme une interface.

Déclaration d'interfaces

Le mot clé interface est utilisé pour déclarer une interface. Voici la syntaxe pour déclarer une interface -

Syntaxe

interface interface_name { 
}

Exemple: interface et objets

interface IPerson { 
   firstName:string, 
   lastName:string, 
   sayHi: ()=>string 
} 

var customer:IPerson = { 
   firstName:"Tom",
   lastName:"Hanks", 
   sayHi: ():string =>{return "Hi there"} 
} 

console.log("Customer Object ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  

var employee:IPerson = { 
   firstName:"Jim",
   lastName:"Blakes", 
   sayHi: ():string =>{return "Hello!!!"} 
} 
  
console.log("Employee  Object ") 
console.log(employee.firstName);
console.log(employee.lastName);

L'exemple définit une interface. L'objet client est du type IPerson. Par conséquent, il sera désormais obligatoire pour l'objet de définir toutes les propriétés spécifiées par l'interface.

Un autre objet avec la signature suivante est toujours considéré comme IPerson car cet objet est traité par sa taille ou sa signature.

Lors de la compilation, il générera le code JavaScript suivant.

//Generated by typescript 1.8.10
var customer = { firstName: "Tom", lastName: "Hanks",
   sayHi: function () { return "Hi there"; }
};
console.log("Customer Object ");
console.log(customer.firstName);
console.log(customer.lastName);
console.log(customer.sayHi());
var employee = { firstName: "Jim", lastName: "Blakes",
   sayHi: function () { return "Hello!!!"; } };

console.log("Employee  Object ");
console.log(employee.firstName);
console.log(employee.lastName);

La sortie de l'exemple de code ci-dessus est la suivante -

Customer object 
Tom 
Hanks 
Hi there 
Employee  object 
Jim  
Blakes 
Hello!!!

Les interfaces ne doivent pas être converties en JavaScript. Cela fait juste partie de TypeScript. Si vous voyez la capture d'écran de l'outil TS Playground, aucun script java n'est émis lorsque vous déclarez une interface contrairement à une classe. Les interfaces n'ont donc aucun impact JavaScript à l'exécution.

Type d'union et interface

L'exemple suivant montre l'utilisation du type et de l'interface Union -

interface RunOptions { 
   program:string; 
   commandline:string[]|string|(()=>string); 
} 

//commandline as string 
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  

//commandline as a string array 
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  

//commandline as a function expression 
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 

var fn:any = options.commandline; 
console.log(fn());

Lors de la compilation, il générera le code JavaScript suivant.

//Generated by typescript 1.8.10
//commandline as string
var options = { program: "test1", commandline: "Hello" };
console.log(options.commandline);

//commandline as a string array
options = { program: "test1", commandline: ["Hello", "World"] };
console.log(options.commandline[0]);
console.log(options.commandline[1]);

//commandline as a function expression
options = { program: "test1", commandline: function () { return "**Hello World**"; } };
var fn = options.commandline;
console.log(fn());

Sa sortie est la suivante -

Hello 
Hello 
World 
**Hello World**

Interfaces et tableaux

L'interface peut définir à la fois le type de clé qu'un tableau utilise et le type d'entrée qu'il contient. L'index peut être de type chaîne ou numéro de type.

Exemple

interface namelist { 
   [index:number]:string 
} 

var list2:namelist = ["John",1,"Bran"] //Error. 1 is not type string  
interface ages { 
   [index:string]:number 
} 

var agelist:ages; 
agelist["John"] = 15   // Ok 
agelist[2] = "nine"   // Error

Interfaces et héritage

Une interface peut être étendue par d'autres interfaces. En d'autres termes, une interface peut hériter d'une autre interface. Typescript permet à une interface d'hériter de plusieurs interfaces.

Utilisez le mot clé extend pour implémenter l'héritage entre les interfaces.

Syntaxe: héritage d'interface unique

Child_interface_name extends super_interface_name

Syntaxe: héritage d'interfaces multiples

Child_interface_name extends super_interface1_name, 
super_interface2_name,…,super_interfaceN_name

Exemple: héritage d'interface simple

interface Person { 
   age:number 
} 

interface Musician extends Person { 
   instrument:string 
} 

var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("Age:  "+drummer.age) console.log("Instrument:  "+drummer.instrument)

Lors de la compilation, il générera le code JavaScript suivant.

//Generated by typescript 1.8.10
var drummer = {};
drummer.age = 27;
drummer.instrument = "Drums";
console.log("Age:  " + drummer.age);
console.log("Instrument:  " + drummer.instrument);

Sa sortie est la suivante -

Age: 27 
Instrument: Drums

Exemple: héritage d'interfaces multiples

interface IParent1 { 
   v1:number 
} 

interface IParent2 { 
   v2:number 
} 

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

L'objet Iobj est du type interface leaf. La feuille d'interface en vertu de l'héritage a maintenant deux attributs, respectivement v1 et v2. Par conséquent, l'objet Iobj doit maintenant contenir ces attributs.

Lors de la compilation, il générera le code JavaScript suivant.

//Generated by typescript 1.8.10
var Iobj = { v1: 12, v2: 23 };
console.log("value 1: " + this.v1 + " value 2: " + this.v2);

La sortie du code ci-dessus est la suivante -

value 1: 12   value 2: 23