Forem

Aline Bezzoco
Aline Bezzoco

Posted on

4 2

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() + '!'
} 
Enter fullscreen mode Exit fullscreen mode

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>
  } 
}
Enter fullscreen mode Exit fullscreen mode

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:

Até a próxima!

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

Learn the ins and outs of Promises and Async/Await!

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay