09. Typescript

Typescript

TypeScript es un lenguaje de programación de código abierto, desarrollado y mantenido por Microsoft. Es un superconjunto(superset) de JavaScript, que esencialmente añade tipos estáticos y objetos basados en clases. Se transpila a JS (fácilmente usando parcel-bundler).

JS es dinamicamente y debilmente tipado.

Tipos básicos

• boolean: Valor verdadero o falso.

let muted: boolean = true;

• number: Números.

let numerador: number = 42;

• string: Cadenas de texto.

let saludo: string = `Me llamo ${nombre}`;

• string[]: Arreglo del tipo cadena de texto.

let people: string[] = [];

• :void, :never Funciones.

const noReturn = ():void => {};
const noFinish = ():never => {}; // not finish because is a infinity loop or throw exception.

• Array: Arreglo multi-tipo, acepta cadenas de texto o números.

// mutable
let peopleAndNumbers: Array<string | number> = [];
let peopleAndNumbers: (string | number)[] = [];

// inmutable
let peopleAndNumbers: ReadonlyArray<string | number> = [1, 'a', 'b'];

// const assertion
const config = ['http://hocalhost', 8000, '/api'] as const;

const config: readonly = ['http://hocalhost', 8000, '/api']; // cada item es readonly y su tipo es su propio valor

• enum: Es un tipo especial llamado enumeración.

enum Color {
  Rojo = "Rojo",
  Verde = "Verde",
  Azul = "Amarillo",
}
let colorFavorito: Color = Color.Azul;

• any: Cualquier tipo.

let comodin: any  = "Joker";
comodin = { type: "WildCard" }

• unknown: Cualquier tipo, pero debes revisar el tipo antes de ejecutar cualquier método.

const stringify = (value: unknown): string => {
  if (value instanfeof Date) {
    return value.toISOString();
  }
  if (Array.isArray(value)) {
    return JSON.stringify(value);
  }
}

• object: Del tipo objeto.

let someObject: object = { type: "WildCard" };

type Config = {
  url: strin,
  port: number,
  path: string,
};

const config: Config = {
  url: 'http://localhost',
  port: 8000,
  path: '/api'
}

Funciones

function add(a: number, b: number): number {
  return a + b;
}
const sum = add(4, 25)

function createAdder(a: number): (number) => number {
  return function (b: number) {
    return a + b;
  }
}

type Double = (x: number) => number;
interface Double = { (x: number): number }

const double: Double = (x) => x * 2;
const double2: Double = function (x) {
  return x * 2;
}

Interfaces

interface Rectangulo {
  height: number,
  width: number
}

let rect: Rectangulo = {
  height: 4,
  width: 3
}

Genericos

const appendToArr = <T, U> (
  value: T,
  arr: ReadonlyArray<U>,
): ReadonlyArray<T | U> => [...arr, value];

const arr = ['a', 1]; // const arr: (strung | number)[];
const arr2 = appendToArr(false, arr) // const arr2: (strung | number | boolean)[];

Clases

JavaScript tradicional utiliza funciones y herencia basada en prototipos

class Greeter {
    greeting: string; // propertie

    // not return, only can exist 1
    constructor(message: string) {
        this.greeting = message;
    }

    greet() { // method
        return"Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

Herencia

class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }

    /*
    // to override methods from parent
    move() {
      super.move(10); // to call methods from parent can use super.anyMethod();
    }
    */
}

const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

Modificadores de Acceso

Public (default)

class Animal {
    public name: string;
    public constructor(theName: string) { this.name = theName; }
    public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

Private

No se puede acceder desde afuera de su clase.

class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}

new Animal("Cat").name; // Error: 'name' is private;

Protected

Similar a private, añadiendo que las clases derivadas también pueden accederlo.

class Person {
    protected name: string;
    constructor(name: string) { this.name = name; }
}

class Employee extends Person {
    private department: string;

    constructor(name: string, department: string) {
        super(name); // every time you override constructor need call super();
        this.department = department;
    }

    public getElevatorPitch() {
        return`Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}

let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // error