Empieza a usar TypeScript en Vue. De la forma fácil.

Si programas en JavaScript, probablemente alguien te haya hablado de las ventajas de usar TypeScript o hayas pensado en empezar a usarlo.

Como puedes ver en este gráfico, más del 50% de los desarrolladores de JavaScript están usando TypeScript.

Fuente: https://2019.stateofjs.com/javascript-flavors/

Empezar a usar una nueva tecnología, un nuevo paradigma, un nuevo framework o cualquier otra cosa puede ser difícil y desafiante; por eso es importante empezar a integrar nuevas tecnologías evitando la fricción con las anteriores. Hoy intentaré mostrarte la forma más fácil de empezar a usar TypeScript en tus proyectos de Vue.

En el caso de TypeScript, “simplemente” añadiremos una capa sobre JavaScript, así que intentaré explicar la forma más sencilla de usar TypeScript con Vue, incluso en proyectos existentes.

Antes de empezar, deberías conocer los beneficios de usar TypeScript. Tienes miles de publicaciones en blogs hablando sobre ello:

El beneficio más repetido son los “tipos”. JavaScript es un lenguaje de tipado débil (las variables y constantes tienen tipos, pero no puedes establecer su tipo. Solo mediante su valor).

Requisitos previos

Asumo que estás usando vue-cli. Debes asegurarte de estar usando la versión 4.0.0+

Paso 1: Añadir TypeScript

El primer paso es añadir TypeScript usando vue-cli

vue add typescript

Vue CLI comienza a añadir el paquete de typescript y las dependencias necesarias. También crea y actualiza archivos de configuración como tsconfig.json. Necesitará hacerte algunas preguntas para configurarlo correctamente.

Veamos cada pregunta en detalle y la respuesta “correcta”.

? Use class-style component syntax? (Y/n)

Si quieres empezar a usar la sintaxis de componentes de estilo de clase, deberías responder “yes”. Puedes responder “no” y no usarla, pero nada más cambia.

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

“Yes”. Probablemente ya lo estabas usando.

Las siguientes dos preguntas son las más importantes

? Convert all .js files to .ts? (Y/n)

⚠️ Debes responder “No” para evitar que Vue CLI renombre todos tus archivos a .ts. Si lo haces, tendrás que refactorizar todos los archivos de tu proyecto a TypeScript.

? Allow .js files to be compiled? (y/N)

⚠️ Debes responder “Yes”. Es lo mismo que, en el tsconfig.json, establecer el valor allowJs a true. Si no respondes “yes”, recibirás muchos mensajes de error, porque el transpilador de TypeScript intentará transpilar los archivos .js.

Paso 2

No hay paso 2. Acabas de añadir soporte para TypeScript a tu proyecto y todo debería funcionar correctamente como de costumbre.

Escribir tu primer componente de Vue en TypeScript

Cuando escribes un componente de Vue en JavaScript, probablemente escribas algo similar a:

<template>
 ....
</template>
<script>
export default {
  props: ....,
  data () ....,
  methods: ....
}
</script>

Para escribir un componente de Vue usando TypeScript, necesitas establecer el lenguaje de script usando el atributo lang en la etiqueta script. Además, como TypeScript necesita inferir tipos, debes definir tus componentes con Vue.component o Vue.extend (prefiero la segunda opción).

Entonces nuestro componente se ve así:

<template>
 ....
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: ....,
  data () ....,
  methods: ....
})
</script>

🎉 ¡Hecho! Ya tienes tu primer componente de Vue en TypeScript.

El punto es que puedes empezar a usar TypeScript y mantener tu código anterior. No necesitas reescribir todos los componentes, o puedes hacerlo paso a paso.

Te recomiendo leer la documentación de Vue sobre el soporte de TypeScript

En futuras publicaciones del blog mostraré cómo usar múltiples mixins en TypeScript y otros consejos sobre TypeScript.