TypeScript

TypeScript el superset de Javascript

TypeScript es un lenguaje tipado, open-source y desarrollado y mantenido por Microsoft. Denominado como un superset de Javascript, ya que está basado en Javascript (la mayor parte es Javascript), necesita ser compilado y dispone de las últimas actualizaciones de Javascript. Está soportado por cualquier navegador, cualquier host y cualquier sistema operativo. Los archivos TypeScript se identifican por la extensión .ts.

Para la instalación de TypeScript es necesario tener instalado node.js y npm. Para instalar node.js es posible instalarlo desde los repositorios o descargar el paquete desde //nodejs.org/es/.

INSTALAR NPM Y NODEJS

  1. apt install npm
  2. apt install node.js

INSTALAR TYPESCRIPT

  1. npm install -g typescript

MOSTRAR VERSION DE TYPESCRIPT

  1. tsc --version

CREAR PROYECTO TYPESCRIPT

Para crear un proyecto Typescript es necesario generar un directorio con el nombre del proyecto y desde dentro del directorio se hace la llamada al comando tsc seguido de la opción init

  1. mkdir [nombre proyecto]
  2. cd [nombre proyecto]
  3. tsc --init

Con esta opción se origina el archivo de configuración del proyecto "tsconfig.json". 

  1. {
  2. "compilerOptions": {
  3. /* Basic Options */
  4. "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
  5. "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
  6. "strict": true, /* Enable all strict type-checking options. */
  7. }
  8. }

COMPILAR ARCHIVO TYPESCRIPT

  1. tsc [ruta/archivo.ts]

También es posible compilar múltiples archivos incluyendo la ruta de los archivos en el archivo de configuración tsconfig.json.

  1. {
  2. "compilerOptions": {
  3. /* Basic Options */
  4. "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
  5. "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
  6. "strict": true, /* Enable all strict type-checking options. */
  7. "outDir":"./dist",
  8. },
  9. "include":[
  10. "./src/**/*.ts"
  11. ]
  12. }

Para compilar  varios archivos, tal como se puede observar en el código de arriba se añade un "include" al final del archivo y los archivos que se requieren incluir. En el ejemplo se ha añadido (mediante asteriscos) todos los archivos typescript que se encuentren en algún subdirectorio del directorio src (creado para tal fin). Además se ha añadido la ruta de salida con la propiedad outDir que es donde typescript crea un archivo con extensión js con el resultado de la compilación.

VARIABLES EN TYPESCRIPT

TypeScript,  a diferencia de Javascript  es un lenguaje tipado. Al declarar una variable se debe o se recomienda indicar el tipo de dato de esa variable.

  1. let usuario:string = "Manolo";
  2. let edad:number= 33;

Para almacenar cadenas multilínea, (una función implementada en ES6 llamada plantilla de cadenas de texto) que no son otra cosa que cadenas con varias líneas de texto que permiten añadir expresiones incrustadas, mediante el uso de los backticks (comillas en forma de tilde invertida).

  1. let linea:string = "línea3";

  2. let cadena:string = `
  3. Cadena línea1
  4. Cadena línea2
  5. Cadena ${linea} //expresión incrustada
  6. `;

En TypeScript existe un tipo de dato llamado any que permite almacenar cualquier tipo de dato, aunque se considera una práctica poco recomendable

  1. let usuario:any = "Javier";
  2. let edad:any = 55;
  3. let moderador:any = false;

Además de let y var, al igual que Javascript, TypeScript también utiliza la constante const, la cual no es modificable

  1. const edad = 69;
  2. edad = 65; //error, no se puede modificar el valor de una constante

ARRAYS EN TYPESCRIPT

Definir un array en TypeScript es posible, como en otros lenguajes, añadiendo corchetes,  sin embargo, existe otra alternativa añadiendo la palabra reservada Array seguida del tipo de dato encerrada entre guiones

  1. let lista:number[] = [1,5,10,15,20];
  2. let lista2:string[] = [1,5,10,15,20];
  3. let lista3:Array<string>= ["pan", "naranja", "espinacas"];

ENUM

  1. enum DiaOcupado {SABADO, DOMINGO};
  2. enum DiaDisponible {LUNES, MARTES, MIERCOLES, JUEVES, VIERNES};
  3. let trabajo: DiaDisponible;
  4. trabajo = DiaDisponible.LUNES;
  5. console.log(trabajo); //0
  6. console.log(DiaDisponible[0]); //LUNES

OBJETOS

Los objetos en TypeScript, al igual que las variables, disponen del tipo de dato any que permite asignarle cualquier valor, como también es posible crear objetos constantes.

  1. let usuario:any =
  2. {
  3. nombre: "Oriol",
  4. edad: 35,
  5. sexo: "H"
  6. }

Por convención el nombre de las constantes deben ir en mayúsculas

  1. const USUARIO:any
  2. {
  3. nombre: "Oriol",
  4. edad: 35,
  5. sexo: "H"
  6. }

No es posible cambiar el valor del objeto constante creando un nuevo objeto

  1. const USUARIO:any;
  2. USUARIO:
  3. {
  4. nombre: "Oriol",
  5. edad: 35,
  6. sexo: "H"
  7. }
  8. USUARIO:
  9. {
  10. nombre: "Manuel",
  11. edad: 33
  12. sexo: "H"
  13. }
  14. //error

En cambio si es posible cambiar el valor modificando las propiedades al objeto.

  1. const USUARIO:any;
  2. USUARIO:
  3. {
  4. nombre: "Oriol",
  5. edad: 35,
  6. sexo: "H"
  7. }
  8. USUARIO.nombre= "Manuel";
  9. USUARIO.edad = 33;

FUNCIONES

Las funciones en TypeScript son iguales que las de Javascript, pero como en el caso de las variables se debe especificar el tipo de dato de los parámetros y si la función devuelve o no un resultado y en el caso de que la función devuelva resultado se debe indicar el tipo de dato que devuelve.

  1. function bienvenido(data:string):void
  2. {
  3. console.log("bienvenido: ", data);
  4. }

La función bienvenido va acompañada de la palabra reservada void que indica que no devuelve ningún resultado (procedimiento).

ACTUALIZAR TYPESCRIPT

  1. npm update -g typescript@latest


Comentarios: 0

Para poder comentar es necesario iniciar sesión



Este dominio utiliza cookies de terceros para crear estadísticas y publicidad personalizada. Si continúa navegando está aceptando su uso