Drops: Vue 2.x e o Typescript (e como solucionar os erros de retorno)

Disclaimer: sim, o Vue 3 é uma realidade, mas ainda existem muitos projetos com o Vue 2 e que precisam de manutenção. O artigo é sobre a relação da versão anterior do Vue com o Typescript e como contornar alguns problemas de escopo da melhor forma o possível baseado nas minhas experiências

Acho que alguns de vocês tem reparado em alguns erros de TS que podem vir a acontecer nas versões 2.x no Vue. Mas por que acontece?

O Vue 2.x tem um escopo que dependendo da forma que utilizar o TS dentro do projeto o próprio Typescript (que é um superset de Javascipt) tem dificuldade de interpretar/fazer leitura dessas props dentro das funções. Esse cenário ocorre bastante quando usamos alguma prop como retorno dentro do mounted() ou computed(), por exemplo.
Para solucionar problemas desse tipo temos duas soluções: ou fazer a tipagem desses retornos dentro da função ou declarar a função como uma prop do tipo Function. Não entendeu? Então vamos a um exemplo para facilitar o entendimento.

Suponhamos que você tenha uma função que retorne uma mensagem ou qualquer outra informação após realizar uma ação (inserir um texto dentro campo input, por exemplo). Ao rodar o projeto você receberá um erro no terminal parecido com esse:

Property 'xxxxxxx' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<{ type: string; xxxxx: string; xxxxx: string; xxxx: string; target: string; xxxx: boolean; xxxx: boolean; }>>'.

Para solucionar esse problema você precisa fazer o que chamamos de anotação de retorno, ou seja, declarar esse tipo na função. Algo mais ou menos assim:

greeting(): string {
  return this.greet() + '!'
} 

Mas caso você não queira fazer essa anotação no retorno direto na função você pode fazer dentro da prop mesmo. Assim:

props: { 
  greeting: { 
   type: Function as PropType<() => void>
  } 
}

Lembrando que esses casos costumam acontecer quando fazemos a extensão do nosso componente Vue para Typescript (o famoso Vue.extend()). Uma alternativa mais viável também seria escrevê-lo em Class-Based Component (bem parecido com o do Angular, pra quem tá familiarizado com a sintaxe).

No Vue 3.x esse problema é solucionado porque o framework é escrito em Typescript e acaba tendo ele por "debaixo dos panos", digamos assim rs

Se quiser saber mais sobre o que foi escrito nesse artigo deixo dois links da própria documentação do Vue sobre o assunto:

• TypeScript Support - Vue 2.x
• TypeScript Support - Vue 3.x

Até a próxima!