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");
});
