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
apt install npm
apt install node.js
INSTALAR TYPESCRIPT
npm install -g typescript
MOSTRAR VERSION DE TYPESCRIPT
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
mkdir [nombre proyecto]
- cd [nombre proyecto]
tsc --init
Con esta opción se origina el archivo de configuración del proyecto "tsconfig.json".
{
"compilerOptions": {
/* Basic Options */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"strict": true, /* Enable all strict type-checking options. */
}
}
COMPILAR ARCHIVO TYPESCRIPT
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.
{
"compilerOptions": {
/* Basic Options */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"strict": true, /* Enable all strict type-checking options. */
"outDir":"./dist",
},
"include":[
"./src/**/*.ts"
]
}
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.
let usuario:string = "Manolo";
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).
let linea:string = "línea3";
let cadena:string = `
Cadena línea1
Cadena línea2
Cadena ${linea} //expresión incrustada
`;
En TypeScript existe un tipo de dato llamado any que permite almacenar cualquier tipo de dato, aunque se considera una práctica poco recomendable
let usuario:any = "Javier";
let edad:any = 55;
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
const edad = 69;
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
let lista:number[] = [1,5,10,15,20];
let lista2:string[] = [1,5,10,15,20];
let lista3:Array<string>= ["pan", "naranja", "espinacas"];
ENUM
enum DiaOcupado {SABADO, DOMINGO};
enum DiaDisponible {LUNES, MARTES, MIERCOLES, JUEVES, VIERNES};
let trabajo: DiaDisponible;
trabajo = DiaDisponible.LUNES;
console.log(trabajo); //0
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.
let usuario:any =
{
nombre: "Oriol",
edad: 35,
sexo: "H"
}
Por convención el nombre de las constantes deben ir en mayúsculas
const USUARIO:any
{
nombre: "Oriol",
edad: 35,
sexo: "H"
}
No es posible cambiar el valor del objeto constante creando un nuevo objeto
const USUARIO:any;
USUARIO:
{
nombre: "Oriol",
edad: 35,
sexo: "H"
}
USUARIO:
{
nombre: "Manuel",
edad: 33
sexo: "H"
}
//error
En cambio si es posible cambiar el valor modificando las propiedades al objeto.
const USUARIO:any;
USUARIO:
{
nombre: "Oriol",
edad: 35,
sexo: "H"
}
USUARIO.nombre= "Manuel";
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.
function bienvenido(data:string):void
{
console.log("bienvenido: ", data);
}
La función bienvenido va acompañada de la palabra reservada void que indica que no devuelve ningún resultado (procedimiento).
ACTUALIZAR TYPESCRIPT
npm update -g typescript@latest
Para poder comentar es necesario iniciar sesión