Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de TypeScript: Lección 13 - Clase

Declarar clases

Sintaxis

1
2
3
class class_name {
   //class scope
}

Una declaración de clase puede incluir lo siguiente:

  • Propiedades: una propiedad es cualquier variable declarada en una clase. Las propiedades representan datos pertenecientes a objetos
  • Constructor: responsable de asignar memoria para los objetos de la clase.
  • Métodos: los métodos representan acciones que puede realizar un objeto.

Ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
class person {
    //properties
    name:string
    //constructor
    constructor(name:string) {
        this.name = name
    
    //methods
    set_name(name:string):void {
        this.name = name
    }
}

Después de compilar:

1
2
3
4
5
6
7
8
9
10
11
12
"use strict";
var person = /** @class */ (function () {
    //constructor
    function person(name) {
        this.name = name;
    }
    //methods
    person.prototype.set_name = function (name) {
        this.name = name;
    };
    return person;
}());

Clase anónima

1
2
3
4
5
6
7
var employee = class {
    name:string
    //constructor
    constructor(name:string) {
        this.name = name
    
}

Después de compilar:

1
2
3
4
5
6
7
var employee = /** @class */ (function () {
    //constructor
    function class_1(name) {
        this.name = name;
    }
    return class_1;
}());

Crear objetos de instancia

Sintaxis

1
var object_name = new class_name([ arguments ])

Ejemplo:

1
var employee = new person("Steven")

Acceso a propiedades y métodos

Sintaxis:

1
2
3
4
5
//accessing an property
obj.property_name
 
//accessing a method
obj.method_name(args)

Ejemplo:

1
2
3
4
5
6
7
var employee = new person("Steven")
 
console.log(employee.name)
 
employee.set_name("Peter")
 
console.log(employee.name)

Resultado:

1
2
[LOG]: Steven
[LOG]: Peter

Herencia de clase

Sintaxis

1
class class_name extends parent_class_name

Ejemplo:

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
class shape {
    //properties
    name:string
    area:number=0
    //constructor
    constructor(name:string) {
        this.name = name
    
    //methods
    calcArea():number {   
        return this.area   
    }   
}
 
class circle extends shape {
    radius:number=0
    setRadius(radius:number){
        this.radius = radius
    }
    //override method
    calcArea():number {    
        return this.area=Math.PI*this.radius**2
    }
}
 
var c = new circle('circle1')
c.setRadius(10)
console.log(c.calcArea())

Después de compilar:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var shape = /** @class */ (function () {
    //constructor
    function shape(name) {
        this.area = 0;
        this.name = name;
    }
    //methods
    shape.prototype.calcArea = function () {
        return this.area;
    };
    return shape;
}());
var circle = /** @class */ (function (_super) {
    __extends(circle, _super);
    function circle() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.radius = 0;
        return _this;
    }
    circle.prototype.setRadius = function (radius) {
        this.radius = radius;
    };
    //override method
    circle.prototype.calcArea = function () {
        return this.area = Math.PI * Math.pow(this.radius, 2);
    };
    return circle;
}(shape));
var c = new circle('circle1');
c.setRadius(10);
console.log(c.calcArea());

Resultado:

1
[LOG]: 314.1592653589793

Anulación de método

En el ejemplo anterior, vemos el método calcArea(), este es un ejemplo sobre la anulación de métodos.

La súper palabra clave

se usa para referirse al padre inmediato de una clase. La palabra clave se puede utilizar para hacer referencia a la versión de superclase de una variable, propiedad o método.

La palabra clave estática

La palabra clave estática se puede aplicar a los miembros de datos de una clase. Una variable estática conserva sus valores hasta que el programa finaliza la ejecución. Los miembros estáticos son referenciados por el nombre de la clase.

Ejemplo:

1
2
3
4
5
6
7
8
class staticExample {
    static val:number=0
    static display():void {
        console.log("The value of val is: "+staticExample.val)
    }
}
staticExample.val = 100
staticExample.display()

Después de compilar:

1
2
3
4
5
6
7
8
9
10
11
12
"use strict";
var staticExample = /** @class */ (function () {
    function staticExample() {
    }
    staticExample.display = function () {
        console.log("The value of val is: " + staticExample.val);
    };
    staticExample.val = 0;
    return staticExample;
}());
staticExample.val = 100;
staticExample.display();

Resultado:

1
[LOG]: The value of val is: 100

El operador instanceof

Ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
class A {
 
}
 
class B extends A{
 
}
 
var b = new B()
 
console.log("b is an instance of class A: ", b instanceof A)
console.log("b is an instance of class B: ", b instanceof B)

Resultado:

1
2
[LOG]: b is an instance of class A: ,  true
[LOG]: b is an instance of class B: ,  true

Modificadores de acceso
TypeScript admite tres modificadores de acceso: público, privado y protegido.

S.No.Especificador de acceso y descripción
1.

público

Un miembro de datos públicos tiene accesibilidad universal. Los miembros de datos de una clase son públicos de forma predeterminada.

2.

privado

Los miembros de datos privados son accesibles solo dentro de la clase que define estos miembros. Si un miembro de la clase externa intenta acceder a un miembro privado, el compilador arroja un error.

3.

protegido

Un miembro de datos protegidos es accesible por los miembros dentro de la misma clase que el anterior y también por los miembros de las clases secundarias.

Ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
class A {
    protected val1:string="0"
    private val2:string="val2"
    public val3:number=0
    run():void{
        console.log(this.val2)
    }
}
 
class B extends A{
    constructor(){
        super()
        this.val1 = "1"
        //this.val2 = "2" //Error: Property 'val2' is private and only accessible within class 'A'.
        this.val3 = 10
    }
}
var b = new B()
//console.log(b.val1) //Error: Property 'val1' is protected and only accessible within class 'A' and its subclasses.
//console.log(b.val2) //Error: Property 'val2' is private and only accessible within class 'A'.
console.log(b.val3)

Resultado:

1
[LOG]: 10

Classe e interfaz: la palabra clave implements

Ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
interface Ishape {
    name:string
    area:number
    calcArea:()=>number
 
}
 
class Shape implements Ishape{
    name:string
    area:number=0
    constructor(name:string){
        this.name = name
    }
    calcArea():number{
        return this.area
    }
}

Utilice el operador de aserción no nula en la clase:

1
2
3
4
5
6
7
8
9
10
11
12
13
class App extends Vue {
  datetime!:string
  data() {
    return {
      datetime: new Date().toLocaleString()
    }
  }
  mounted() {
    setInterval(() => {
      this.datetime = new Date().toLocaleString()
    }, 1000)
  }
}

Publicar un comentario

0 Comentarios