En este post te mostraré cómo crear un proyecto de Vue usando el lenguaje de programación TypeScript en lugar de JavaScript.
Como sabemos (en términos simples) TS es como JS mejorado; sobre todo por eso de los tipos (tipado fuerte) que previene errores como sumar números y cadenas, etcétera.
La CLI va a permitirnos generar proyectos de Vue, así como su estructura, de una manera rápida y fácil.
Si no cuentas con la CLI, instala NPM y después ejecuta:
npm install -g @vue/cli
Ahora abre la terminal y dirígete a la carpeta padre de tu futuro proyecto. Ejecuta:
vue create nombre_del_proyecto
En mi caso voy a comenzar un sistema de una fábrica textil así que:
vue create sistema-textil
Se comenzará a crear el proyecto (dentro de la carpeta que llevará el mismo nombre) y se preguntarán algunas cosas.
Se preguntará cuál preset usar, selecciona Manually select features. Ahí, marca con la tecla de espacio o spacebar lo que necesites. Obviamente debes seleccionar TypeScript. En mi caso también seleccioné el Router.
Cuando pregunte si deseamos usar Class-Style component syntax seleccionamos que no, pues es un poco más complejo de manejar.
Después, en las siguientes preguntas (y todo lo demás) queda así:
Con eso se va a generar el proyecto, instalar las dependencias, etcétera:
Ahora basta con hacer un cd nombre_del_proyecto
y luego ejecutar npm run serve
. Se mostrará el aviso de que la app está escuchando el puerto 8080 y si lo visitamos:
El proyecto se ve como en la imagen. Lo que hay que notar es que el router está en router.ts, los componentes en components, y que los componentes siguen siendo archivos con extensión vue.
Además, el archivo main.ts es el que monta la app; y también vemos algunos archivos de configuración como el tslint.json que indica cómo “lintear” (no recuerdo qué es lint, pero es algo como verificar que todo siga determinado estilo) el TypeScript.
Lo bueno de TypeScript es que podemos escribir JavaScript dentro del mismo; es decir, podríamos escribir totalmente JavaScript e ir adoptando TS poco a poco.
Creamos un archivo llamado PrimerComponente dentro de components, con el siguiente código:
Es un componente simple que aumentará un contador.
Se puede observar que la sintaxis no cambia mucho; solo que ahora usamos <script lang="ts">
. Ahora vamos a router.ts e importamos al componente:
Lo registramos dentro de routes:
Al final el código (del enrutador) queda así:
Si visitamos esa ruta, se verá el componente:
Como lo dije, una ventaja son los tipos. Podemos ejemplificarlo intentando sumar una cadena a un entero en el método aumentarContador
; según el editor que uses el error se puede mostrar de distinta manera (aunque siempre terminará en la terminal) y en mi caso se ve así:
Una pequeña ayuda, lo sé; pero en tipos más complejos es una ventaja todavía mayor.
Espero que no se haya olvidado algo. Así de simple es programar con Vue pero usando TypeScript. Las otras librerías, estilos, etcétera como Buefy pueden usarse sin mayor complicación.
Si quieres puedes leer mis otros artículos sobre Vue JS.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.