Saludos! Es hora de dar nuestros primeros pasos con typescript, por ello me tome unos minutos en escribir un poco y compartir algo de lo que e aprendido. Iniciemos con lo que es importante antes de crear nuestro primero código con typescript, que necesitamos?

Instalar TypeScript es bastante simple podemos hacerlo desde NPM usando:

npm install -g typescript

Con esto ya tenemos instalado typescript en nuestro equipo y estamos listos para codear un poco!

Conozcamos un poco sobre variables y funciones:

definición de variables:

var nombre: typeScriptType = value;

Vemos algo muy conocido en JavaScript que es var hasta ahi vamos genial, pero que sucede con typeScriptType :( en si es algo simple que estamos acostumbrados ver en lenguajes como java, c#. Y es que TypeScript nos permite asignar un tipo a esa variable de forma explicita.

Podemos hacerlo asi:

var edad: number =23;

var nombre: string = 'alguien';

var load: boolean = true;

var pets: string[] = ['oso', 'roger', 'figalo'];

Funciones:

Cuando hablamos de funciones en TypeScript existen varias formas diferentes de definirlas:

funciones con nombre.
función anonima o metodo.
funciones Lambda.
funciones de clase.

Para iniciar veremos algo a lo que ya estamos acostumbrados y a medida avance iremos viendo otras formas de hacerlo.

Iniciemos con una función con nombre:

function mostraTexto( msg:string){ content.InnerHTML =msg; }

Tenemos algo simple, lo unico diferente es que recibe un parametro tipado y hemos cerrado nuestra función a que solo recibirá valores tipo string algo diferente no pasara en ella, y luego actualizara el contenido utilizando elementos del DOM en nuestro html.

función anonima:

var contar = function(x: number, y: number): number { return x+y; }

En esta la diferencia es que pueden asignarse tipos en los argumentos y en el resultado de la función.

funciones Lambda:

Esta funciones son muy conocidas en lenguajes como python o C# su característica esencial es que no es necesario escribir return para que la función devuelva algún valor, explicitamente una función Lambda siempre retornara un valor.

var contar = (x: number, y: number) => x+y;

funciones de clase:

Es notorio que al declarar una funcion de clase no es utilizaremos la palabra reservada function con esto vemos un claro ejemplo de cambio en la sintaxis.

class Calculo{ contar(x:number; y: number;) number{ return x+y;} }

Tenemos una clase llamada Calculo con una funcion contar el cual retorna una valor al que hemos definido un tipo.

Ya conocemos algunas cosas generales de typeScript, ahora como podemos compilar nuestro código? y verlo en nuestro navegador.

Primero un archivo typeScript se caracteriza por usar la extension .ts

Luego podemos compilar de la siguiente manera: Desde nuestro terminal y dentro del directorio donde se encuentre el archivo ejecutamos:

tsc nombredelArchivo.ts

El resultado sera un archivo .js el cual podemos utilizarlo de la forma como conocemos en html.