Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de TypeScript: Lección 12 - Interfaz

InstintoProgramador diciembre 07, 2020

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.

Declaración de interfaz

Sintaxis

1
2
interface interface_name {
}

Propiedades opcionales

1
2
3
4
interface People {
  name: string
  age?: number
}

Propiedades de solo lectura

1
2
3
4
interface Point {
  readonly x: number
  readonly y: number
}

Tipos de funciones

1
2
3
4
interface runCommand{
    name:string,
    run:(file:string)=>string
}

Tipos de clases

1
2
3
interface ClockInterface {
  currentTime: Date
}
1
2
3
interface ClockConstructor {
  new (hour: number, minute: number): ClockInterface
}

Ejemplo 1 de interfaz y objeto
:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
interface Igrab{
    type:string,
    getTitle:(link:string)=>string,
    getContent:(link:string)=>string
}
 
var grabCNN:Igrab = {
    type: "CNN",
    getTitle: (link:string)=>{
        return "Title of "+link
    },
    getContent: (link:string)=>{
        return "Content of "+link
    }
}
 
console.log(grabCNN.type)
console.log(grabCNN.getTitle("https://edition.cnn.com/somelink.html"))
console.log(grabCNN.getContent("https://edition.cnn.com/somelink.html"))

Después de compilar:

1
2
3
4
5
6
7
8
9
10
11
12
13
"use strict";
var grabCNN = {
    type: "CNN",
    getTitle: function (link) {
        return "Title of " + link;
    },
    getContent: function (link) {
        return "Content of " + link;
    }
};
console.log(grabCNN.type);
console.log(grabCNN.getTitle("https://edition.cnn.com/somelink.html"));
console.log(grabCNN.getContent("https://edition.cnn.com/somelink.html"));

Resultado:

Ejemplo 2 de interfaz y tipo de unión
:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
interface runCommand{
    name:string,
    run:string|string[]|((file:string)=>string)
}
 
var run:runCommand = {
    name: "run PHP",
    run: (file:string)=>{
        return "php "+file
    }
}
 
console.log(run.name)
console.log(run.run)
 
run = {
    name: "run free",
    run: "free -m"
}
 
console.log(run.name)
console.log(run.run)
 
run = {
    name: "run ps",
    run: ["ps","aux"]
}
 
console.log(run.name)
console.log(run.run)

Resultado:

1
2
3
4
5
6
[LOG]: run PHP
[LOG]: function (file) { return "php " + file; }
[LOG]: run free
[LOG]: free -m
[LOG]: run ps
[LOG]: [ "ps", "aux" ]

Interfaz y matriz (tipos indexables)
Ejemplo 3:

1
2
3
4
5
6
7
8
9
10
11
interface list_number_string {
   [index:number]:string
}
 
var list1:list_number_string = ["tutorialspots",".com"]
 
interface list_string_number {
   [index:string]:number
}
 
var list2:list_string_number = {"Monthday": 2, "Tuesday": 3}

Array y propiedades opcionales

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface Person {
  name: string
  age?: number
  [propName: string]: any
}
 
var Person1:Person = {
    name: "Peter",   
    job: "Engineer"
}
 
var Person2:Person = {
    name: "John",   
    age: 34
}

Interfaz y herencia

Typecript permite que una interfaz herede de múltiples interfaces.

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

Ejemplo 4:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface Vehicle {
   wheels:number
}
 
interface Auto extends Vehicle {
   branch:string
   name:string
}
 
var GLS = <Auto>{};
GLS.wheels = 4
GLS.name = "GLS"
GLS.branch = "Mercedes"
console.log("Name:  "+GLS.name)
console.log("Branch:  "+GLS.branch)

Resultado:

1
2
[LOG]: Name: GLS
[LOG]: Branch: Mercedes

Ejemplo 5:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
interface IFilms {
   title:string
   description:string
   thumbnail:string
}
interface ITVSeries {
   seasons:number[]
}
interface TVSeries extends IFilms,ITVSeries {   
}
var tvseries:TVSeries = {
    title: "The title",
    description: "The description",
    thumbnail: "The thumbnail",
    seasons: [1,2,3,4,5]
}
 
console.log("Title:  "+tvseries.title)
console.log("Description:  "+tvseries.description)

Resultado:

1
2
[LOG]: Title: The title
[LOG]: Description: The description

Ejemplo 6: la interfaz puede extender muchas clases

1
2
3
4
5
6
7
8
9
class Jumpable {
    jump() {}
}
   
class Duckable {
    duck() {}
}
 
interface Sprite extends Jumpable, Duckable {}

Publicar un comentario

0 Comentarios

Dejanos tu comentario para seguir mejorando!