[Tutorial] TypeScript | Javascript – Parte 5

En esta quinta entrega tocaremos el tema de funciones y genéricos. Como se usan en TypeScript y que nos brinda para trabajar con ellos. Nuevamente utilizaremos VS Code en algunos ejemplos.

Objetivo

En esta quinta entrega tocaremos el tema de funciones y genéricos. Como se usan en TypeScript y que nos brinda para trabajar con ellos. Nuevamente utilizaremos VS Code en algunos ejemplos.

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema.o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

Funciones

Tenemos 2 formas de declarar funciones. Una es de forma anónima la otra es por medio de un nombre. Esto es igual que en javascript no tenemos diferencias:

// por Nombre
function GetSum(x, y) {

    return x + y;

}

// funcion anonima
let sum = function(x, y) { return x+y; };

Ahora veamos el enfoque con los tipos de TypesCript como debería ser declarada la misma función para tener la validación de tipos.

// por Nombre
function GetSum(x: number, y:number): number {
    return x + y;
}

// funcion anonima
let sum = function(x: number, y: number): number { return x+y; };

En el ejemplo declaramos que parámetros recibiremos en la función. Van a ser de tipo numérico y que a su vez esta función nos devolverá también un tipo de dato numérico.

Inferencias de tipos

Un tema interesante es la inferencia de tipos. Lo que hace el compilador es detectar que tipo valor le estamos agregando por ejemplo:

let x = 1;
let x: number = 1;

Al asignar un valor numérico automáticamente sabe de qué tipo es  y no es necesario usar la forma larga como vemos en la segunda línea.

Vamos a ver un ejemplo de una matriz. En una matriz el compilador decidirá cuál es el mejor tipo:

let x = [”Fernando”, “Pepe”, null];

 

¿Y qué pasa con las clases? veamos el ejemplo:

class herramienta{}
class Martillo extends herramienta{}
class Destornillador extends herramienta{}
class Lijadora extends herramienta{}

let list = [ new Martillo(), new Destornillador(), new Lijadora() ]

El compilador tomará como tipo el primero de la lista del array. En estos casos debemos declararle de que tipo.

let list: Herramienta[] = [ new Martillo(), new Destornillador(), new Lijadora() ]

Tipos Genéricos

El objetivo de los tipos genéricos es generar clases altamente reutilizables. Podemos crear piezas de software que pueden accionar sobre un gran cantidad de tipos comunes. Esto permite que cualquier persona que lo utilice junto a sus tipos personales. Hoy la gran mayoría de los lenguajes de programación lo soportan y TypeScript no podía quedarse afuera.

Para empezar veamos un ejemplo que:

function GetValue(arg: number): number {
   return arg;
}

Supongamos que en lugar de usar number usamos any, sería un forma de hacerla genérica, pero en verdad no es conveniente, estaríamos perdiendo información útil del tipo y su funcionalidades. Ahora bien, cómo debemos declararlo de forma genérica:

function GetValue<T>(arg: T): T{
   return arg;
}

En el ejemplo vemos que agregamos la variable T que a diferencia de any sera mas precisa sin perder ninguna información del tipo. Ahora que tenemos nuestra declaración vemos como debemos invocar.

let result = GetValue<string>("hola mundo");

le dice que el parámetro que vamos a pasar es de ese tipo. También podemos llamara de la forma más simple y el compilador infiere el tipo automáticamente siendo tal vez un poco más legible.

let result = GetValue("hola mundo");

Ahora bien,r que problema vemos en el siguiente ejemplo:

function GetValue<T>(arg: T): T{
   return arg.length;
}

Si pasamos el tipo string no habrá ningún problema pero si pasamos del tipo numeric no posee la propiedad length y nos dara un error.

En cambio por ejemplo si trabajamos con matrices esta funcionalidad, length estará presente en todos los tipos.

function GetValue<T>(arg: T[]): T[]{
   return arg.length;
}

// Otra forma de declarar
function GetValue<T>(arg: Array<T>): Array<T>{
   return arg.length;
}

Ahora vemos como hacer un clase genérica:

class GenericClass<T>{
   add(arg1: T, arg2: T) =>; T
}

let myGenericClass = new GenericClass<numeric>();
myGenericClass.add = function(arg1, arg2) {
    return arg1 + arg2;
}

Por último, vamos hacer limitaciones en los tipos genéricos. Como vimos en el ejemplo al hacer una clase genérica puede ser que el tipo que pasamos no tenga un funcionalidad como en el caso que devolvía length.

Lo que podemos hacer es restringir una función para trabajar con todos los tipos tengan o no la propiedad length.

Para esto necesitamos crear una interface:

interface WithLength {
    length: number;
}

function GetValue<T extends WithLength>(arg: T): T {
    console.log(arg.length);
    return arg;
}

Como podemos ver en la imagen ya no tendremos el problema ya que no tira errores.

Conclusión

Hemos visto el uso funciones, la inferencia de tipos y una introducción a tipos genéricos. Si bien es simplemente una introducción es un buen punto de partida para comenzar a entrar más en profundidad. En el próximo post veremos namespaces, módulos y decoradores para cerrar este tutorial para principiantes.

[Tutorial] Javascript | TypeScript – Parte 4

En esta cuarta parte tocaremos interfases, classes y funciones.No solo veremos la teoria sino también algunos ejemplos en VS Code.

Objetivo

En esta cuarta parte tocaremos interfases, classes y funciones.No solo veremos la teoria sino también algunos ejemplos en VS Code.

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema.o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

Clases

Comenzaremos por las Clases. En JavaScript siempre utilizamos funciones y el patrón prototipo para hacer uso de clases y  herencia. Si están familiarizados con C# o Java tal vez nos resulte bastante incómodo en Javascript. Por esto, TypeScript, nos da la posibilidad de usarlas del modo como cualquier lenguaje orientado a objetos. También nos brindara compatibilidad futuras implementaciones de las especificaciones ECMAScript. Veamos:

class Persona {
nombre: string;

constructor(_nombre: string) {
this.nombre = _nombre;
}

greet() {
return "Hello, " + this.nombre;
}
}

let fernando = new Persona("Fernando");

Como comente antes, es bastante más familiar que como lo usamos en JavaScript.  Algunos puntos para tener en cuenta:

  • this hace referencia a la misma clase.
  • El constructor, a diferencia de los lenguajes que ya conocemos siempre debe llamarse constructor.
  • En las funciones no es necesario agregar la palabra function.

Como cualquier lenguaje de programación orientado a objetos tenemos herencia. Esto lo haremos por medio de la palabra reservada extends como vemos en el ejemplo:


class Estudiante extends Persona{

constructor(nombre: string) {
super(name);
}

greet() {
return super.greet();
}

}

En el ejemplo podemos ver la palabra super que hace referencia a la clase de la cual heredamos.

Modificadores

TypeScript nos da 3 tipos de modificadores de acceso, públicos, privados y protegidos.

Público

Por defecto serán declarados como públicos, esto hará que podamos acceder desde cualquier lugar del programa. Podemos marcarlo implícitamente si lo queremos pero no es necesario.

class Persona {
public name: string;

public constructor(theName: string) {
this.name = theName;
}
}

Private

Cuanto lo declaramos como private el método no podrá ser accesible desde fuera de la clase.


class Persona {
private name: string;

public constructor(theName: string) {
this.name = theName;
}
}

Protected

Funciona como private,  pero a diferencia de este pueden ser accedidas solamente por las clases derivadas.


class Persona {

protected name: string;
public constructor(theName: string) {
this.name = theName;
}
}

ReadOnly

Podemos declarar solo lectura, esto hará que no pueda asignarle ningún valor desde fuera de la clase y la asignación debe hacerse en el constructor.

class Persona {
readonly name: string;

public constructor(name: string) {
this.name = name;
}
}

let persona = new Persona("Fernando");
persona.name;

Accessors

En TypeScript tenemos la posibilidad de usar getters y setters.


class Persona {
private name: string;

get Name():string{
return this.name;
}

set Name(_name: string){
this.name = name;
}

}

Tener setters nos da la posibilidad de poder evaluar la asignación de un valor por medio de una comparación.

Propiedades Estáticas

Podremos crear un miembro estático que serán visibles sin la necesidad de instanciar la clase.

class Calculadora {

static result: number = 0;

}

Calculadora.result;

Clases abstractas

Estas clases no pueden instanciarse directamente. Deben ser heredadas obligatoriamente. A diferencia de una interface puede implementar funcionalidades en sus miembros.

abstract class Persona {

abstract getName(): void;

}

class Estudiante extends Persona {
getName(): void {}
}

Interfaces

Son una forma de declarar contratos dentro del código para las clases que tienen características comunes. Veamos la siguiente clase:


class Persona {

public name: string;

public constructor(theName: string) { this.name = theName;}

}

Supongamos que vamos a tener 2 clases : estudiantes y profesores. Todos deben cumplir la regla de tener una propiedad name. Para esto usaremos una interface que obligará a que sea implementada:

interface Persona {
name: string;
}
class Estudiante implements Persona{
public name: string;
}

class Profesor implements Persona{
public name: string;
}

Propiedades opcionales

Una buena caracteristicas es que podemos declarar variables opciones las cuales no obligan a las clases que implementar a declarar esos miembros. Se hace por medio del carácter ?.

interface Persona {
name?: string;
}

Propiedades solo lectura

podemos especificar que los miembros deben ser declarados como readonly.


interface Persona {
readonly name: string;
}

Conclusión

Hemos las clases, interfaces y funciones. Si bien el tema puede ser mucho más extenso, con este pantallazo general nos dan la base para poder seguir expandiendo nuestros conocimientos. El el próximo post veremos el tema de Tipos Genéricos.

[Tutorial] TypeScript | Javascript – Parte 3

Todo lenguaje de programación orientado a objetos tiene tipos de datos más o menos complejos como por ejemplo numeros, cadenas de caracteres, etc. En TypeScript tenemos soporte para datos tipado orientados a JavaScript.

Objetivo

En esta tercera parte tocaremos los tipos que TypeScript nos brinda para trabajar y  sus declaraciones. Veremos algunos ejemplos interesantes en VS Code.

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema.o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

Para empezar veremos la estructura básica de cómo debemos declarar una variable:

(alcance) (Nombre): <Tipo> = (Valor);

Ahora que conocemos la estructura básica de declaración comenzaremos con los disponibles.

Tipos

Boolean

Es el tipo más común que podemos encontrar en cualquier lenguaje de tipos. Solamente puede tener 2 valores posibles true o false.

let isCorrect: boolean = true;

Numeric

Este puede contener cualquier número inclusive con decimal. Como en Javascript, TypeScript puede guardar números decimales, flotantes.

let money: numeric = 3.34;
let age: numeric = 12;

String

En este tipo de datos guardaremos caracteres, cadenas de caracteres o texto. Podemos utilizar comillas dobles o comillas simples para encerrar el valor. También plantillas de cadenas agregando la notación $( nombre de variable) dentro de nuestros string.

let titlePage: string = "Hola Mundo";
let textInside: string = "This is ${ titlePage }";

Array

Para usar array tenemos 2 formas de hacerlo, una es muy similar a javascript la otra es muy similar a lo que se denomina Tipos Genéricos.

let colors: string[] = ["Rojo", "Azul", "Verde"];
let colors: Array<string> = ["Rojo", "Azul", "Verde"];

Tuple

Este tipo es que se denomina comúnmente llave valor. similar a un array, nos permitirá acceder al valor por medio de su llave.

let x: [string, number] = ["Pepe", 2];
console.log(x["Pepe"]);

Enum

Son un conjunto de valores que por default  será asignado dependiendo el orden en que se encuentren. También podemos darle valores asignarles nosotros los valores o decirle que empiece la secuencia desde un valor predeterminado declarándose al primero de la lista.

enum Animales{ Perro, Gato, Jirafa, Leon };
enum Animales{ Perro = 1, Gato, Jirafa, Leon };
enum Animales{ Perro = 2, Gato = 5 , Jirafa = 7, Leon = 8 };
let animalTipo = Animales.Jirafa;

Any

La usaremos cuando no sabemos realmente qué valor va a tomar en nuestra aplicación. También podemos usarlo en un array que puede tener valores del tipos distintos. Es como tener un variable de tipo dinámica.

let valorDesconocido: any = 20;
let valoresDesconocidos: any[] =  ["Rojo", 2, true];

Void

Básicamente es lo contrario de lo anterior. Sería no tener ningún tipo. Casi siempre lo usaremos en funciones o métodos que no devuelven un valor.

let sinTipo: void = undefined;

fuction NoDevuelveValor(): void{
    console.log("Hola");
}

Null y Undefined

No solo son valores también pueden declararse como tipos. Por defecto son subtipos de los anteriores esto quiere decir que podemos asignar este valor a un tipo como numerico o string.

let sinTipo: number = null;

Never

Representar valores que nunca ocurrirán. Podría usarse por ejemplo en una función que siempre va devolver un error ya que en realidad no devuelve nada. No podemos asignarle never a ningún tipo solamente puede asignarse a sí mismo.

function lanzarError(mensaje: string): never{
    throw new Error(mensaje)
}

Aserciones de tipo

De esta forma podemos decirle al compilador que confíe en nosotros para asignarle un tipo. Es similar a Cast de otros lenguajes. Podemos usarlo de 2 formas:

let algunValor: any = 123;
let stringLengh: number (<string> algunValor).length;
let stringLengh: number (algunValor as string).length;

Declaraciones de variables

Tenemos 2 let y const. Let es muy similar a usar var y const es como cualquier constante en los lenguajes de programación evitando que se cambie su valor una vez asignado.

Var

La declaramos igual JavaScript:

var nombre = "Jorge";

Las variables de tipo var pueden estar declaradas en cualquier bloque. Hay que tener en cuenta que al declararla como var puede ser accedida desde bloques superiores. No es conveniente usar var debido a que puede causarnos muchos problemas.

Let

Este viene a solucionar el problema que tenemos con var y su diferencia no está en la sintaxis sino en la semántica:

let nombre = "Jorge";

Al utilizar let estamos diciendo que la variable tiene el alcance del bloque en el cual fue declarado.esto quiere decir que no pueden ser alcanzadas desde fuera del bloque donde se encuentra.

Const

Este tipo de declaración tienen las mismas características de let pero al asignarle un valor no podrá ser cambiada en ningún momento posterior.

const nombre = "Jorge";

Al utilizar let estamos diciendo que la variable tiene el alcance del bloque en el cual fue declarado. Esto quiere decir que no pueden ser alcanzadas desde fuera del bloque donde se encuentra.

Conclusión

Hemos tenido nuestro segundo acercamiento a los tipos de TypeScript y cómo debemos declararlos. Si conocen C# o  Java notaran que las referencias son muy similares pero respetando las características de JavaScript. El el próximo post veremos el tema de interfaces y clases.

[Tutorial] TypeScript | Javascript – Parte 2

En esta segunda parte tocaremos algunos temas sobre la configuración de TypeScript, daremos nuestros primeros pasos y veremos algunos puntos interesantes sobre Visual Studio Code que será la herramienta que estaremos utilizando en los ejemplos.

Objetivo

En esta segunda parte tocaremos algunos temas sobre la configuración de TypeScript, daremos nuestros primeros pasos y veremos algunos puntos interesantes sobre Visual Studio Code que será la herramienta que estaremos utilizando en los ejemplos

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema.o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

Lo primero que haremos es crear un archivo. Para esto utilizaremos la consola de VS Code para generarlo por medio siguiente comando:

tsc --init

Este comando no creará un archivo que en su interior contendrá algo parecido a lo siguiente:

{
  "compilerOptions": {
     /* Basic Options */
     "target": "es5",
     "module": "commonjs",
     "strict": true,
     "sourceMap": true
   }
}

Si bien este archivo tiene muchas opciones de configuración las que por default están activas son las 3 que vemos en el cuadro anterior. A simple vista vemos la propiedad “target” que es la que indicará que version de ECMAScript usará para crear el JavaScript final.

Ahora crearemos nuestro primer archivo de TypeScript. Los archivos TypeScript poseen la extensión “.ts”. Lo haremos desde el icono de VS Code, creamos el archivo app.ts:

y dentro de este archivo pondremos nuestro código:

class InitApp{
     public static main(){
     console.log("Hola Mundo");

return 0;
     }
}

InitApp.main();

Nuestra aplicación no hace nada muy difícil. Solamente mostrará en consola el mensaje “Hola Mundo!”. Veamos qué pasa cuando compilamos el código. Para hacerlo ejecutaremos en la consola el siguiente comando indicando el nombre de nuestro archivo ts:

tsc app.ts

Como resultado tendremos un nuevo archivo app.js que es el resultado de la transpilación:

A simple vista vemos que el código tal vez es un poco más extenso. Pero eso no debe preocuparnos ya que este nuevo código correrá sin ningún problema en los navegadores que soporten el ECMAScript que le indicamos el archivo de configuración.

Vamos hacer que nuestro codigo falle, no hay que preocuparse por el momento por cosas que veamos y no entendamos lo veremos en los siguientes post. Para darles un ejemplo agregaremos 2 líneas de código:

class InitApp{
     public static main(){
         let msg:string;
         msg= 1;
        console.log(msg);
...

En la declaración estamos diciendo que la variable msg es del tipo string, pero, en la línea siguiente le estamos asignando un valor numerico. Automáticamente el VS Code nos indicará que la asignación no es válida gracias al Intellisense que viene con el.

También podemos ejecutar la compilación por medio de consola para comprobar si realmente es un error. Al ejecutar la compilación por medio del comando tsc podemos ver el mensaje de error:

Corregiremos nuestro código para que deje de errar y lo ejecutaremos:

class InitApp{
     public static main(){
         let msg:string;
         msg= "Hola Mundo!";
        console.log(msg);
...

Para ejecutarlo usaremos Node.Js junto al siguiente comando:

node app.js

Nuestra aplicación está funcionando correctamente. Ya tenemos nuestra primer app funcionando de la mano de TypeScript.

Tal vez sea molesto estar ejecutando todo el tiempo el comando tsc por consola cada vez que hacemos una modificación e inclusive obliga a tener una consola externa o tener abierta la consola VS Code la cual nos quita espacio de trabajo. Para esto tenemos 2 opciones:

Opción 1

El comando tsc tiene un opción muy interesante que es el comando -w. Este comando hace que el tsc quede en modo watcher. Cada vez que guardemos un archivo el tsc detectara el cambio y transpilara el código.

Opción 2

La segunda opción es configurar una tarea en VS Code, presionando f1 nos abrirá la ventana de “Command Palette” y escribiremos Run Build Tanks:

Nos preguntará sobre qué archivo y elegiremos ts.config. Una vez hecho lo anterior nos creará una carpeta nueva llamada .vscode y dentro un archivo tasks.json donde veremos algo parecido a lo siguiente.

{
    "version": "2.0.0",
    "tasks": [
        {
           "type": "typescript",
           "tsconfig": "tsconfig.json",
           "problemMatcher": [
          "$tsc"
          ],
           "group": {
                "kind": "build",
                "isDefault": true
           }
       }
    ]
}

Ahora podemos usar la combinación de teclas ctrl + shift + b para ejecutar la compilación.

Conclusión

hemos tenido nuestro primer contacto con TypeScript y hemos visto algunas características de las herramientas. En el próximo post comenzaremos con la introducción al lenguaje.