Tag Archive Angular

PorErik Guerrero V.

03 – Tipo de datos en TypeScript

  1. number: Valor numericos, todos los números en TypeScript son valores de coma flotante. Estos números de coma flotante obtienen el tipo number. Además de los literales hexadecimales y decimales, TypeScript también admite literales binarios y octales introducidos en ECMAScript 2015.
    let decimal: number = 6;
    let hex: number = 0xf00d;
    let binary: number = 0b1010;
    let octal: number = 0o744;

     

  2. string: Valor de cadena o plantilla, que pueden abarcar varias líneas y tener expresiones incrustadas. Estas cadenas están rodeadas por el carácter backtick / backquote ( `), y las expresiones incrustadas son de la forma ${ expr }.
    let fullName: string = `Bob Bobbington`;
    let age: number = 37;
    let sentence: string = `Hello, my name is ${fullName}.
    
    I'll be ${age + 1} years old next month.`;

     

  3. boolean: true o false
    • == para comparar operaciones si son iguales.
    • != para comparar operaciones distintas.
    • && nos devuelve un verdadero cuando ambas expresiones son verdaderas.
    • || nos devuelve un verdadero si cualquier expresion es verdadero.
  4. object: Un objeto es una instancia que contiene un conjunto de pares de valores clave. Los valores pueden ser valores o funciones escalares o incluso una matriz de otros objetos.
    var object_name = {
     key1: “value1”, //scalar value
     key2: “value”,
     key3: function() {
      //functions
     },
     key4:[“content1”, “content2”] //collection
    };

     

  5. interface: La interfaz es una estructura que define el contrato en su aplicación. Define la sintaxis para las clases a seguir. Las clases que se derivan de una interfaz deben seguir la estructura proporcionada por su interfaz. Una interfaz se define con la palabra clave interfacey puede incluir propiedades y declaraciones de métodos utilizando una función o una función de flecha.
    interface IEmployee {
     empCode: number;
     empName: string;
     getSalary: (number) => number; // arrow function
     getManagerName(number): string;
    }

     

  6. any: Es posible que necesitemos describir el tipo de variables que no sabemos cuando estamos escribiendo una solicitud. Estos valores pueden provenir de contenido dinámico, por ejemplo, del usuario o de una biblioteca de terceros. En estos casos, queremos inhabilitar la verificación de tipos y dejar que los valores pasen por las comprobaciones en tiempo de compilación. Para hacerlo, los etiquetamos con el tipo “any”.
    let notSure: any = 4;
    notSure = "maybe a string instead";
    notSure = false; // okay, definitely a boolean

     

  7. array: TypeScript, como JavaScript, le permite trabajar con matrices de valores. Los tipos de matriz se pueden escribir de una de dos maneras. En el primero, usa el tipo de elementos seguido de [] para denotar una matriz de ese tipo de elemento:
    let list: number[] = [1, 2, 3];
    La segunda forma usa un tipo de matriz genérico Array<elemType>:
    
    let list: Array<number> = [1, 2, 3];

     

PorErik Guerrero V.

02 – Generar archivo js a partir de un archivo TypeScript

Generar archivo js a partir de un archivo TypeScript.

Seguimos los siguientes pasos:

  1. Creamos el archivo index.html
  2. Creamos el archivo index.ts
  3. Creamos el archivo index.js a partir del archivo ts index.ts con el comando tsc index.ts, si deseamos que el archivo este siempre a escucha de los cambios agregamos el comando watch el cual quedaria de la siguiente manera tsc index.ts –watch
PorErik Guerrero V.

01 – TypeScript y Angular 8.x – Introducción

Introducción

Este curso trata de explicar de forma rápida y sencilla las principales aplicaiones y ventajas de usar TypeScript.

Lo necesario

Instalar

  1. NodeJS: https://nodejs.org/es/
    $ sudo apt-get install curl python-software-properties 
    $ curl -sL https://deb.nodesource.com/setup_11.x | sudo bash - 
    $ sudo apt-get install nodejs 
    $ node –v 
    $ npm -v

     

  2. Google Chrome: https://www.google.es/chrome/browser/desktop/
  3. TypeScript: http://www.typescriptlang.org/
  4. Angular CLI https://cli.angular.io/ https://github.com/angular/angular-cli
    $ npm install -g @angular/cli

     

  5. Editor de Código Visual Studio Code: https://code.visualstudio.com/

Plugins Studio Visual code

  1. Angular 2 TypeScript Emmet
  2. Angular 5 Snippets – TypeScript, Html, Angular Material…
  3. Angular Language Service
  4. Angular v5 Snippets
  5. Angular2-inline
  6. Bootstrap 4 & Font Awesome snippets
  7. HTML CSS Support
  8. JavaScript (ES6) code snippets
  9. JS-CSS-HTML Formatter
  10. JSHint
  11. Material Icon Theme
  12. Prettier – Code Formatter
  13. Terminal
  14. TSLint
  15. TypeScript Hero
  16. TypeScript Importer