Typescript - Inicio y configuracion

Para crear un proyecto de typescript dentro de VSC se crea la carpeta y a continuación se crea un archivo por ejemplo "app.ts".

A continuación se detallan los comandos básicos:

tsc app.ts: compila el archivo d ts y lo convierte en un archivo de javascript .js

tsc app -w: sirve para que VSC este a la escucha del archivo en cuestion y con simplemente guardarlo, VSC compile y genere el js automaticamente.

tsc -init: sirve para que VSC entienda que la carpeta es un proyecto de ts y este a la escucha de todos los cambios.

tsc: con este comando dentro la carpeta se compilaran todos los archivos de ts que se encuentren dentro de la misma.

A cntinuación se detallan los tipos de variables de typescript:

Cadenas multilinea con ``, con lo que este encerrado en es signo se leera como una sola linea:

let nombre:string = "Juan";

let apellido:string = "Perez";

let edad:number = 32;

let texto = `Hola, ${nombre} ${apellido} (${edad})`;

console.log(texto);

Esto se mostrara de la siguiente manera en javascript:

var texto = "Hola, \n" + nombre + " " + apellido + " \n(" + edad + ")";

Adicional en ts se pueden hacer operaciones dentro de las plecas:

TS

function getNombre() {

return "Jhosef";

}

let texto2:string = `La respuesta es: ${2+2}`;

let nombre = `El nombre es: ${getNombre()}`;

console.log(texto2);

console.log(nombre);

JS

function getNombre() {

return "Jhosef";

}

var texto2 = "La respuesta es: " + (2 + 2);

var nombre = "El nombre es: " + getNombre();

console.log(texto2);

console.log(nombre);

A continuación se detalla la declaración de parámetros requeridos, por defecto y opcionales en ts, es importante mencionar que para la llamada de la función es imperativo que se declaren en orden los mismos.

TS

function activar( quien:string, objeto:string = "batiseñal", momento?:string ) {

let mensaje:string;

if(momento) {

mensaje = `${quien}, activo la ${objeto} a las ${momento}`;

} else {

mensaje = `${quien}, activo la ${objeto}`;

}

console.log(mensaje);

}

activar("Gordon", "batiseñal");

JS

function activar(quien, objeto, momento) {

if (objeto === void 0) { objeto = "batiseñal"; }

var mensaje;

if (momento) {

mensaje = quien + ", activo la " + objeto + " a las " + momento;

}

else {

mensaje = quien + ", activo la " + objeto;

}

console.log(mensaje);

}

activar("Gordon", "batiseñal");

FUNCIONES DE FLECHA:

TS

let miFuncion = function(a:any) {

return a;

}

//funcion de flecha

let miFuncionF = (a:any) => a;

//funcion con 2 parametros

let miFuncion2 = function(a:number, b:number) {

return a + b;

}

//funcion con parametros

let miFuncion2F = (a:number, b:number) => a + b;

//funcion de flecha que devuelve un valor

let miFuncion3 = function(nombre:string) {

nombre = nombre.toUpperCase();

return nombre;

}

let miFuncion3F = (nombre:string)=> {

nombre = nombre.toUpperCase();

return nombre;

}

JS

var miFuncion = function (a) {

return a;

};

//funcion de flecha

var miFuncionF = function (a) { return a; };

//funcion con 2 parametros

var miFuncion2 = function (a, b) {

return a + b;

};

//funcion con parametros

var miFuncion2F = function (a, b) { return a + b; };

//funcion de flecha que devuelve un valor

var miFuncion3 = function (nombre) {

nombre = nombre.toUpperCase();

return nombre;

};

var miFuncion3F = function (nombre) {

nombre = nombre.toUpperCase();

return nombre;

};

var hulk = {

nombre: "Bruce",

smash: function () {

var _this = this;

setTimeout(function () { return console.log(_this.nombre + " smash!!!"); }, 1500);

}

};

hulk.smash();

A continuacion se muestra una destructuracion de objetos:

let avenger = {

nombre: "Steve",

clave: "Capitan America",

poder: "Droga"

}

let {nombre, clave, poder} = avenger;

console.log(nombre);

SINTAXIS DE LAS PROMESAS

//promesas: son asincronicas y se ejecutan el caso de que algo salga biien o mal

var prom1 = new Promise(function(resolve, reject) {

setTimeout(function() {

console.log("La funcion finalizo correctamente");

resolve();

}, 1500);

});

prom1.then(function() {

console.log("la funcion termino bien");

}, function() {

console.error("esto termino mal");

});