Repasando TypeScript

Repasando de forma rápida la sintaxis básica de TypeScript.
//---------- tipo de datos

var myString: string ="hello world";
myString = 22 +"";
document.write(myString);

var myNumber: number = 66;
document.write(myNumber.toString());

var myBoolean: boolean = true;
document.write(myBoolean.toString());

var myVar: any = "hello";
myVar = false;
document.write(myVar);


//---------- Arreglo
var anyArray: any[] = [1,2,"cadena1","cadena2",[], {},""];
var StringArray: string[] = ["item1","item2",""];
var booleanArray: boolean[]= [true,false,true];

//--------tuplas
var strNumTuple: [string, number];
strNumTuple =["hola",77];


//--------void - undefined - null
let myVoid: void = undefined;
let myNull: null = null;
let myUndefined: undefined = undefined;

document.write(typeof(myVoid));


//--------funciones
function getSum(num1: number, num2: number): number{
    return num1+num2;
}

let mysum = function(num1: number | string, num2: number | string):number{
    if(typeof(num1) === 'string'){
        num1 = parseInt(num1);
    }
    if(typeof(num2) === 'string'){
        num2 = parseInt(num2);
    }
    return num1 + num2;
}

function getName(firstName: string,
    lastName?:string): string{       //el atributo con ? es un parametro opcional
    if(lastName == undefined){
        return firstName;
    }
    //return firstName + " " + lastName;      ES5
    return `${firstName} ${lastName}`;    //  ES6
}
document.write(getName("Luis"));



//-------Interfaces
interface ITodo{
    title: string;
    text: string;
}
function showTodo(todo: ITodo){
//function showTodo(todo: {title: string; text: string}){
    console.log(`${todo.title} - ${todo.text}`);
}

showTodo({
    title: "Eat Dinner",
    text: "lorem"
})

//----- CLASES

class User {
    private name: string; // no es accesile fuera de la clase
    public email: string; //accesible fuera de la clase
    protected age: number; //no es accesible
   
    //constructor, sera llamado apenas sea istanciado
    constructor(name:string, email:string, age: number){
        this.name = name;
        this.email = email;
        this.age = age;
    }

    //metodo
    register(){
        console.log(`${this.name} is registeder`);
    }
    showMeAge(){
        return this.age;
    }
    public AgeInYears(){
        return this.age + ' years';
    }
    payInvoice(){
        console.log(`${this.name} pago su factura`);
    }

}

var jhon = new User('qwerty', "alfred@asdfg", 28);

document.write(jhon.name); //this = jhon
console.log(jhon.register());

//------ Herencia
class Menber extends User {
    id: number;

    constructor(id: number, name: string, email: string, age: number){
        super(name, email, age);
        this.id= id;
    }
    //metodo heredado de la clase padre
    payInvoice(){
        super.payInvoice();
    }
}
var gordon  = new Menber(1, 'jose', 'jose@MediaQueryList', 11);

gordon.payInvoice();

Usando Git Hub

******************************************
**                                                                            **
**   PASOS PARA TRABAJAR CON GIT HUB **
**                                                                            **
******************************************

1 Ingresa a tu cuenta gut hub
2 crea un repositorio
3 indicar el origen de nuestro repositorio (escribir este codigo en git Bach)
git remote add origin https://github.com/ejemplo/ejemplo
4 ingresar todos los archivos a ese repositorio
git push -u origin master
5 pedira que te logues a git hub - ingresa tu usuario y pass
6 listo!!!

********* clonar proyecto desde git hub *******************
para clonar un proyecto desde git hub a tu computadora:
1 colocarte en el git bash y en la ruta para tu proyecto
git clone https://github.com/ejemplo/ejemplo

********* repositorio remoto *****************************
1 enviar lo que hay en nuestro repositorio local al repositorio de git hub
git push -u origin master
2 para ver los repositorios remotos a los q nuestro proyecto local esta enlasado
git remote -v

// fetch -> traemos historial del repositorio remoto al repositorio local
// push -> enviamos el historial local al repositorio remoto
3 verificar en el repositorio local, la creacion de una nueva rama
git branch -a  //este nos señala el comit en el que esta el repositorio remoto
4 verificar que el repositorio local y el repositorio remoto se encuentren en el mismo comit
git log --all --oneline --decorate
5 para sincronizar el historial local con el remoto
git push origin master

Usando Git

******************************************
**                                                                            **
** PASOS PARA TRABAJAR CON GIT         **
**                                                                            **
******************************************

primero debemos estar dentro del directorio donde esta nuestro proyecto
usando nuestro Git Bash, ingresamos a la ruta de nuestro proyecto

1 iniciar git
git init
2 ver que archivos tenemos (working directory) - color rojo
git status
3 agregar los archivos a starging area - color verde
git add <namefile>
git add .  //esto agregara todos los archivos modificados
4 crear tu primer commit (o copia del proyecto) - lo subira al Repository
git commit
git commit -m "el mensaje del commit" //esto evitara abrir la ventana del Vim
5 configurar los permisos
git config --global user.email "tu email aqui"
git config --global user.name "tu nombre aqui"
6 al dar un commit se abrira el editor de codigo de Vim
para escribir en el escribe i
para salir escribe :wq
7 para verificar que se creo mi commit
git log
8 entorno de trabajo limpio y nada para comitear
     git status
On branch master
nothing to commit, working tree clean
9 proceso terminado

********* como eliminar los cambios *****************
1 si al editar un archivo no lo quieres guardar en el starging area, pero si eliminar los cambios en el working directory
git checkout --<namefile>

******** muestra los cambios ************************
1 para visualizar los cambios realizados en un archivo (lo anterior sera ROJO y lo nuevo sera VERDE)
git diff <namefile>

***************** archivos para ignorar *************
1 median un archivo llamado .gitignore podemos ignorar a los archivos o carpetas agregadas a ese archivo

****************** crear rama ***********************
1 mostrar las ramas - la de color verde es en la que estamos ahora
git branch
2 crear otra rama
git branch nombreRama
3 usar la rama creada
git checkout nombreRama

***************** historial de repositorio ****************************
1 mostrar el historial de los commit
git log
2 mostrar el historial de loc commit de forma abreviada
git log --oneline
3 dirigirnos a algun punto de un commit, mediante su hash
git checkout 0798719
4 para ver todos los commits en una linea
git log --all --online

************* sacar un archivo del area de preparacion (starging area) *****************
1 para sacar del area de preparacion
git reset HEAD <nameFile>

*************las ramas *************
la rama principal es la rama master
git branch
1 para ver los commints en una linea de todas las ramas, nombre de ramas junto al comit
y dibuje el grafico de historial decoradas con asteriscos y rayitas
git log --oneline --all --decorate --graph
2 para mezclar ramas, posicionarse en la rama principal
git merge dev //dev es el nombre de una rama creada
3 agregar el archivo
git add .
4 comitear
git commit -m "comentario"
5 opcional borrar comit rama
git branch -d dev

Repaso de PUG

doctype html
html
    head
        title usando pug-gulp
        meta(charset="utf-8")
        meta(viewport="")
        link( rel="stylesheet" href="css/main.css" )
     
    body
        header.header#encabezado
            ul
                li: a(href="#") Inicio
                li: a(href="#") Nosotros
                li: a(href="#") Servicios
                li: a(href="#") Contactenos

        //-CONTROL DE TEXTO
        main.main
        section.section2
            p hola soy un simple texto
            | de ejemplo
            spam span
            b negrita
            i italico
         
        //-CONDCIONALES
        -var edad=17;
        if(edad<0)
            p edad incorrecta
        else if(edad<18)
            p menor de edad
        else
            p mayor de edad
         
         
        //-ATRIBBUTOS
        section
            p(class="clase2" id="parrafo1") primera forma
            p.clase3#parrafo2 segunda forma
            p(
                class="clase3"
                id="parrafo3"
            ) tercera forma
        //-VARIABLES
        - let nombre='luis muñoz';
        - let numeros=[2,4,6,8,10];
        each val in numeros
            p=val
         
     
     
        -let menu = ['inicio','contacto','portafolio','ayuda'];
            each list in menu
                li: a(href="#")=list
     
        //-INTERPOLACION DE VARIABLE
        p #{nombre}
     
        //-INTERPOLACION DE ATRIBUTOS
        -let enlace="http://www.youtube.com";
        -let imagen="img/banner1.jpeg";
     
        a(href=enlace) youtube
        img(src="dev/" + imagen)
         
     
        //-ATRIBUTOS DE ESTILOS (string u objeto js)
        p(style="color:red; background:black ") soy un estilo
     
        p(style={
            color: 'red',
            background: 'blue',
            'font-size': '50px',
            padding: '5px'
        }) segunda forma como objeto de js
 
        //-ATRIBUTOS DE CLASE (String o Array)
        p(class="texto rojo") texto string
        p(class=['rojo', 'centrado']) texto array
        -var clases = ['rojo', 'centrado', 'subrayado'];
        p(class=clases)
        br
        // Clase e Id Literal 
        a.azul(class=clases) link
     
        a#top(class=clases) id literal
     
        //-&attributes({})
        p&attributes({
            'data-link':'false',
            'data-text':'true',
            'style':'color:red; background: green'
        }) texto con atributos especiales
        p.clase10#id12&attributes({
            'data-link':'false',
            'data-text':'true'
        })
        //-COMENTARIOS
     
        // esto es un comentario para html en linea
        //
            comentario en bloque para
            el archivo html XD
        //- esto es un comentario para el archivo .pug
         
        //-CASE (Case var when & default)
        -var edad = 18;
        case edad
            when 0
                p tienes 0 años
            when 1
                p tienes un año
            when 2
                p tienes 2 años
            default
                p tienes mas de 3 años

        //- APILAR CASOS
        -var estatura=1;
        case estatura
            when 1
            when 2
            when 3
            when 4
            when 5
            when 6: p tienes estatura gigante
            default: p tienes estatura muy gigante
     
     
        //- DATOS BOOLEAN
        -var verdadero = true;
        -var falso = false;
     
        //-CONDICIONALES (if - unless)
        if(verdadero=== true)
            p verdad
 
        -var edad = 19;
        if(edad<=16)
            p no tienes permiso
        else if(edad > 16 && edad <=20)
            p tienes permiso
        else
            p no estas autorizado
     
        //- ITERACION EACH
     
        -var lista =['item1', 'item2', 'item3','item4'];
        ul
            each valores in lista
                li: a(href="#")=valores
             
 
     
        //- WHILE con Operadores de Incremento y Decremento
        -var  veces=5;
        while (veces < 11)
           p hola
           -veces++
         
        //- UNLESS (inversa if) - si es false ejecuta 
        - let paginas='siempre';
        unless !(paginas === "siempre")
            p verdaderasa

        //- WHILE condicion var--
        //- var cantidad = 3;
        //while (cantidad--)
            p#{cantidad}
         
            //- MIXINS - funciones que permiten crear código reusable
            //- MIXINS con Argumentos
            //- MIXINS con Bloques
            //- MIXINS y Atributos
            //- Resto de Argumentos
     
        mixin listado_tareas
            ul
                li Estudiar
                li programar
                li hacer ejercicios
        //llamar mixin
        +listado_tareas
        +listado_tareas
     
        mixin imprimir(texto)
            p.clase=texto
         
        +imprimir('hola mundo')
        +imprimir('probando texto para el mixin con parametros')
        //mixin en bloque
        mixin section(titulo)
            section
                .wrap 
                    h1.titulo1=titulo
                    if block
                        block
                    else
                        p no hay contenido en bloque q mostrar
        +section('titulo de la seccion')
     
        //-llamando mixin en bloque
        +section('titulo de seccion2')
            p este es un texto en bloque q sera usado despues de ser llamado el mixin seccion qwerty
        //-mixin con atributos
        mixin atributo(titulo)
            section&attributes(attributes)
                h1.titulo2= titulo
     
        +atributo('titulo mixin con atributos')(class="centrado container")


        //- mixin con varios argumentos
        mixin lista(id, ...items)
            ul(id=id)
                each item in items
                    li= item
                 
        +lista('listado', 'programar','ejercicio','ejecutar')
     
     
        //- INCLUDE TEXTO PLANO
        p: include ./dev/texto.txt
     
        //- HERENCIA
        //- heredar desde otro archivo .pug
     
        extends ./dev/plantilla

        // en el archivo de plantilla deberá tener bloques predefinidos para poder llamarlos y editarlos
        //lo llamamos asi:::
            block head   //reemplazara todo el contenido que había en el bloque predefinido head
                title usando block

            append head    //agregara al final del contenido del bloque predefinido head
                title agregando append

            prepend head  //agregara al inicio del contenido del bloque predefinido head
               title agregando prepend

Gulp - Sass - Pug - BrowserSync

Integrando Gulp - Sass - Pug - BrowserSync

En esta ocasion vamos a integrar Gulp, Sass, Pug y BrowserSync. Para trabajar con un solo archivo los pre-procesadores de html y css en conjunto.
Esto nos ayudara a realizar nuestros proyectos de una forma ordenada y comoda.

Estos tecnologias estan basadas en nodeJS, y por consiguiente en JavaScript, es por eso que la configuracion (codificacion de gulp) se asemeja a javascript.

Pre-Requisitos

1 debes tener instalado nodeJS (verificar: node --version y npm --version)
2 instalar gulp globalmente:
npm install -g gulp
3 crear una directorio para tu proyecto
4 crear un archivo package.json en el directorio
npm init -y
5 instalar gulp localmente
npm install --save-dev gulp


6 configurar el archivo: gulpfile.js:

const gulp = require('gulp');
const sass = require('gulp-sass');
const pug = require('gulp-pug');
const browserSync = require ('browser-sync');

gulp.task('default', ['sass'], function(){
  browserSync.init({
    server:'./app/'
  });
  gulp.watch('./scss/*.scss',['sass']);
  gulp.watch('./pug/*.pug',['pug']);
  gulp.watch('./app/*.html').on('change',browserSync.reload);
});

gulp.task('sass', function(){
  gulp.src('./scss/*.scss')
  .pipe(sass())
  .pipe(gulp.dest('./app/css/'))
  .pipe(browserSync.stream());
});

gulp.task('pug', function(){
  gulp.src('./pug/*.pug')
  .pipe(pug({
    pretty: true
  }))
  .pipe(gulp.dest('./app/'));
});

Gulp - Sass - BrowserSync

Instalando sass en gulp 

en esta oportunidad vamos a utilizar un plugin de gulp llamado gulp-sass, el cual nos ayudara a compilar el archivo .scss y convertirlo a un archivo .css y para ver los cambios en tiempo real usaremos Browser Sync.

Requisitos previos

1 tener instalado node.js
2 tener instalado gulp global y localmente (package.json - pugfile.js)
3 Instalar pug (plugin de sass para gulp)
npm install gulp-sass --save-dev
4 configurar el archivo pugfile.js, agregando el sass

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require ('browser-sync');

gulp.task('default',['sass'], function(){
  browserSync.init({
    server:'./app'
  });
  gulp.watch('./*.scss',['sass']);
});

gulp.task('sass', function(){
  gulp.src('./*.scss')
  .pipe(sass())
  .pipe(gulp.dest('./app/css/'))
  .pipe(browserSync.stream());
});

gulp.task('sasscss',['sass'], function(){
  gulp.watch('./*.scss',['sass']);
});

Gulp - Pug - BrowserSync

Instalando pug en gulp 
En esta oportunidad estaremos trabajando con un pluggin de gulp, llamado gulp-pug el cual nos permitira compilar un archivo pug a un archivo html.
tambien usaremos browserSync para ver los cambios en tiempo real.



Requisitos previos:
1 tener instalado node.js
2 tener instalado gulp global y localmente (package.json - pugfile.js)
3 Instalar pug (plugin de pug para gulp)
npm install gulp-pug --save-dev
4 configurar el archivo pugfile.js, agregando el pug

const gulp = require('gulp');
const pug = require('gulp-pug');
const browserSync = require('browser-sync');

gulp.task('html',function(){
  gulp.src('./*.pug')
  .pipe(pug({
    pretty: true
  }))
  .pipe(gulp.dest('./app/'))
});

gulp.task('pughtml', function(){
  gulp.watch('./*.pug', ['html']);
})

gulp.task('default', ()=>{
  browserSync.init({
    server: './app'
  });
gulp.watch('./*.pug', ['html']);
gulp.watch('./app/*.html').on('change', browserSync.reload);
});