TypeScript Básico

Tipos de datos

String

El tipo de datos string se utiliza para almacenar información textual. Tanto JavaScript como TypeScript usan comillas dobles ("), así como comillas simples (') para rodear su información textual como una cadena. Una cadena puede contener cero o más caracteres entre comillas.

TypeScript también admite plantillas de cadenas de texto o plantillas de literales. Estas plantillas de literales le permiten incrustar expresiones en una cadena de texto. Las plantillas de literales están encerrados por el carácter de retroceso (`) en lugar de comillas dobles y comillas simples que encierran cadenas de texto regulares. Fueron presentados en ES6. Esto significa que usted obtendrá diferentes resultados de JavaScript en función de la versión a la que esté apuntando.

Ejemplos

Ejemplo 1

// With strictNullChecks set to true
let cadena1: string = undefined; // Error
let cadena2: string = null;      // Error
let cadena3: string = "";
let cadena4: string = "y";
let cadena5: string = "building";
let cadena6: string = 3;         // Error
let cadena7: string = "3";

Ejemplo 2

// With strictNullChecks set to false
let cadena1: string = undefined; // Ok
let cadena2: string = null;      // Ok
let cadena3: string = "";
let cadena4: string = "y";
let cadena5: string = "building";
let cadena6: string = 3;         // Error
let cadena7: string = "3";

Ejemplo 3

Uso de plantillas de literales en TypeScript:

let cadena: string = "pileta";
let metros: number = 100;
let sentence: string = `La ${cadena} tiene ${metros} metros de largo.`;

En la compilación en JavaScript:

// Salida ES5
var cadena = "pileta";
var metros = 100;
var sentence = "La ".concat(cadena, " tiene ").concat(metros, " metros de largo.");

// Salida ES6
let cadena = "pileta";
let metros = 100;
let sentence = `La ${cadena} tiene ${metros} metros de largo.`;

Boolean

El tipo de dato boolean solo tiene dos valores válidos. Solo puedes establecer su valor en true o false.

Ejemplo

let bandera1: boolean = true;
let bandera2: boolean = false;
let bandera3: boolean = 23;     // Error
let bandera4: boolean = "blue"; // Error

Null

Al igual que en JavaScript, el tipo de datos null en TypeScript solo puede tener un valor válido: null. Una variable null no puede contener otros tipos de datos como número y cadena de texto. Establecer una variable a null borrará su contenido si tuviese alguno.

Recuerde que cuando el indicador strictNullChecks se configura como true en tsconfig.json, solo el valor null se puede asignar a las variables con tipo null. Este indicador está desactivado por defecto, lo que significa que también puede asignar el valor null a variables con otros tipos como number o void.

Ejemplos

Ejemplo 1

// With strictNullChecks set to true
let a: null = null;      // Ok
let b: undefined = null; // Error
let c: number = null;    // Error
let d: void = null;      // Error

Ejemplo 2

// With strictNullChecks set to false
let a: null = null;      // Ok
let b: undefined = null; // Ok
let c: number = null;    // Ok
let d: void = null;      // Ok

Undefined

Cualquier variable cuyo valor no haya especificado se establece en undefined. Otra manera es establecer explícitamente el tipo de una variable como indefinida.

Observación

Tener en cuenta que una variable como undefined solo puede tener undefined como su valor. Si la opción strictNullChecks está configurada como false, también podrá asignar undefined a variables de tipo numérico y cadenas de texto, etc.

Ejemplos

Ejemplo 1

// With strictNullChecks set to true
let data1: undefined = undefined; // Ok
let data2: undefined = null;      // Error
let data3: number = undefined;    // Error
let data4: void = undefined;      // Ok

Ejemplo 2

// With strictNullChecks set to false
let data1: null = null;      // Ok
let data2: undefined = null; // Ok
let data3: number = null;    // Ok
let data4: void = null;      // Ok

POO

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 ser instanciadas 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.