TypeScript - Interfaces

Una interfaz es un contrato sintáctico que debe cumplir una entidad. En otras palabras, una interfaz define la sintaxis a la que debe adherirse cualquier entidad.

Las interfaces definen propiedades, métodos y eventos, que son los miembros de la interfaz. Las interfaces contienen solo la declaración de los miembros. Es responsabilidad de la clase derivada definir los miembros. A menudo ayuda a proporcionar una estructura estándar que seguirían las clases derivadas.

Consideremos un objeto -

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

Si consideramos la firma del objeto, podría ser:

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

Para reutilizar la firma en todos los objetos, podemos definirla como una interfaz.

Declaración de interfaces

La palabra clave de interfaz se utiliza para declarar una interfaz. Aquí está la sintaxis para declarar una interfaz:

Sintaxis

interface interface_name { 
}

Ejemplo: interfaz y objetos

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);

El ejemplo define una interfaz. El objeto de cliente es del tipo IPerson. Por lo tanto, ahora será vinculante para el objeto definir todas las propiedades según lo especificado por la interfaz.

Otro objeto con la siguiente firma, todavía se considera como IPerson porque ese objeto se trata por su tamaño o firma.

Al compilar, generará el siguiente código JavaScript.

//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 salida del código de ejemplo anterior es la siguiente:

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

Las interfaces no se deben convertir a JavaScript. Es solo parte de TypeScript. Si ve la captura de pantalla de la herramienta TS Playground, no se emite ningún script java cuando declara una interfaz diferente a una clase. Entonces, las interfaces tienen un impacto de JavaScript en tiempo de ejecución cero.

Tipo de unión e interfaz

El siguiente ejemplo muestra el uso del tipo de unión y la interfaz:

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());

Al compilar, generará el siguiente código JavaScript.

//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());

Su salida es la siguiente:

Hello 
Hello 
World 
**Hello World**

Interfaces y matrices

La interfaz puede definir tanto el tipo de clave que utiliza una matriz como el tipo de entrada que contiene. El índice puede ser de tipo cadena o número de tipo.

Ejemplo

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 y herencia

Una interfaz puede ampliarse con otras interfaces. En otras palabras, una interfaz puede heredar de otra interfaz. TypeScript permite que una interfaz herede de múltiples interfaces.

Utilice la palabra clave extiende para implementar la herencia entre interfaces.

Sintaxis: herencia de interfaz única

Child_interface_name extends super_interface_name

Sintaxis: herencia de interfaz múltiple

Child_interface_name extends super_interface1_name, 
super_interface2_name,…,super_interfaceN_name

Ejemplo: herencia de interfaz 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)

Al compilar, generará el siguiente código JavaScript.

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

Su salida es la siguiente:

Age: 27 
Instrument: Drums

Ejemplo: herencia de interfaz múltiple

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)

El objeto Iobj es del tipo interfaz hoja. La hoja de interfaz en virtud de la herencia ahora tiene dos atributos: v1 y v2 respectivamente. Por tanto, el objeto Iobj ahora debe contener estos atributos.

Al compilar, generará el siguiente código JavaScript.

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

La salida del código anterior es la siguiente:

value 1: 12   value 2: 23