TypeScript Básico
General
Tipos de datos
String
Number
Boolean
Array
Tuple
Enum
Any
Void
Never
Variables y Type Annotations
Enums y Arrays
Funciones
Arrow functions
Definiendo y usando Function Types
Definiendo parámetros
Módulos
POO
Usando sobrecarga de métodos
Objetos
Un objeto es una entidad que agrupa un estado y una funcionalidad relacionada.
Clases
Una clase es una plantilla genérica a partir de la cuál instanciamos los objetos. Dicho de otra manera, una clase es una abstracción en la que se define el comportamiento que va a tener el objeto.
Las clases en Typescript son muy similares a lo que nos ofrecen otros lenguajes de orientación a objetos tradicionales, esto nos ayudará a modularizar nuestro código y a simplificar el desarrollo.
Ejemplo
class Employee { // atributo accesible desde fuera de la clase. public name : string; // Atributos accesible desde clases que hereden de Employee. protected age: number; // Access only inside the Employee class. private mobile : string; constructor(name:string, age: number,mobile: string){ this.name = name; this.age = age; this.mobile = mobile; } getName(){ return this.name; } setName(name: string){ this.name = name; } getAge(){ return this.age; } setAge(age: number){ this.age = age; } getMobile(mobile: string){ this.mobile = mobile; } }
Métodos accesores (getters y setters)
Como sabemos, los métodos get y set, también conocidos como métodos accesores, son simples funciones que usamos en las clases para mostrar (get) o modificar (set) el valor de un atributo. Normalmente los escribimos como "get" o "set" seguido del nombre de la propiedad a la que queremos acceder.
getName()
En Typescript se puede hacer de esta forma o haciendo uso de las palabras reservadas get o set delante del nombre de la función.
Ejemplo
class Actor { private _name : string; constructor(_name:string){ this._name = _name; } set name (value: string){ this._name = value; } get name (){ return this._name; } } let actor = new Actor('Haider Malik'); console.log(actor.name); // set actor.name = 'Jane Doe'; console.log(actor.name);
Herencia
La herencia nos permite extender la funcionalidad nuestra clase herendando de una clase padre. La clase hija hereda todos los miembros de su clase base y puede sobreescribir todos aquellos métodos y/o propiedades públicos o protegidos.
Ejemplo
class Manager extends Employee { constructor(name: string, age: number, mobile: string){ super(name,age,mobile); this.age = 24; } } let manager = new Manager(‘Jane’,23, ‘0343–23332233’); console.log(manager.getName()); console.log(manager.getAge());
Clases abstractas
Este tipo de clases no pueden r seinstanciadas ya que se usan para definir comportamientos independientemente de su concreción. Su implementación es similar a la de una clase normal con la diferencia que hay que anteponer el termino abstract antes de declararlas.
Ejemplo
abstract class Product { productName: string = "Default"; price: number = 1000; abstract changeName(name: string): void;
calcPrice(){ return this.price; } } class Mobile extends Product { changeName(name: string): void { this.productName = name; } } let mobProduct = new Mobile(); console.log(mobProduct); mobProduct.changeName("Super It Product"); console.log(mobProduct);
Interfaces
Las interfaces son abstracciones que definen el comportamiento de las clases que la implementan. Son muy prácticas ya que nos permiten decirle al compilador cual es el comportamiento que debe esperar del objeto que definamos. TypeScript no requiere que un objeto tenga exactamente la misma estructura definida por la interfaz. Para que se los considere válidos, los objetos pueden tener cualquier forma siempre que definan las funciones y propiedades requeridas por la interfaz que implementan.
Ejemplo
interface ICar{ engine: string; color: string;
brake: () => void; } class Car implements ICar { constructor (public engine: string, public color: string) {}
function brake(){ console.log("Frenando...") } }
Decoradores
Los decoradores son un estándar propuesto en ECMAScript2016. En TypeScript podemos habilitarlos añadiendo a nuestro tsconfig.json la directiva "experimentalDecorators: true".
Ejemplo
{ "compilerOptions": { "module": "commonjs", "target": "es2015", "removeComments": true, "experimentalDecorators": true, "outDir": "./build" }, "include": ["src/**/*"] }
Los decoradores son un mecanismo para modificar clases, métodos, propiedades e incluso parámetros de forma declarativa.