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.

Instalación de la Vue CLI

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

Crear proyecto

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.

Configuración del proyecto

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:

Generando proyecto de Vue con TypeScript - Instalación de dependencias

Generando proyecto de Vue con TypeScript – Instalación de dependencias

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:

Vista del proyecto Vue JS + TypeScript

Vista del proyecto Vue JS + TypeScript

Estructura del proyecto

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.

Estructura del proyecto Vue con TypeScript

Estructura del proyecto Vue con TypeScript

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.

Relacionado:  Laravel: POS con clientes y usuarios

Creando nuestro primer componente con 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:

Primer componente de Vue con TypeScript

Primer componente de Vue con TypeScript

Una pequeña ventaja de TypeScript

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í:

Comprobación de tipos con TypeScript en Vue JS

Comprobación de tipos con TypeScript en Vue JS

Una pequeña ayuda, lo sé; pero en tipos más complejos es una ventaja todavía mayor.

Conclusión

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.

Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Relacionado:  CSS - Ocultar elemento pero mantener espacio

Únete a otros 390 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: