Anda di halaman 1dari 28

Agenda

  • 1. ¿Qué es TypeScript?

  • 2. ¿Porqué TypeScript?

  • 3. Características

    • 1. Declaración y ámbito de variables

    • 2. Tipado

    • 3. Union e Interseccion de Tipos de variables

    • 4. Enums e Interfaces

    • 5. Clases

  • 4. TypeScript en 5 minutos

  • Agenda 1. ¿Qué es TypeScript? 2. ¿Porqué TypeScript? 3. Características 1. Declaración y ámbito de variables

    ¿Qué es Typescript?

    ¿Qué es Typescript?

    ¿Qué es Typescript?

    Superset para Javascript
    Superset para
    Javascript
    Meta Lenguaje Orientado a Objetos
    Meta Lenguaje
    Orientado a Objetos
    Buenas prácticas y futuros estándares hoy
    Buenas prácticas y
    futuros estándares hoy
    ¿Qué es Typescript? Superset para Javascript Meta Lenguaje Orientado a Objetos Buenas prácticas y futuros estándares

    ¿Porqué TypeScript?

    ¿Porqué TypeScript?

    ¿Porqué TypeScript?

    ¿Porqué TypeScript? Mejorar la productividad: El conjunto de herramientas extra que brinda TypeScript permite desarrollar código

    Mejorar la productividad: El conjunto de herramientas extra que brinda TypeScript permite desarrollar código que sea entendido por todos y permite una comprensión del código más simple.

    ¿Porqué TypeScript? Mejorar la productividad: El conjunto de herramientas extra que brinda TypeScript permite desarrollar código

    Calidad del software: Utilizar TypeScript ayuda a comprender mejor cómo funciona internamente JavaScript y facilita labores de testing.

    ¿Porqué TypeScript? Mejorar la productividad: El conjunto de herramientas extra que brinda TypeScript permite desarrollar código
    ¿Porqué TypeScript? Mejorar la productividad: El conjunto de herramientas extra que brinda TypeScript permite desarrollar código

    Menos errores de código: TypeScript proporciona detección temprana de errores (en tiempo de compilación), y tipado fuerte de clases, métodos, así como de objetos y APIs JavaScript ya existentes.

    ¿Porqué TypeScript? Mejorar la productividad: El conjunto de herramientas extra que brinda TypeScript permite desarrollar código

    Respaldo de Microsoft y la comunidad OpenSource, TypeScript fue lanzado en 2012 como un proyecto de Código abierto, actualmente es un proyecto altamente active con un gran acogida por parte de la comunidad.

    Características

    Características
    Declaración y ámbito de variables Existen 3 tipos de declaración de variables principales: var , lethttps://goo.gl/gkshff let: Sólo actua dentro su entorno local, si es declarada nuevamente dentro de una function interna se le considera como una variable independiente (block scoping) https://goo.gl/p17VK7 // Type of variables var x = 10 ; let y = 'Test' ; const z = {prop: 'Im a const’ }; " id="pdf-obj-7-2" src="pdf-obj-7-2.jpg">

    Declaración y ámbito de variables

    Existen 3 tipos de declaración de variables principales: var, let y const

    var: Este tipo de declaración de variable es idéntico al de JavaScript, tiene ámbito global

    let: Sólo actua dentro su entorno local, si es declarada nuevamente dentro de una function interna se le considera como una

    variable independiente (block scoping)

    // Type of variables

    var x = 10; let y = 'Test'; const z = {prop:'Im a const’};

    Declaración y ámbito de variables const: Es una declaración que permite solo asignar una sola vezhttps://goo.gl/FH3zQn Para denotar inmutabilidad se necesitaría crear las propiedades con el atributo readonly https://goo.gl/dBz1Rn const numLivesForCat = 9 ; const kitty = { name: "Aurora" , numLives: numLivesForCat, } // Error kitty = { name: "Danielle" , numLives: numLivesForCat }; // all "okay" kitty.name = "Rory" ; kitty.name = "Kitty" ; kitty.name = "Cat" ; kitty.numLives -- ; " id="pdf-obj-8-2" src="pdf-obj-8-2.jpg">

    Declaración y ámbito de variables

    const: Es una declaración que permite solo asignar una sola vez la variable. En el caso de la asignación de objetos con const, es possible modificar las propiedades de la variable mas no reasignar la variable a otro objeto.

    Para denotar inmutabilidad se necesitaría crear las propiedades con el atributo readonly

    const numLivesForCat = 9; const kitty = { name: "Aurora", numLives: numLivesForCat, }

    // Error kitty = { name: "Danielle", numLives: numLivesForCat };

    // all "okay" kitty.name = "Rory"; kitty.name = "Kitty"; kitty.name = "Cat"; kitty.numLives--;

    Tipado

    Typescript soporta diferentes tipos de variables, entre ellos estan: numbers, strings, structures, booleans, arrays entre otros, estos permitirán definir como se va a comportar la variable en adelante.

    El tipado es útil para poder ver en tiempo de

    compilación si hay alguna propiedad que se está llamando que no exista.

    Por ejemplo si se llama a la propiedad length y la variable tiene un dato de tipo number.

    Tipado Typescript soporta diferentes tipos de variables, entre ellos estan: numbers , strings , structures ,

    //Boolean let isDone: boolean = false; //Number let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744; //String let color: string = "blue"; color = 'red'; let fullName: string = `Bob Bobbington`; let age: number = 37; let sentence: string = `Hello, my name is ${fullName}. I'll be ${ age + 1} years old next month.`;

    let sentence: string = "Hello, my name is " + fullName + ".\n\n" + "I'll be " + (age + 1) + " years old next month."; //Array let list: number[] = [1, 2, 3]; let list: Array<number> = [1, 2, 3];

    Enums e Interfaces

    Enums e Interfaces Los enums son estructuras que nos permiten crear valores constantes que permitan estandarizar

    Los enums son estructuras que nos permiten crear valores constantes que permitan estandarizar ciertas funcionalidades o ciertas condicionales, promueve la escalabilidad y la mantenibilidad.

    Las interfaces son estructuras que nos ayudan a definir el contenido de una variable o para definir las funciones y metodos que debería implementarse en una clase.

    enum ESex { MALE = 'M', FEMALE = 'F' }

    interface IPerson { firstName: string; lastName: string; age: number; birthday: Date; sex: ESex;

    }

    Clases

    Los clases en typescript tienen una estructura similar a los lenguaje de programación tradicionales incluyendo características como herencia, encapsulamiento, polimorfismo e implementaciones de interfaces

    Clases Los clases en typescript tienen una estructura similar a los lenguaje de programación tradicionales incluyendo

    class Greeter {

    private _person: IPerson; constructor(person: IPerson) {

    this._person } greet() {

    = person;

    const greetMessage = `Hello

    ${this._person.sex

    === ESex.MALE ? 'Mr.' :

    'Ms.'} ${this._person.firstName}

    ${this._person.lastName} console.log(greetMessage); let date = new Date(); if (date.getDate() ===

    `;

    this._person.birthday.getDate()

    && date.getMonth() === this._person.birthday.getMonth())

    {

    console.log('Happy Birthday!');

    }

    }

    }

    Typescript vs JavaScript

    Typescript vs JavaScript

    TypeScript vs JavaScript

    class MyClass{ myArray:Array<number>; constructor(someArg:string){ this.myArray = someArg;

    } someMethod(){ for(let item of this.myArray){ console.log(item); }

    }

    } let someVar:number = 123456; let myClassInstance:MyClass = new MyClass(someVar); myClassInstance.someMethod();

    TypeScript vs JavaScript class MyClass { myArray : Array < number >; constructor ( someArg :

    class MyClass{ constructor(someArg){ this.myArray = someArg;

    } someMethod(){ for(let item of this.myArray){ console.log(item); }

    }

    } let someVar = 123456; let myClassInstance = new MyClass(someVar); myClassInstance.someMethod();

    TypeScript vs JavaScript

    class MyClass{ myArray:Array<number>; constructor(someArg:string){ this.myArray = someArg;

    } someMethod(){ for(let item of this.myArray){ console.log(item); }

    }

    } let someVar:number = 123456; let myClassInstance:MyClass = new MyClass(someVar); myClassInstance.someMethod();

    TypeScript vs JavaScript class MyClass { myArray: Array < number >; constructor ( someArg : string

    class MyClass{ constructor(someArg){ this.myArray = someArg;

    } someMethod(){ for(let item of this.myArray){ console.log(item); }

    }

    } let someVar = 123456; let myClassInstance = new MyClass(someVar); myClassInstance.someMethod();

    TypeScript vs JavaScript

    TypeScript vs JavaScript class MyClass { myArray: Array < number >; constructor ( someArg : string

    class MyClass{ myArray:Array<number>; constructor(someArg:string){ this.myArray = someArg;

    } someMethod(){ for(let item of this.myArray){ console.log(item); }

    }

    } let someVar:number = 123456; let myClassInstance:MyClass = new MyClass(someVar); myClassInstance.someMethod();

    Los errores que encontramos fueron:

    Estamos pasando la variable somevar de tipo

    number al constructor de la clase MyClass que está esperando una variable de tipo string Estamos asignando directamente una variable de

    tipo string a una variable que espera ser un array Estamos realizando una iteración del array pero este al haber recibido un elemento de tipo string no estaría acorde con la definicion de nuestro arreglo que era inicial de números.

    TypeScript vs JavaScript

    TypeScript vs JavaScript
    TypeScript vs JavaScript

    TypeScript vs JavaScript

    TypeScript vs JavaScript
    TypeScript vs JavaScript

    TypeScript en 5 minutos

    TypeScript en 5 minutos

    TypeScript en 5 minutos

    TypeScript en 5 minutos
    TypeScript en 5 minutos

    TypeScript en 5 minutos

    2) Descargar nodejs desde su pagina web : https://nodejs.org/es

    TypeScript en 5 minutos 2) Descargar nodejs desde su pagina web : <a href=https://nodejs.org/es " id="pdf-obj-20-7" src="pdf-obj-20-7.jpg">
    TypeScript en 5 minutos 2) Descargar nodejs desde su pagina web : <a href=https://nodejs.org/es " id="pdf-obj-20-9" src="pdf-obj-20-9.jpg">

    TypeScript en 5 minutos

    TypeScript en 5 minutos 2) Ingresar a la terminal y colocar el comando para instalar Typescript

    2) Ingresar a la terminal y colocar el comando para instalar Typescript npm install g typescript

    TypeScript en 5 minutos 2) Ingresar a la terminal y colocar el comando para instalar Typescript

    TypeScript en 5 minutos

    3) Ingresar al editor de código y crear la siguiente estructura

    TypeScript en 5 minutos 3) Ingresar al editor de código y crear la siguiente estructura
    TypeScript en 5 minutos 3) Ingresar al editor de código y crear la siguiente estructura

    TypeScript en 5 minutos

    3) Ingresar al editor de código y crear la siguiente estructura

    TypeScript en 5 minutos 3) Ingresar al editor de código y crear la siguiente estructura
    TypeScript en 5 minutos 3) Ingresar al editor de código y crear la siguiente estructura

    TypeScript en 5 minutos

    3) Ingresar al editor de código y crear la siguiente estructura

    TypeScript en 5 minutos 3) Ingresar al editor de código y crear la siguiente estructura
    TypeScript en 5 minutos 3) Ingresar al editor de código y crear la siguiente estructura

    TypeScript en 5 minutos

    TypeScript en 5 minutos 4) Correr el comando de ejecución de compilación de typescript en la

    4) Correr el comando de ejecución de compilación de typescript en la terminal : tsc

    TypeScript en 5 minutos 4) Correr el comando de ejecución de compilación de typescript en la

    TypeScript en 5 minutos

    4) Revisar el archivo generado en la carpeta dist

    TypeScript en 5 minutos 4) Revisar el archivo generado en la carpeta dist
    TypeScript en 5 minutos 4) Revisar el archivo generado en la carpeta dist

    TypeScript en 5 minutos

    TypeScript en 5 minutos 5) Entrar con un navegador al archivo index.html y deberiamos ver nuestra

    5) Entrar con un navegador al archivo index.html y deberiamos ver nuestra primera web con TypeScript