Clase de TypeScript

En términos de OOP (Programación Orientada a Objetos), una clase es un modelo que se utiliza para crear objetos. Una clase es una colección de objetos que tienen propiedades comunes. Contiene métodos, constructores, bloques, clases anidadas, interfaces, etc. Los objetos son básicamente las entidades que tienen algunas propiedades como un objeto en el mundo real (silla, mesa, etc.).
Typescript es un lenguaje de programación de código abierto que se basa en Javascript, también conocido como Superset of Javascript. Typescript tiene más funciones en comparación con Javascript. Admite funciones de programación orientada a objetos como clases, interfaz, polimorfismo, etc.

Sintaxis para declarar una clase:

// typescript code
class class_name{
    field;
    method;
}

El código anterior, cuando se pasa a un compilador de TypeScript, se convertirá en el código javascript que se muestra a continuación. Somos libres de usar cualquier nombre en lugar de class_name.

// code converted to javascript
var class_name = /** @class */ (function () {
    function class_name() {
    }
    return class_name;
}());

Nota: El código TypeScript se guarda con la extensión .ts.
Veamos algunos ejemplos TypeScripts también:

// typescript code
class Student {
    studCode: number;
    studName: string;
  
    constructor(code: number, name: string) {
        this.studName = name;
        this.studCode = code;
    }
    getGrade() : string {
        return "A+" ;
     }
} 

El ejemplo declara una clase Student que tiene dos campos que son studCode y studName y un constructor que es un tipo especial de función responsable de la inicialización de variables u objetos. Aquí está el constructor parametrizado (ya tiene los parámetros). Y esta palabra clave que se refiere a la instancia actual de la clase. getGrade() es una función simple que devuelve una string.
El código TypeScript anterior se convertirá en el código javascript como se muestra a continuación:

// converted javascript code
var Student = /** @class */ (function () {
    function Student(code, name) {
        this.studName = name;
        this.studCode = code;
    }
    Student.prototype.getGrade = function () {
        return "A+";
    };
    return Student;
}());

Objetos
Un objeto es una instancia de clase que contiene un conjunto de pares de valores clave. Su valor puede ser valores o funciones escalares o incluso una array de otros objetos.
La sintaxis de un objeto se parece al siguiente código:

// simple object code in javascript
let object_name = { 
   key1: “value”,  
   key2: function() {
      //functions 
   }, 
   key3:[“content1”, “content2”] //collection  
};

Un objeto puede contener valores escalares, funciones y estructuras como arrays y tuplas.
Veamos con un ejemplo sencillo:

// simple javascript code
let person = {
   fName:"Mukul", 
   lName:"Latiyan", 
   Hello:function() {  }  //Type template 
} 
person.Hello = function() {  
   console.log("Hello "+person.fName)
}  
person.Hello()

Producción:

// typescript object example
var person = { 
   fname:"Mukul", 
   lname:"Latiyan" 
}; 
var hello = function(obj: { fname:string, lname :string }) { 
   console.log("first name :"+obj.fname) 
   console.log("last name :"+obj.lname) 
} 
hello(person)

Salida:

para crear objetos de instancia.
Para crear una instancia de la clase, use con la nueva palabra clave seguida del nombre de la clase. Para asignar memoria para objetos con la ayuda nueva durante el tiempo de ejecución. Me gusta:

let object_name = new class_name([ arguments ])

Para crear una instancia de un objeto, podemos hacer algo como el siguiente código.

let obj = new Student();  

Acceso a atributos y funciones:
el objeto puede acceder a los atributos y funciones de una clase. Con la ayuda de ‘ . ‘ notación de puntos o notación de corchetes ([”]) accedemos a los miembros de datos de una clase.

//accessing an attribute 
obj.field_name or obj['field_name']

//accessing a function 
obj.function_name()

Considere el siguiente código:

// typescript code
class Car { 
   //field 
   engine:string; 
     
   //constructor 
   constructor(engine:string) { 
      this.engine = engine 
   }  
     
   //function 
   display():void { 
      console.log("Function displays Engine is  :   "+this.engine) 
   } 
} 
  
//create an object 
var o1 = new Car("geeks")
  
//access the field 
console.log("Reading attribute value Engine as :  "+o1.engine)  
  
//access the function
o1.disp()

Después de la compilación, este código se convertirá en el javascript que se muestra a continuación:

// converted javascript code
var Car = /** @class */ (function () {
    //constructor 
    function Car(engine) {
        this.engine = engine;
    }
    //function 
    Car.prototype.display = function () {
        console.log("Function displays Engine is  :   " + this.engine);
    };
    return Car;
}());
//create an object 
var o1 = new Car("geeks");
//access the field 
console.log("Reading attribute value Engine as :  " + o1.engine);
//access the function
o1.disp();

Producción:

Publicación traducida automáticamente

Artículo escrito por niku123 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *