JavaScript Avanzado: Comprender TypeScript

Bien, bienvenido de nuevo y en esta lección, lo guiaremos para instalar TypeScript en tu proyecto y asegurándome de que todo lo demás es posible que desee utilizar se ejecuta correctamente. Y como sabrás, si has visto alguno de mis otros videos, Soy un usuario de Visual Studio, así que lo usaré para configurar esto. Y al hacerlo, solo crearé un nuevo proyecto. y será una aplicación web ASP.NET Core. Y le daré un nombre allí y voy a usar la plantilla MVC aquí, no configurado para HTTPS. Estoy usando Core 3.1. Esto debería funcionar en cualquier otra versión. que estás usando de Core. Y lo primero que quiero hacer para poder usar TypeScript ¿Voy a agregar ese paquete? así que usaré NuGet para hacer eso y similar, esta es la versión de Microsoft de Node Package Manager. Y voy a necesitar este paquete que construye mi TypeScript en JavaScript. Así que solo agregaré eso aquí en el proyecto. Y cualquier dependencia, al igual que npm, todas las dependencias deben instalarse al mismo tiempo. Lo siguiente que necesito hacer voy a agregar un archivo de configuración de TypeScript. Entonces puedo hacer eso en Visual Studio simplemente haciendo Agregar nuevo elemento. Y quiero buscar aquí TypeScript, búscalo para que no tenga que ir por todos lados. Aquí vamos. Tsconfig.json. Así que puedes dejarlo así. Ahora, obtendrá un conjunto de opciones predeterminado cuando pones eso ahí y tengo un conjunto bastante típico de otras opciones que me gusta hacer y este es el lugar donde se puede configurar el camino el compilador TypeScript funciona. Observe, por ejemplo, aquí, Estoy apuntando a ECMAScript 6. Tengo una biblioteca que entenderá ES2017 y poder manipular el DOM. Y lo más importante, como mínimo, Quiero decir cuál es mi directorio de salida va a ser para mis archivos TypeScript que se convierten en JavaScript. Entonces, en este caso, están bajo wwwroot / js. Así que asegurémonos de tener eso. Aquí vamos. Ya tengo esa carpeta allí. Eso está bien, muy bien hasta ahora. Yo tambien necesito un lugar que voy a almacenar mis scripts de TypeScript. Entonces voy a agregar una nueva carpeta aquí llamada Scripts. No bajo wwwroot. Esto existe fuera de eso. Y agreguemos un archivo TypeScript aquí y ver si podemos hacer que algo funcione. Entonces, un archivo de TypeScript simplemente termina en ts. Ahí vamos, y lo llamaré main.ts. Entonces, ¿qué va a pasar aquí? vamos a hacer nuestro TypeScript y luego cada vez que construyo este proyecto en Visual Studio, cada vez que compilo, esto se convertirá en un JavaScript antiguo y normal. Para que puedas ver un poco de buenas a primeras las cosas eso un poco diferente. Tenemos la mecanografía aquí, por ejemplo. Podemos decirle que es una cuerda y usado antes definido. Tengo estas pequeñas líneas onduladas verdes aquí. Así que este es el pozo de Visual Studio, más bien, TypeScript está aquí que muestra estas cosas como errores y advertencias. Entonces, en este caso, por ejemplo, Tengo el nombre ahí y se infiere de un literal de cadena, así que en realidad no lo necesitaba. Así que me marcará por ese tipo de cosas. Y luego esta, la persona que llama se usó antes de que se definiera pero creo que estaremos bien allí. Y puedes considerarlos como pistas. Si esto te molesta, hay un archivo que puede abrir, eslintrc, y normalmente lo encontrará en su directorio de usuarios, justo al lado de la raíz del directorio de usuarios. Puedes ver ahí hay algunas de las opciones que puede cambiar. Entonces, si lo pones a cero, eso lo hará falso. Afirmaciones de tipo tan consistente. Estos son solo algunos de los que normalmente cambio porque de nuevo, son pistas en su mayor parte y si sabes de que tipo de JavaScript que está creando allí, entonces está bien, mucho mejor. Entonces debería poder para seguir construyendo el proyecto con esto porque creo que es solo una advertencia. Así que hagamos la construcción aquí. y ver si funciona. Tuve éxito y así debería haberlo hecho ahí vamos, ahí está mi archivo principal eso está en wwwroot y nuevamente, no hay evidencia necesariamente que esto vino de TypeScript. Es solo un buen JavaScript regular. Así que si voy, entremos aquí y creare una pagina y probemos y asegurémonos que eso realmente funciona. Ahora, algunas de estas funciones, lo agregaremos más tarde. Por ahora, todo lo que tengo es principal y voy a llamar a mi función tsHello. Entonces es solo JavaScript normal. Ahí tengo el enlace de mi guión. Llamo tsHello, que termina en mi archivo JavaScript principal. Y voy a ser capaz de mencionar eso y ver el valor cuando hago clic en ese botón y eso debería darnos al menos una buena idea para empezar con lo que está funcionando aquí. Y fíjate, todavía no estamos viendo nada, así que revisemos nuestra consola y podemos ver ahí, está bien, es porque tenemos algo de JQuery en la página y JQuery aún no es compatible. Así que construyamos eso y luego volveremos y haremos todo. Entonces, ¿qué tenemos que hacer a continuación? es agregar soporte para JQuery. Vamos a agregar eso a nuestro archivo package.json y aún no tenemos uno, así que en Visual Studio, lo haré de nuevo como agregar un nuevo elemento. Y eso está en la lista aquí como un archivo de configuración npm. Podemos dejarlo llamado package.json y voy a agregar a mis dependencias de desarrollo allí que dependo de JQuery y creo que la versión que estoy usando es la 3.5.1. Así que voy a agregar eso allí y eso me debe permitir para usar ahora JQuery y, de hecho, Creo que puedo agregar otro archivo TypeScript. Y de hecho usa JQuery en ese archivo también. Veamos, así que haremos eso y lo llamaremos biblioteca. Solo seguiremos adelante y agarraremos cualquiera que sea la versión de JQuery aquí. De acuerdo, voy a ejecutar una pequeña función allí. Dice de nuevo que no puedo encontrar el nombre pero debería poder para cuando volvamos a construir y para cuando ejecutemos esa página. Y tenemos esa bandera innecesaria para cualquiera. Entonces ts-example-2 en nuestra página, volvamos a tsHola, es solo un pequeño lapso que vamos a meter algo en y llamaremos a esa versión del programa desde aquí. Está bien, intentemos eso y ver si trabajamos. Y lo intentaremos de nuevo y no vemos nada. De acuerdo, todavía tenemos $ sin definir. Así que asegurémonos de que esté realmente en su lugar. Bien, estoy haciendo referencia a eso desde mis módulos de nodo en lugar de wwwroot. Así que ese es solo un problema particular en mi proyecto aquí. Así que lo incluiremos. Aquí vamos. Y lo intentaremos una vez más aquí. Ahora, si todavía tienes problemas con esto y el problema que podrías estar teniendo es que no se reconoce JQuery. Puede que tengas que hacer una pequeña cosa. En mi caso particular, agregué JQuery usando npm. Entonces, si ejecuta esta pequeña declaración, esto debe hacer que el soporte de JQuery todavía funciona en su aplicación, y lo haré un poco más grande para ti. Entonces, si ha agregado JQuery, si lo está usando como parte de la plantilla que ya estaba ahí, es posible que no necesite esto. Pero en este caso, estoy vinculado a él. en mi página usando npm. Entonces eso debería hacer que funcione. Traigamos ese hola, mundo de nuevo. Mira, a veces hola, el mundo no es tan fácil, ¿verdad? Lo traeremos de vuelta y ver si funciona. Ah, ahora tenemos nuestra hoja de estilo. Aquí vamos. Entonces recibí el hola y ahí vamos, mi versión de JQuery es 3.5.1. Entonces, en esta lección, aprendimos cómo instalar JQuery en nuestra aplicación web. Y cómo asegurarnos de que tengamos apoyo para bibliotecas de terceros. Estén atentos, en nuestra próxima lección, haremos nuestras primeras funciones sobre la vista de TypeScript, parte uno.