Advertisement
  1. Code
  2. TypeScript
Code

TypeScript para Principiantes, Parte 1: Comenzando

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called TypeScript for Beginners.
TypeScript for Beginners, Part 2: Basic Data Types

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Comencemos este tutorial con la pregunta: "¿Qué es TypeScript?"

TypeScript es un super conjunto tipado de JavaScript que compila a JavaScript plano. Como una analogía, si JavaScript fuera CSS entonces TypeScript sería SCSS.

Todo el código válido JavaScript que escribes también es válido en código TypeScript. Sin embargo, con TypeScript, usas un tipado estático y las últimas características que se compilan a JavaScript plano, el cuál es soportado por todos los navegadores. TypeScript está pensado para solucionar el problema de hacer JavaScript escalable, y hace un muy buen trabajo.

En este tutorial, comenzarás leyendo sobre diferentes características de TypeScript y por qué aprenderlo es una buena idea. El resto de las secciones en el artículo cubrirán la instalación y compilación de TypeScript junto con algunos editores populares de texto que te ofrecen soporte para la sintaxis TypeScript y otras importantes características.

¿Por Qué Aprender TypeScript?

Si nunca has usado TypeScript, podrías estarte preguntando por qué deberías molestarte sobre aprenderlo en absoluto cuando este compila a JavaScript al final.

Déjame asegurarte que no tendrás que pasar mucho tiempo aprendiendo TypeScript. Tanto TypeScript como JavaScript tienen sintaxis muy similar, y puedes solo renombrar tus archivos .js a .ts y comenzar a escribir código TypeScript. Aquí hay algunas características que deberían convencerte de comenzar a aprender TypeScript.

  1. A diferencia de JavaScript, que es dinámicamente tipado, TypeScript te permite usar tipado estático. Esta característica por si misma hace al código más mantenible y reduce en gran medida la propensión de errores que podrían haber sido causados debido a asunciones incorrectas sobre el tipo de ciertas variables. Como un bono adicional, TypeScript puede determinar el tipo de una variable basado en su uso sin que especifiques de manera explícita un tipo. Sin embargo, siempre deberías especificar los tipos para una variable de forma explícita para claridad.
  2. Para ser honesto, JavaScript no fue diseñado para servir como un lenguaje de desarrollo de gran escala. TypeScript agrega todas estas características faltantes a JavaScript que lo hacen realmente escalable. Con tipado estático, el IDE que estás usando ahora podrá entender el código que estás escribiendo de mejor manera. Esto le da al IDE la habilidad de proporcionar características como completado de código y refactorización segura. Todo esto resulta en una mejor experiencia de desarrollo.
  3. TypeScript también te permite usar las últimas características de JavaScript en tu código sin preocuparte sobre soporte de navegador. Una vez que has escrito el código, puedes compilarlo a JavaScript plano soportado por todos los navegadores con facilidad.
  4. Muchos marcos de trabajo populares como Angular e Ionic están usando ahora TypeScript. Esto significa que si alguna vez decides usar cualquiera de los marcos de trabajo en el futuro, aprender TypeScript ahora es una buena idea.

Instalación

Antes de que comiences a escribir código TypeScript asombroso, necesitas instalar TypeScript primero. Esto puede ser hecho con la ayuda de npm. Si no tienes npm instalado, tendrás que instalar npm primero antes de instalar TypeScript. Para instalar TypeScript, necesitas iniciar la terminal y ejecutar el siguiente comando:

Una vez que la instalación está completa, puedes revisar la versión TypeScript que fue instalada ejecutando el comando tsc -v en tu terminal. Si todo se instaló apropiadamente, verás el número de versión TypeScript instalada en la terminal.

IDEs y Editores de Texto Con Soporte TypeScript

TypeScript fue creado por Microsoft. Así que el hecho de que Visual Studio fue el primer IDE en soportar TypeScript no debería ser una sorpresa. Una vez que TypeScript comenzó a ganar popularidad, más y más editores e IDEs agregaron soporte para este lenguaje ya sea de manera integrada o por medio de complementos. Otro ligero editor de código abierto llamado Visual Studio Code, creado por Microsoft, tiene soporte integrado para TypeScript. De manera similar, WebStorm también tiene soporte integrado para TypeScript.

Microsoft también ha creado un Complemento Sublime TypeScript gratuito. NetBeans tiene un complemento TypeScript que proporciona variedad de características para facilidad de desarrollo. El resalte de sintaxis está disponible en Vim y Notepad++ con la ayuda de los complementos typescript-vim y notepadplus-typescript respectivamente.

Puedes ver una lista completa de todos los editores de texto e IDEs que soportan TypeScript en GitHub. Para los ejemplos en esta serie, estaré usando Visual Studio Code para escribir todo el código.

Compilando TypeScript a JavaScript

Digamos que has escrito algún código TypeScript en un archivo .ts. Los navegadores no podrán ejecutar este código por si mismos. Tendrás que compilar el TypeScript a JavaScript plano que pueda ser entendido por navegadores.

Si estás usando un IDE, el código puede ser compilado a JavaScript en el IDE mismo. Por ejemplo, Visual Studio te permite directamente compilar el código TypeScript a JavaScript. Tendrás que crear un archivo tsconfig.json en donde especifiques todas las opciones de configuración para compilar tu archivo TypeScript a JavaScript.

La aproximación más amigable para principiantes cuando no estás trabajando en un proyecto grande es usar la terminal misma. Primero, tienes que moverte a la ubicación del archivo TypeScript en la terminal y después ejecutar el siguiente comando.

Esto creará un nuevo archivo llamado first.js en la misma ubicación. Ten en mente que si ya tienes un archivo llamado first.js, será sobreescrito.

Si quieres compilar todos los archivos dentro del directorio actual, puedes hacerlo con la ayuda de comodines. Recuerda que esto no funcionará de manera recursiva.

Finalmente, solo puedes compilar archivos específicos proporcionando sus nombres de manera explícita en una sola línea. En tales casos, los archivos JavaScript serán creados con nombres de archivos correspondientes.

Echemos un vistazo a siguiente programa, el cuál multiplica dos números en TypeScript.

El código TypeScript de arriba compila el siguiente código JavaScript cuando la versión meta es establecida a ES6. Nota cómo todos el tipo de información que proporcionaste en TypeScript ya no está después de la compilación. En otras palabras, el código se compila a JavaScript que puede ser entendido por el navegador, pero puedes hacer el desarrollo en un ambiente mucho mejor que te puede ayudar a detectar muchos errores.

En el código de arriba, hemos especificado el tipo de variables a y b como números. Esto significa que si después intentas establecer el valor de b a una cadena como "apple", TypeScript te mostrará un error de que "apple" no es asignable al tipo number. Tu código aún se compilará a JavaScript, pero este mensaje de error te permitirá saber que cometiste un error y te ayudará a evitar un problema durante el tiempo de ejecución.

Aquí está una captura de pantalla que muestra el mensaje de error en Visual Studio Code:

type error in TypeScript

El ejemplo de arriba muestra cómo TypeScript sigue dándote pistas sobre posibles errores en el código. Este fue un ejemplo muy básico, pero cuando estás creando programas muy grandes, mensajes como este te ayudan bastante a escribir código robusto con menos probabilidad de error.

Ideas Finales

Este tutorial de inicio en la serie fue pensado para darte una breve vista general de las diferentes características de TypeScript y ayudarte a instalar el lenguaje junto con algunas sugerencias para IDEs y editores de texto que puedes usar para desarrollo. La siguiente sección cubrió diferentes maneras de compilar tu código TypeScript a JavaScript y te mostró cómo TypeScript puede ayudarte a evitar algunos errores comunes.

Espero que te haya gustado este tutorial. Si tienes alguna pregunta, por favor déjame saber en los comentarios. El siguiente tutorial de la serie discutirá diferentes tipos de variables disponibles en TypeScript.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.