Vue + TypeScript: una combinación hecha en su editor de código

Vue está muy de moda en este momento y ha estado pensando en hacer un proyecto serio con él desde hace bastante tiempo, así que cuando surgió la oportunidad, me lancé. Pero había un pequeño problema: uno de los requisitos del proyecto era escribirlo en TypeScript. Al principio, estaba muy estresado por cómo iba a empezar con esta combinación, pero vue-cli lo hizo muy fácil.

Mentiría si dijera que este viaje fue súper suave. Hubo frustraciones, horas de mirar la pantalla y algunos golpes de puño con mi mesa, pero después de trabajar con Vue + TypeScript durante más de un mes, puedo decir que valió la pena, y si tuviera que codificar otra aplicación con Vue, lo haría . No lo hagas sin TypeScript.

Requisitos previos

Este artículo trata sobre el emparejamiento de Vue y TypeScript y asume algunos conocimientos básicos de ambos. Si aún no has tenido la oportunidad de jugar con ellos y tienes curiosidad, Vue tiene una excelente guía y los documentos de TypeScript son un excelente lugar para comenzar.

Necesitamos tener vue-cli instalado globalmente, para que podamos poner en marcha rápidamente el proyecto Vue. Instale vue-cli ejecutando el siguiente comando en su terminal:

npm install -g @vue/cli

Una vez que lo tengamos instalado, estaremos listos para comenzar. Si no tienes TypeScript instalado, no es necesario que lo hagamos de antemano, ya que vue-cli se encarga de eso cuando inicie un nuevo proyecto y elija TypeScript allí.

Empezando

Ahora que tenemos vue-cli instalado, todo lo que necesitamos hacer para iniciar un proyecto con Vue + TypeScript es ejecutar vue create. Mientras creas un nuevo proyecto, elige TypeScript y listo.

vue create app-name

Aquí está el resultado una vez que nuestro proyecto se pone en marcha:

vue-cli también nos brinda la posibilidad de elegir Babel junto con TypeScript para polyfills, preprocesadores de CSS, linter, bibliotecas de pruebas unitarias (elegí Jest, ¡vamos a Jest!) junto con otras configuraciones. Incluso puedes guardar tus elecciones en un ajuste preestablecido para usar más tarde en otro proyecto.

Aquí hay un resumen de las preguntas útiles que le harán para configurar el proyecto:

Una cosa que me gustaría mencionar es que vue-cli 3.0 viene con una interfaz de usuario que hace que sea aún más fácil crear un nuevo proyecto. Ejecute vue uien la terminal y vue-cli abre una interfaz de usuario donde puede configurar un nuevo proyecto.

Qué hay en la caja

Una vez finalizado vue-cli, obtendremos una buena estructura de directorios de nuestra aplicación con toda la configuración ya realizada.

• tsconfig.json: todo esto está configurado y podemos editarlo para adaptarlo a nuestros requisitos.
• shims-vue.d.ts: estos shims ya están configurados para ayudar a TypeScript a comprender .vuelos archivos (componentes de archivo único) cuando son importantes.
• vue-property-decorator: si elige utilizar componentes de estilo de clase, vue-cli agrega este complemento para que podamos usar todo tipo de decoradores. Esto resulta bastante útil y hace que el código sea más legible.
• Componentes de clase: si decide utilizarlos, vue-cli prepara el escenario para usted. Tenga en cuenta que aún necesitará registrar los enlaces del enrutador para que los componentes de la clase puedan resolverlos.

Configuración descargada

Una cosa que necesitaba configurar y que me hubiera gustado que estuviera incluido de fábrica eran los componentes compartidos de Sass. Para evitar importar mis variables y mixins de Sass en cada componente, tuve que cargarlos en vue.config.js. shared.scsses el archivo que exporta todas las variables y mixins que se usan dentro de la aplicación.

Aquí es donde llegué con mi configuración de Sass:

chainWebpack: (config) = {   config     .module     .rule('vue')     .uses     .get('vue-loader')     .tap(({ loaders, loaders: { scss }, ...options }) = ({       ...options,       loaders: {         ...loaders,         scss: [           ...scss,           {             loader: 'sass-resources-loader',             options: {               resources: [                 './src/styles/shared.scss',               ],             },           },         ],       },     }));

Decorador de propiedades de Vue

El paquete vue-property-decorator expone las propiedades de Vue y las pone a disposición para su uso como decoradores. En mi aplicación, terminé usando solo @Component, @Prop, @Watchpero hay otros como @Emit, @Injecty @Model, que hacen que el código sea mucho más detallado cuando se usa de forma extensiva.

Vuex

Vuex tiene mecanografías… ¡nada de decir! Vuex admite TypeScript para arrancar y, al principio, ni siquiera lo sabía. Comencé a buscar formas adecuadas de combinar Vuex con TypeScript y me topé con el curso egghead.io de Alex Jover Morales sobre Vue.js State Management con Vuex y TypeScript. Me informaron de la forma correcta de administrar el estado de Vuex cuando se utiliza TypeScript.

Por ejemplo:

// actions.tsimport { ActionTree } from 'vuex';import { RootState, ModuleState } from '@/types';const actions: ActionTreeModuleState, RootState = {  // all your actions go here};

Clase Vuex

Esta es otra cosa que no sabía que existía cuando comencé, pero desearía haberla encontrada antes. Estaba creando captadores para casi todo, pero eso no me parecía bien. Empecé a buscar mejores formas de hacer esto y encontré un artículo interesante de Francesco Vitullo que me aclaró algunas cosas. Ahí es donde descubrí vuex-class, que proporciona decoradores para todos los mapeadores de vuex.

Entonces, ahora, en lugar de escribir un nuevo captador para simplemente acceder a una propiedad en estado, podría hacer esto:

import {  State,} from 'vuex-class'@Componentexport class MyComp extends Vue {  @State(state = state.bar) stateBar}

Experiencia de desarrollo con código VS

Con TypeScript, la experiencia de codificación en VS Code es mucho mejor. No hay que ir y venir a verificar qué tipos de mutaciones declaré mutation-types.tsporque VS Code puede reconocerlos y sugerir los correctos a medida que escribo.

Lo mismo ocurre con la modificación del estado en mutaciones: con TypeScript, el editor sabía cómo se ve mi estructura de estado y sugiere las propiedades correctas.

Si está utilizando VS Code, le recomendamos encarecidamente utilizar el complemento Vetur porque proporciona herramientas de Vue y viene con otras funciones como resaltado de sintaxis (esto funciona muy bien con los componentes de un solo archivo de Vue) y linting desde el primer momento.

Pensamientos finales

Como todo lo demás en el ecosistema JavaScript, a Vue + TypeScript todavía le queda un largo camino por recorrer. Por ejemplo, no pude usar vuelidate porque no tiene mecanografía. Pero afortunadamente, vee-validate proporcionó una solución alternativa, por lo que no tuve que recorrer el difícil camino de escribirlos yo mismo.

En conclusión, encontré que la experiencia de desarrollo es mucho más fluida y VS Code es una bestia totalmente diferente cuando trabajas con TypeScript. Realmente no necesito elogiar a Vue: es muy fácil de aprender y comenzar a construir y días tratando de comprender el funcionamiento interno ahorrando un marco.