Installing & Using TypeScript

Instructor: Entonces, TypeScript puede ayudarte a detectar errores antes. Sin embargo, hay una gran desventaja de TypeScript, y es que este código, este código TypeScript almacenado en este . ts no se ejecuta en el navegador. Puedes escribir código TypeScript en tus proyectos, pero no puedes ejecutarlo así en el navegador. Ahora, es diferente si estás construyendo para el backend, para Node. js porque existen herramientas y tiempos de ejecución que permiten ejecutar código TypeScript sin ningún paso de compilación adicional. Pero cuando se trata de ejecutarlo en el navegador, no funciona allí. En cambio, lo que hay que hacer con el código TypeScript para que funcione en el navegador es compilarlo. Necesitas convertir este código de TypeScript a código JavaScript puro. Es necesario un paso de compilación. Y es por eso que TypeScript no se trata sólo de escribir código TypeScript, sino también de compilar ese código TypeScript. Por eso, la página de documentación oficial cuenta también con un área de descargas en la que encontrará instrucciones sobre cómo descargar el compilador de TypeScript, una herramienta que convertirá el código TypeScript en código JavaScript. Ahora, sólo tienes que seguir las instrucciones de esta página. Voy a seguir esta instrucción aquí, que instalará TypeScript globalmente en mi sistema. O para ser precisos, que instalará el compilador de TypeScript globalmente en mi sistema, de modo que pueda utilizarlo en cualquier lugar y en cualquier proyecto. Más adelante en el curso, también te mostraré cómo puedes añadir TypeScript a proyectos individuales y cómo puedes implementar este paso de compilación en un proceso más general de construcción de proyectos. De momento, centrémonos en este enfoque global. Ahora, este enfoque aquí utiliza npm para instalar TypeScript como una herramienta global en su sistema. Y npm es un gestor de paquetes que viene junto con Node. js. Por lo tanto, debe visitar nodejs. org, y desde allí, descarga la última versión LTS de Node. js ya que esto incluirá este gestor de paquetes, esta herramienta npm. Una vez instalado Node. js, y con él, npm, puede ejecutar este comando aquí en el símbolo del sistema o terminal para instalar TypeScript globalmente en su sistema. Así que aquí, estoy en Mac OS, así que abrí mi terminal, y voy a ejecutar npm install -g para instalarlo globalmente, typescript. En Windows, es exactamente el mismo comando, sólo tiene que utilizar su símbolo del sistema por defecto para ejecutarlo. Ahora, tendrás que asegurarte de que tienes Node. js instalado como se ha mencionado, y en los análisis de Mac OS, puede que tenga que añadir sudo delante de este comando para darle los permisos adecuados. Es posible que obtenga un error de permiso sin sudo, en Windows, esto no funcionará y tampoco será necesario. Ahora, es posible que se le pida su contraseña, pero a partir de entonces, esto va a seguir adelante e instalar TypeScript, o para ser precisos, el compilador de TypeScript en su sistema. Y con él instalado, puedes ir a tu proyecto donde estás usando TypeScript, abrir tu terminal de sistema allí también. Ya sea el integrado en el editor de código como lo estoy haciendo aquí usando el terminal que está integrado en Visual Studio Code, o usted utiliza su símbolo del sistema por defecto o terminal fuera del editor, y se navega en la carpeta del proyecto a través del comando CD. De cualquier manera, debes asegurarte de que tienes tu terminal abierta, y que navegas en esta carpeta del proyecto, para que allí, puedas comenzar el proceso de compilación de esta calculadora. ts ejecutando tsc, y luego el nombre del archivo, del archivo TypeScript que contiene el código a compilar. tsc es un comando que estará disponible desde que instalaste TypeScript globalmente. Esto invocará al compilador de TypeScript, y producirá una calculadora. js en este caso. Y si inspeccionas este archivo y lo comparas con el archivo TypeScript, verás que es más o menos el mismo código, sólo ha habido algunos cambios menores. Lo más importante, estas características de TypeScript como esta asignación de tipo explícita aquí, se han eliminado ya que era código JavaScript no estándar. No se trataba de código que pudiera ejecutarse en el navegador o en cualquier otro entorno JavaScript. Y es entonces este archivo JavaScript compilado que usted importaría en su archivo HTML. Por ejemplo, como este archivo ahora sí contiene código ejecutable. Por cierto, si tuvieras un error en tu código TypeScript. Si quitas este plus aquí, por ejemplo, no sólo obtienes una advertencia y un error aquí en tu IDE, lo cual es muy conveniente, ya que eso te ayuda a detectar el error a tiempo. En cambio, si guarda esto, también obtendrá un error si intenta compilar este archivo TypeScript. Entonces también aparece este mensaje de error. Sin embargo, como también se obtiene en el editor, normalmente se pueden encontrar y solucionar estos problemas sin ni siquiera iniciar el proceso de compilación, lo que resulta muy cómodo. Pero así es como se puede compilar, y luego también ejecutar ese código TypeScript en un entorno que no soporte TypeScript incorporado. Como se mencionó, más adelante, también te mostraré cómo puedes automatizar este paso de compilación para proyectos más complejos que consisten en múltiples archivos TypeScript, porque no quieres compilar individualmente estos archivos paso a paso, archivo por archivo manualmente allí. Pero llegaremos más tarde.