TypeScript para principiantes, Parte 1 Cómo empezar

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

TypeScript es un superconjunto de JavaScript que se compila a un JavaScript simple. Como una analogía, si JavaScript fuera CSS entonces TypeScript sería SCSS. 

Todo el código JavaScript válido que escriba también es un código TypeScript válido. Sin embargo, con TypeScript, puede utilizar la escritura estática y las funciones más recientes que se compilan en JavaScript simple, que es compatible con todos los navegadores. TypeScript está orientado a resolver el problema de hacer que JavaScript sea escalable, y hace un buen trabajo. 

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

¿Por qué aprender TypeScript??

Si nunca ha usado TypeScript antes, puede que se esté preguntando por qué debería molestarse en aprenderlo cuando compila JavaScript al final.. 

Permítame asegurarle que no tendrá que pasar mucho tiempo aprendiendo TypeScript. Tanto TypeScript como JavaScript tienen una sintaxis muy similar, y simplemente puede cambiar el nombre de su .js archivos a .ts y empezar a escribir código TypeScript. Aquí hay algunas características que deberían convencerlo para comenzar a aprender TypeScript:

1. A diferencia de JavaScript, que se escribe dinámicamente, TypeScript le permite utilizar la escritura estática. Esta característica en sí misma hace que el código sea más fácil de mantener y reduce en gran medida las posibilidades de errores que podrían haber sido causados ​​debido a suposiciones incorrectas sobre el tipo de ciertas variables. Como un bono adicional, TypeScript puede determinar el tipo de una variable en función de su uso sin que usted especifique explícitamente un tipo. Sin embargo, siempre debe especificar los tipos para una variable explícitamente para mayor claridad.
2. Para ser honesto, JavaScript no fue diseñado para servir como un lenguaje de desarrollo a gran escala. TypeScript agrega todas estas características faltantes a JavaScript que lo hacen verdaderamente escalable. Con la escritura estática, el IDE que está utilizando ahora podrá comprender mejor el código que está escribiendo. Esto le da al IDE la capacidad de proporcionar características como la finalización del código y la refactorización segura. Todo esto resulta en una mejor experiencia de desarrollo..
3. TypeScript también le permite usar todas las últimas funciones de JavaScript en su código sin preocuparse por la compatibilidad con el navegador. Una vez que haya escrito el código, puede compilarlo con el simple JavaScript antiguo compatible con todos los navegadores con facilidad.
4. Muchos frameworks populares como Angular e Ionic ahora están usando TypeScript. Esto significa que si alguna vez decide utilizar alguno de los marcos en el futuro, aprender a utilizar TypeScript ahora es una buena idea..

Instalación

Antes de comenzar a escribir algún código impresionante de TypeScript, primero debe instalar TypeScript. Esto se puede hacer con la ayuda de npm. Si no tiene npm instalado, primero deberá instalar npm antes de instalar TypeScript. Para instalar TypeScript, debe iniciar el terminal y ejecutar el siguiente comando:

npm install -g mecanografiado

Una vez que se complete la instalación, puede verificar la versión de TypeScript que se instaló ejecutando el comando tsc -v en tu terminal Si todo se instaló correctamente, verá el número de versión de TypeScript instalado en el terminal.

IDE y editores de texto con soporte para TypeScript

TypeScript fue creado por Microsoft. Por lo tanto, el hecho de que Visual Studio sea el primer IDE que admita TypeScript no debería ser una sorpresa. Una vez que TypeScript comenzó a ganar popularidad, más y más editores e IDE agregaron soporte para este idioma, ya sea de forma inmediata o mediante complementos. Otro editor ligero y de código abierto llamado Visual Studio Code, creado por Microsoft, tiene soporte incorporado para TypeScript. Del mismo modo, WebStorm también tiene compatibilidad inmediata con TypeScript.

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

Puede ver una lista completa de todos los editores de texto e IDE que admiten TypeScript en GitHub. Para los ejemplos de esta serie, usaré Visual Studio Code para escribir todo el código..

Compilando TypeScript a JavaScript

Digamos que ha escrito algún código de TypeScript en un .ts expediente. Los navegadores no podrán ejecutar este código por sí mismos. Tendrá que compilar el TypeScript en un JavaScript plano que pueda ser comprendido por los navegadores. 

Si está utilizando un IDE, el código se puede compilar en JavaScript en el propio IDE. Por ejemplo, Visual Studio le permite compilar directamente el código de TypeScript a JavaScript. Tendrás que crear un tsconfig.json Archivo donde especifica todas las opciones de configuración para compilar su archivo de TypeScript a JavaScript. 

El enfoque más amigable para los principiantes cuando no está trabajando en un proyecto grande es usar el propio terminal. Primero, debe moverse a la ubicación del archivo de TypeScript en el terminal y luego ejecutar el siguiente comando.

tsc primero.ts

Esto creará un nuevo archivo llamado primero.js en el mismo lugar Tenga en cuenta que si ya tiene un archivo llamado primero.js, sería sobrescrito.

Si desea compilar todos los archivos dentro del directorio actual, puede hacerlo con la ayuda de comodines. Recuerda que esto no funcionará recursivamente..

tsc * .ts 

Finalmente, solo puede compilar algunos archivos específicos proporcionando explícitamente sus nombres en una sola línea. En tales casos, los archivos JavaScript se crearán con los nombres de archivo correspondientes..

tsc first.ts product.ts bot.ts

Echemos un vistazo al siguiente programa, que multiplica dos números en TypeScript.

deja a: número = 12; sea ​​b: número = 17; función showProduct (primero: número, segundo: número): void console.log ("El producto es:" + primero * segundo);  showProduct (a, b);

El código de TypeScript anterior compila el siguiente código de JavaScript cuando la versión de destino se establece en ES6. Observe cómo toda la información de tipo que proporcionó en TypeScript ahora desaparece después de la compilación. En otras palabras, el código se compila en JavaScript que puede ser comprendido por el navegador, pero se puede hacer el desarrollo en un entorno mucho mejor que puede ayudarlo a detectar muchos errores..

deja a = 12; sea ​​b = 17; función showProduct (first, second) console.log ("El producto es:" + first * second);  showProduct (a, b);

En el código anterior, hemos especificado el tipo de variables. una y segundo como numeros Esto significa que si más tarde intentas establecer el valor de segundo a una cadena como "apple", TypeScript le mostrará un error que dice que "apple" no es asignable al tipo número. Su código aún se compilará en JavaScript, pero este mensaje de error le informará que cometió un error y lo ayudará a evitar un problema durante el tiempo de ejecución. 

Aquí hay una captura de pantalla que muestra el mensaje de error en el código de Visual Studio:

El ejemplo anterior muestra cómo TypeScript sigue brindándole sugerencias sobre posibles errores en el código. Este fue un ejemplo muy básico, pero cuando creas programas muy grandes, mensajes como estos ayudan mucho a escribir código robusto con menos posibilidades de error..

Pensamientos finales

Este tutorial de inicio de la serie estaba destinado a brindarle una breve descripción general de las diferentes funciones de TypeScript y ayudarlo a instalar el idioma junto con algunas sugerencias para IDE y editores de texto que puede usar para el desarrollo. La siguiente sección cubrió diferentes formas de compilar su código TypeScript a JavaScript y le mostró cómo TypeScript puede ayudarlo a evitar algunos errores comunes..

Espero que te haya gustado este tutorial. Si tiene alguna pregunta, por favor hágamelo saber en los comentarios. El próximo tutorial de la serie tratará los diferentes tipos de variables disponibles en TypeScript.