arrow_back Volver
Inicio keyboard_arrow_right Artículos keyboard_arrow_right Artículo

Qué es TypeScript

Uriel Hernández

CTO de Código Facilito

av_timer 5 Min. de lectura

remove_red_eye 93119 visitas

calendar_today 03 Junio 2018

Cover del artículo de "Qué es Typescript"

JavaScript es uno de los lenguajes más populares, en parte porque ha evolucionado y mejorado a pasos agigantados en los últimos años.

Sin embargo, Javascript en algún punto fue un lenguaje que presentaba muchos problemas para bases de código grandes, aplicaciones de gran escala y proyectos con muchos años de desarrollo.

En 2012 en Javascript no habían clases, ni módulos, el ecosistema carecía de herramientas que optimizaran el flujo de desarrollo, derivado precisamente por las carencias del lenguaje mismo.

2012 fue el año en que Typescript apareció (luego de 2 años de desarrollo), una solución de Microsoft para el desarrollo de aplicaciones con Javascript a gran escala, para ellos y para sus clientes. Steve Lucco y un equipo de más de 50 personas que incluía a Anders Hejlsberg, Lead Architect de C# y creador de Delphi y Turbo Pascal desarrollaron Typescript en Microsoft, un proyecto que originalmente se conoció como Strada.

Originalmente, productos como Bing y Office 365 despertaron en Microsoft la necesidad de una mejora a JavaScript que permitiera construir productos escalables.

Typescript es la solución a muchos de los problemas de JavaScript, está pensado para el desarrollo de aplicaciones robustas, implementando características en el lenguaje que nos permitan desarrollar herramientas más avanzadas para el desarrollo de aplicaciones.

Superset de JavaScript

Typescript es un superset de JavaScript. Decimos que una tecnología es un superset de un lenguaje de programación, cuando puede ejecutar programas de la tecnología, Typescript en este caso, y del lenguaje del que es el superset, JavaScript en este mismo ejemplo. En resumen, esto significa que los programas de JavaScript son programas válidos de TypeScript, a pesar de que TypeScript sea otro lenguaje de programación.

Esta decisión fue tomada en Microsoft bajo la promesa de que las futuras versiones de Ecmascript traerían adiciones y mejoras interesantes a Javascript, esto significa que Typescript se mantiene a la vanguardia con las mejoras de JavaScript.

Además, esto permite que uno pueda integrar Typescript en proyectos existentes de JavaScript sin tener que reimplementar todo el código del proyecto en Typescript, de hecho, es común que existan proyectos que introduzcan tanto Typescript como JavaScript.

Por si fuera poco, uno de los beneficios adicionales de esta característica del lenguaje, es que pone a disposición el enorme ecosistema de librerías y frameworks que existen para JavaScript. Con Typescript podemos desarrollas aplicaciones con React, Vue, Angular, etc.

Tipado estático

La principal característica de Typescript es el tipado estático. Decimos que un lenguaje es de tipado estático cuando cumple con estas características principales:

  • Las variables tienen un tipo de dato.
  • Los valores sólo se pueden asignar a variables del tipo correspondiente.
let edad : number; //Asignamos el tipo number para la variable edad
edad = 20; // La variable ahora sólo puede asignar valores del tipo number

A partir de estas dos características principales, se derivan algunas otras, como por ejemplo:

  • Interfaces
  • Genéricos
  • Casting de datos (conversión de tipos)
  • Argumentos con tipo
  • Tipo de retorno para las funciones
  • Mucho más

El contraste de estos lenguajes son los de tipado dinámico, como JavaScript, estos lenguajes suelen ser mucho más flexibles, lo que nos permite escribir código menos verboso.

Por otro lado, los lenguajes de tipado estático se prestan a la implementación de herramientas de desarrollo más avanzadas, como:

  • Autocompletado de código
  • Recomendación de qué argumentos recibe una función
  • Recomendación de qué tipo retorna una función
  • Auto documentación del código
  • Mejor análisis para detectar errores

Screenshot de VisualStudio Code con Typescript

Por qué Typescript

La industria de la programación es increíblemente diversa, incluso si te especializas en algún área de la programación, todos los días hay algo nuevo que aprender, una nueva tecnología, un nuevo enfoque para solucionar los problemas, etc.

De vez en cuando llega una tecnología que deslumbra tus ojos, de la que inmediatamente te enamoras e incluso te preguntas, ¿cómo es que podías trabajar sin esta tecnología? Typescript es esa clase de tecnología.

Cuando escribes un lenguaje con la intención de que éste se preste para el desarrollo de herramientas para los desarrolladores ¿qué obtienes? Un lenguaje de programación con una experiencia de desarrollo superior a otros.

Desarrollar en Typescript es increíble, prueba de ello es la cantidad de equipos de desarrollo que han integrado la herramienta, como sustituto del uso de JavaScript, entre ellos tenemos:

  • Google
  • Microsoft
  • Basecamp
  • Lyft
  • Miles de empresas más

Visual Studio Code

Screenshot de un error de compilado en Visual Studio Code usando Typescript

Visual Studio Code, un editor de texto de Microsoft, integra decenas de herramientas muy interesantes para Typescript, tales como las previamente mencionadas en este artículo, además de ellas vienen a mi mente algunos otros ejemplos como

  • Instrucciones de impor automáticos
  • Transpilado automático a JavaScript
  • Codelens con conteo de referencias a una clase, función o variable
  • Soporte para JSDoc
  • Y más

Puedes conocer más acerca de estos beneficios en la siguiente dirección en donde se explica la integración de Visual Studio con Typescript: https://code.visualstudio.com/docs/languages/typescript

Frameworks JavaScript

El equipo que desarrolla alguno de los open sources más populares, usan Typescript para el desarrollo de dichas librerías. Un par de ejemplos muy populares son Angular y Stimulus.

Esto se traduce en que la mayor parte de la documentación y ejemplos de estos frameworks, principalmente Angular, se escribe con Typescript. Eventualmente esto significa que las aplicaciones que se desarrollan usando estas librerías se hacen con Typescript.

Angular es quizás el ejemplo más destacado, prácticamente todas las aplicaciones en Angular se escriben usando Typescript, si quieres entender el framework a fondo, necesitas saber Typescript.

Estas decisiones no se toman a la ligera, los equipos que desarrollan estos frameworks aprovechan las características de Typescript para la implementación de estos frameworks y el desarrollo de aplicaciones web.

Aprender y dominar este lenguaje es tu puerta a otras tecnologías.

//Ejemplo de código de Angular


import { Component,Inject } from '@angular/core';
import { NotificationService } from './services/notifications/notifications.abstract.service'

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

 notificationService : NotificationService;

 notificationsActive : boolean;

 constructor(@Inject('NotificationService') notificationService : any){
  this.notificationService = notificationService;
  this.checkPermission();
 }
}

Typescript es un superset de JavaScript

Recuerda que Typescript es un superset de JavaScript, eso significa que en todos los casos en los que puedes utilizar JavaScript, también puedes usar Typescript.

Desde el desarrollo de servidores con NodeJS:


import express = require('express');

export default class Server{
  public app : express.Application;


  constructor(private port : number){
    this.app = express();
  }

  start(callback ?: Function){
    this.app.listen(this.port,callback)
  }

  static init(port : number) : Server{
    return new Server(port);
  }
}


El desarrollo de aplicaciones móviles con Angular y Ionic

import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';

class MyComponentOrService {

  constructor(private platform: Platform, private geolocation: Geolocation) {

    platform.ready().then(() => {

      // get current position
      geolocation.getCurrentPosition().then(pos => {
        console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
      });

      const watch = geolocation.watchPosition().subscribe(pos => {
        console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
      });

      // to stop watching
      watch.unsubscribe();

    });

  }

}

El frontend de una aplicación web, el desarrollo de aplicaciones de escritorio usando Electron y mucho más.

Conclusión

Aprender Typescript te introduce a un lenguaje de programación increíble, con herramientas para desarrollo aún mejores. Particularmente Visual Studio Code ofrecerá un número interesante de mejoras a tu flujo de desarrollo.

Además, algo de lo increíble de usar Typescript es que puedes usarlo en diferentes entornos y para el desarrollo de Aplicaciones nativas, híbridas, web, de escritorio e incluso servidores web.

El curso

En CódigoFacilito produjimos un curso a detalle con las funciones más importantes del lenguaje, aquí aprenderás a usar programación orientada a objetos en Typescript, el manejo de tipados con tipos básicos y avanzados, genéricos, decoradores y mucho más. Aprovecha ingresando al curso en este enlace

? https://codigofacilito.com/cursos/typescript ?

Aumenta tu productividad con GitHub Copilot

  • done Curso GRATUITO
  • done Regístrate antes del 31 de Marzo
  • done Obtén una ventaja competitiva
  • done Aprovecha la IA a tu favor
Más información