TypeScript - Interfaces

Uma interface é um contrato sintático ao qual uma entidade deve se conformar. Em outras palavras, uma interface define a sintaxe que qualquer entidade deve aderir.

As interfaces definem propriedades, métodos e eventos, que são os membros da interface. As interfaces contêm apenas a declaração dos membros. É responsabilidade da classe derivada definir os membros. Freqüentemente, ajuda a fornecer uma estrutura padrão que as classes derivadas seguiriam.

Vamos considerar um objeto -

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

Se considerarmos a assinatura do objeto, pode ser -

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

Para reutilizar a assinatura em objetos, podemos defini-la como uma interface.

Declaração de interfaces

A palavra-chave interface é usada para declarar uma interface. Aqui está a sintaxe para declarar uma interface -

Sintaxe

interface interface_name { 
}

Exemplo: Interface e 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);

O exemplo define uma interface. O objeto do cliente é do tipo IPerson. Portanto, agora será vinculado ao objeto para definir todas as propriedades conforme especificado pela interface.

Outro objeto com a assinatura seguinte, ainda é considerado uma pessoa de IP porque esse objeto é tratado pelo seu tamanho ou assinatura.

Na compilação, ele irá gerar o seguinte 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);

A saída do código de exemplo acima é a seguinte -

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

As interfaces não devem ser convertidas para JavaScript. É apenas parte do TypeScript. Se você vir a captura de tela da ferramenta TS Playground, não haverá nenhum script java emitido quando você declarar uma interface diferente de uma classe. Portanto, as interfaces têm impacto zero no tempo de execução do JavaScript.

Tipo de união e interface

O exemplo a seguir mostra o uso de Tipo de União e Interface -

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

Na compilação, ele irá gerar o seguinte 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());

Seu resultado é o seguinte -

Hello 
Hello 
World 
**Hello World**

Interfaces e matrizes

A interface pode definir o tipo de chave que um array usa e o tipo de entrada que ele contém. O índice pode ser do tipo string ou número do tipo.

Exemplo

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 e herança

Uma interface pode ser estendida por outras interfaces. Em outras palavras, uma interface pode herdar de outra interface. O typescript permite que uma interface herde de várias interfaces.

Use a palavra-chave extends para implementar herança entre interfaces.

Sintaxe: Herança de Interface Única

Child_interface_name extends super_interface_name

Sintaxe: herança de múltiplas interfaces

Child_interface_name extends super_interface1_name, 
super_interface2_name,…,super_interfaceN_name

Exemplo: Herança de Interface Simples

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)

Na compilação, ele irá gerar o seguinte 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);

Seu resultado é o seguinte -

Age: 27 
Instrument: Drums

Exemplo: herança de múltiplas interfaces

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)

O objeto Iobj é do tipo folha de interface. A folha de interface em virtude da herança agora tem dois atributos - v1 e v2 respectivamente. Portanto, o objeto Iobj agora deve conter esses atributos.

Na compilação, ele irá gerar o seguinte 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);

A saída do código acima é a seguinte -

value 1: 12   value 2: 23