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

Vue CLI v3.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Linter
? Use class-style component syntax? No
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: typescript-vue-router

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:

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.

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.

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:

<template>
    <div>
        <h1>Vue con TypeScript</h1>
        <button @click="aumentarContador">Aumentar</button>
        <h2>Contador: {{contador}}</h2>
    </div>
</template>

<script lang="ts">
  import Vue from 'vue';

  export default Vue.extend({
    name: 'PrimerComponente',
    data: () => ({
      contador: 0
    }),
    methods: {
      aumentarContador() {
        this.contador++;
      }
    }
  });
</script>

<style scoped>

</style>

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:

import PrimerComponente from './components/PrimerComponente.vue';

Lo registramos dentro de routes:

//...
{
  path: '/primer_componente',
  name: 'primer_componente',
  component: PrimerComponente,
},
//...

Al final el código (del enrutador) queda así:

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import PrimerComponente from './components/PrimerComponente.vue'; // <-- Importar aquí

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    // Definir ruta:                                                                         
    {
      path: '/primer_componente',
      name: 'primer_componente',
      component: PrimerComponente,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
    },
  ],
});

Si visitamos esa ruta, se verá el componente:

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

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.