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