Typescript es un lenguaje de front-end que está ganando rápidamente adeptos en el mundo de los desarrolladores. Typescript soluciona muchas de las limitaciones de JavaScript y mantiene todas sus ventajas.

¿Qué es Typescript?


Typescript es un superconjunto tipificado de JavaScript y fue creado por Microsoft en 2012 para ayudar a los desarrolladores de Javascript con aplicaciones a gran escala.

Typescript se diseñó para ayudar como mecanismo de estructuración de grandes bases de código, ya que contribuye a evitar errores comunes que ralentizarían el trabajo.

Facilita que los equipos trabajen en el mismo proyecto, ya que el lenguaje permite la modificación y produce un código legible. Si hay varios desarrolladores trabajando en un mismo proyecto, Typescript puede evitar mucha pérdida de tiempo en la depuración.

Este lenguaje nos permite utilizar nuestros conocimientos de Javascript de forma más eficaz. De hecho, después de compilar el código, todo el material de Typescript desaparece y produce un código Javascript limpio y seguro para todas las plataformas. Además de ser interoperable, Typescript añade características únicas, como la tipificación estática, las interfaces, las clases y mucho más.

TypeScript vs. JavaScript

Javascript es un lenguaje de scripting dinámico que se utiliza para hacer páginas web interactivas, por lo que no está diseñado para aplicaciones complejas.

Typescript, por otro lado, es un lenguaje de scripting estático que es un superconjunto de Javascript, lo que significa que es una capa extra encima de su código JS.

Typescript no fue diseñado para sustituir a Javascript. De hecho, nunca anula el comportamiento existente. Toma los comportamientos existentes de Javascript para corregir sus limitaciones y aprovechar los problemas comunes del lenguaje.

Hay muchas diferencias entre Typescript y Javascript. Estas son sólo algunas:

  • TypesScript es un lenguaje de programación orientado a objetos mientras que
  • JavaScript es un lenguaje de scripting (con soporte para programación orientada a objetos).
  • TypeScript tiene tipado estático mientras que JavaScript no.
  • TypeScript utiliza tipos e interfaces para describir cómo se utilizan los datos.
  • TypeScript tiene interfaces que son una forma poderosa de definir contratos dentro de su código.
  • TypeScript soporta parámetros opcionales para las funciones, mientras que JavaScript no lo hace.

¿Por qué debería utilizar Typescript?

via GIPHY

El uso de Typescript tiene muchas ventajas importantes. Vamos a desglosarlas.

  • Detecta antes los errores en tu código JavaScript. Teniendo la capacidad de detectar bugs y errores antes del tiempo de ejecución, por lo que escribirás código fiable y mitigarás los escollos de JavaScript que sólo se encuentran en tiempo de ejecución.
  • Es compatible con las bibliotecas JS y la documentación de la API, incluyendo JQuery, BootStrapJS, React, y más. Puedes utilizar todas las herramientas familiares que ya conoces, por lo que la curva de aprendizaje no es tan mala.
  • Utiliza NPM, que le da acceso a millones de bibliotecas fiables. Esto también hace que sea mucho más fácil aprender Typescript, ya que no tienes que hacer herramientas personalizadas para acceder a las bibliotecas.
  • Es más fácil de mantener. El lenguaje es generalmente más fácil de leer y de acceder. La autodocumentación incorporada facilita la comprobación de tipos y objetos en tu código.
  • Facilita el uso de React, Angular y Vue. Se integra bien con estos frameworks, particularmente con React, que ha sido descrito como un ajuste perfecto con Typescript. El uso de Typescript no es obligatorio para estos frameworks, pero puede añadir productividad y facilidad.

Pasos para aprender TypeScript

Ahora que ya conoces los fundamentos, vamos a enseñarte todo lo que necesitas saber para empezar a utilizar Typescript hoy mismo.

Paso 1: Configuración de Typescript

  • Instala TypeScript
  • Puedes acceder a Typescript instalando el plugin de TS Visual Studio o utilizando NPM (Node Package Manager).
  • Después de instalar NPM, escribe el siguiente comando en la terminal para instalar TS.
npm install -g typescript

Para comprobar qué versión está utilizando, ejecuta la siguiente línea de comandos en un shell.

tsc -v

Compiladores de TypeScript


Para compilar el código TS, ejecutamos el comando tsc filename.ts Esto creará un archivo JS con el mismo nombre, para que finalmente podamos utilizarlo en el navegador.

Paso 2: Explorar los tipos de TypeScript


Tipos
Como su nombre indica, todo en Typescript trata de tipos. Como Typescript es la versión tipificada de JS, podemos especificar tipos a las variables cuando se declaran.

Esto hace que tu código sea más escalable y fiable, y puedes comprobar que tu código se ejecuta correctamente antes del tiempo de ejecución.

Si has trabajado con Javascript antes, sabes que tiene ocho tipos: string, number, null, undefined, object, symbol, bigint, y boolean.

Javascript está tipado dinámicamente, lo que significa que no conoce el tipo de su variable hasta el tiempo de ejecución y las variables pueden cambiar de tipo. Incluso si las cambiamos intencionadamente, a menudo surgen errores y fallos. Typescript ayuda con este problema añadiendo tipos estáticos al código.

Hay tres categorías de tipos en Typescript: any, Built-in,  y User-defined.

  • El tipo any,   es un superconjunto de todos los tipos de datos de Typescript, y es el más laxo de los que disponemos. Significa que una variable puede ser de cualquier tipo. Si usamos este tipo, se anulará la comprobación de tipos.
  • Built-in incluyen el número, la cadena, el booleano, el indefinido, el nulo y el vacío.
  • User-defined  incluyen enum, array, interfaz, clase y tupla.

Vamos a profundizar en cada uno de ellos y en cómo utilizar los tipos de Typescript.

Asignación de tipos


Para asignar un tipo en Typescript, necesitas dos puntos :, el nombre del tipo, un signo igual =,  y el valor de esa variable. Veamos un ejemplo.

let variableName: typeScriptType = value;

Número


Typescript admite números decimales, hexadecimales, octales y literales binarios. En Typescript, todos los números son valores de punto flotante.

let num: number = 0.444;
let hex: number = 0xbeef;
let bin: number = 0b0010;

Boolean

Los valores booleanos funcionan igual que en Javascript.

let yes: boolean = true;
let no: boolean = false;

Array


En Typescript, los arrays son una colección de un mismo objeto. Puedes declarar un array tipado de dos maneras, ya sea con el tipo de dato seguido de [ ], o el enfoque genérico de Array<elemType>.

También puedes asignar varios tipos a un array utilizando el operador | o crear un array multidimensional para guardar un array en otro array utilizando los símbolos de  [ ].

const arr3: (Date| string[])[] = [new Date(), new Date(), ["1", "a"]];

Tuple

Son muy parecidas a los arrays, pero podemos definir el tipo de datos que se almacenan en cada posición. Los tipos de  turple permiten hacer arrays organizados.

Se puede expresar un array cuando se conoce el tipo de un número fijo de elementos y se predefinen sus tipos en orden.
let numberTuple: [number, number, number];

Void

Void es un subtipo de undefined. Es un tipo de retorno que puede ser sustituido por diferentes tipos cuando sea necesario.Se utiliza cuando estamos devolviendo funciones. Esencialmente nos dice que una función devolverá  undefined.

Esto asegura que una función no devuelve un valor.

Enum


Los enums nos permiten definir un conjunto de constantes predefinidas con nombre. Se definen con la palabra clave enum. Se puede definir un enum numérico o de cadena.

enum MyStringEnum {
    ChoiceA = "A",
    ChoiceB = "B",
}

String

Typescript sigue la misma sintaxis de Javascript con comillas dobles o simples alrededor del texto. También se puede utilizar el carácter backtick para utilizar múltiples líneas o el ${expression}  para permitir operaciones evaluadas dentro de una cadena.

let w = "Value1";
let x = "this is a string with the value " + w;
let y = 'this is a string with the value ' + w;
let z = `this is a string ${w}`;
console.log(w,x,y,z)

Paso 3: Fundamentos de las variables


Como la mayoría de los lenguajes de programación, utilizamos variables para almacenar valores, como una cadena, un booleano, un número o una expresión. En TS, podemos definir una variable utilizando var, let, y const.. Hay algunos problemas que surgen cuando usamos  var.

Por ejemplo, una variable declarada con  var, dentro de una función es de ámbito funcional pero de ámbito global cuando se declara fuera de una función. Esto puede conducir a errores en el código JavaScript.

La palabra clave let resuelve este problema estableciendo la duración de la variable en el bloque en el que fue declarada. Del mismo modo, const resuelve el mismo problema quelet, pero sólo puede inicializarse una vez cuando se declara. Typescript se asegurará de que no se pueda establecer ningún valor.

Las variables en Typescript siguen reglas sintácticas similares a las de muchos otros lenguajes de programación.

  • Pueden estar compuestas por letras minúsculas y mayúsculas del alfabeto
  • No pueden comenzar con un dígito
  • Pueden incluir caracteres especiales, como $ o @.

Paso 4: Comentar en TypeScript


Los comentarios en TS utilizan la misma sintaxis que en Javascript Barra doble para los comentarios de una sola línea Barra estelar para abrir un bloque de comentarios Barra estelar para cerrar un bloque de comentarios

Typescript introduce una sintaxis especial. Si añades /*!, Typescript mantendrá el comentario mientras se transforma en Javascript.

Esto te permite mantener los derechos de autor en la parte superior de un archivo TS que debe generarse en JS.

let x = 1; // This is a single line comment 

/* This can be spread on  
multiple  
lines */ 
let y = 2;

Paso 5: Inferencia de tipos (Type Inference)


La inferencia de tipos es lo que el compilador utiliza para determinar los diferentes tipos. Es lo suficientemente inteligente como para averiguar los tipos a partir de sus valores. De esta manera, no tendrás que especificar los tipos en tu código.

Esta es una poderosa característica de Typescript que te permite manipular tipos y combinarlos.

Las características de inferencia de Typescript pueden inferir tipos en los siguientes escenarios:

  • Cuando se declaran e inicializan variables
  • Cuando se establecen valores por defecto como parámetros
  • Cuando se determinan los tipos de retorno de las funciones

Paso 6: Funciones


Typescript no realiza ningún cambio importante en el núcleo de funciones de Javascript. Sin embargo, Typescript mejora las funciones con firmas fuertes que podemos utilizar para definir parámetros y tipos de retorno.

Declaramos una función usando la palabra clave function. También puedes usar fat arrow para hacer una función sin la palabra clave.

Esto no cambia con Typescript. Podemos utilizar los tipos de Typescript para los argumentos de las funciones. Para ello utilizamos dos puntos. Mira un ejemplo:

function functionWithParameters(arg1: string, arg2: number){}

Las funciones de Typescript se dividen en dos categorías: expresiones de función o declaraciones de función.

Una declaración de función es cuando se define una función sin asignarla a una variable, mientras que una expresión de función se asigna a una variable.

En Typescript, puede especificar el tipo de una función con palabra clave this Para ello, se utiliza el this seguido de dos puntos, seguido del tipo de la firma de la función.

Paso 7: Mapped Type
Esta funcionalidad le permite crear un nuevo tipo a partir de uno existente. Por ejemplo, podrías hacer que una interfaz existente mantuviera todos los mismos miembros pero que pasará a ser de sólo lectura u opcional.

Antes del tipo mapeado, tendríamos que crear una interfaz extra para reflejar el estado final que queremos, lo que puede contaminar el código y dar lugar a problemas.

Y sin el tipo mapeado, cada interfaz requeriría una función separada, por lo que las cosas pueden salirse de control rápidamente. Gracias a la lógica personalizada de un tipo mapeado en Typescript, no tenemos que lidiar con esos problemas.

Hay diferentes funciones de mapeo en Typescript: partial, nullable, pick, omit, record, extract, exclude, y ReturnType.

Paso 8: Objetos y POO


Typescript soporta la programación orientada a objetos y añade nuevas características para mejorar la funcionalidad de la POO de Javascript, soportando el uso de clases mediante la palabra clave class. Piensa en esto como una plantilla de objetos. Veamos un ejemplo: 

class class_Name{    
    field;    
    method;    
}

Esto generará el siguiente código JavaScript:

// Generated by typescript 1.8.10
var Person = (function () {
   function Person() {
   }
   return Person;
}());

Typescript introdujo nuevas formas de utilizar objetos. Hay muchos tipos de objetos diferentes en Typescript: Object, object, y {object}.

Typescript puede crear un objeto usando llaves, y debes definir sus miembros en la inicialización. Es una forma más rápida de organizar tus datos, y no necesitas un nombre ya que no es un lenguaje estructural.

Paso 9: Comprobación de tipo y aserciones


Veamos cómo podemos comprobar que nuestra variable tiene el tipo correcto. Aquí están los dos enfoques más comunes.

Instanceof


Este operador puede comprobar los tipos personalizados no definidos por Javascript. A continuación, escribimos primero un tipo personalizado, creamos una instancia del mismo, y comprobamos que efectivamente es la variable correcta.

class Dog{
 name: string;
 constructor(data: string) {
  this.name = data;
 }
}
let dog = new dog('Rover')
if(dog instanceof Dog){
 console.log(`${dog.name} is a dog`)
}

Typeof


Este operador puede comprobar los tipos de datos básicos. A continuación, creamos una variable de cadena, utilizamos el comando typeof para comprobarla con otra variable y luego imprimimos el resultado.

let myObject = { name: "test" };
let myOtherObject: typeof myObject; // Borrow type of the "myObject"
myOtherObject = { name: "test2" };
type TypeFromTypeOf = typeof myOtherObject; // Borrow

A veces, necesitamos convertir nuestras variables a un tipo de dato, comúnmente cuando se utiliza un tipo general y se necesita hacerlo más concreto. Hay varias formas de hacerlo. Vamos a discutir dos enfoques populares.

As.

Utiliza  As después del nombre de la variable y termine con el tipo de datos deseado.

let str: any = 'This is a String'
let strLength = (str as string).length

< >

También podemos lanzar nuestras variables utilizando el símbolo  < >. Esto tiene el mismo efecto en nuestro código pero implementa una sintaxis más simple.

let str: any = 'This is a String'
let strLength = (<string>str).length

Ahora tienes una idea básica de cómo usar TypeScript, y puedes ver cómo hará que tu código Javascript sea menos propenso a los errores.

Plataforma de cursos gratis sobre programación