Como escrever componentes baseados em classe com Vue.js e TypeScript

Introdução

Vue.js 2 suporta componentes de estilo de classe. Se você tem experiência em Angular (2+), provavelmente está familiarizado com o padrão de escrever componentes como classes usando propriedades e decoradores para descrever partes mais complexas de seu componente.

A maior vantagem que os componentes de estilo de classe têm sobre os componentes Vue.js padrão é que eles tornam mais claro para onde isso realmente aponta no componente compilado e permitem um código mais conciso.

Neste artigo, você será apresentado ao uso de vue-class-component e vue-property-decorator para oferecer suporte a TypeScript em componentes baseados em classe Vue.js.

Pré-requisitos

Para acompanhar este artigo, você precisará de:

• Node.js instalado localmente, o que você pode fazer seguindo Como instalar o Node.js e criar um ambiente de desenvolvimento local.
• Alguma familiaridade com componentes de arquivo único.
• Alguma familiaridade com as convenções do TypeScript.

Este tutorial foi verificado com Node v15.1.0, npm v6.14.8, Vue.js v2.6.11, TypeScript v3.9.3, @vue/cli v4.5.0, vue-class-component v7.2.3 e vue-property-decorator v8.4.2.

Passo 1 — Configurando o Projeto

Você precisará de vue-class-component e vue-property-decorator instalados.

Você pode usar @vue/cli para criar um novo projeto Vue.js:

npx @vue/cli create vue-typescript-example

Para os fins deste tutorial, a configuração exigirá:

@vue/-plugin-typescript instalará typescript, vue-class-component e vue-property-decorator.

Em seguida, navegue até o diretório do projeto:

cd vue-typescript-example

Neste ponto, você tem um projeto Vue.js configurado para TypeScript e componentes de estilo de classe.

Etapa 2 — Escrevendo um componente de arquivo único com TypeScript

Um componente de classe é uma classe do TypeScript que estende o objeto Vue. Em componentes de arquivo único, certifique-se de definir a linguagem <script> como ts e exportar a classe como default.

Abra App.vue em seu editor de código e crie este exemplo de componente de arquivo único com TypeScript:

<template>
  <div>
    <label>Update myDataProperty
      <input :value="myDataProperty" @input="updateMyProperty($event)"/>
    </label>
    <div>{{ myDataProperty }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  // Data property
  myDataProperty: string = 'Data Property'

  // Component method
  updateMyProperty ($event: { target: { value: string } }) {
    this.myDataProperty = $event.target.value
  }
}
</script>

Observe que as propriedades de dados são definidas diretamente na classe e nos métodos.

O decorador @Component(componentConfig) é o que torna isso possível. Ele transforma a classe em um formato que o Vue.js pode entender durante o processo de compilação.

Neste ponto, se você fosse compilar e observar seu aplicativo em um navegador, seria apresentado a você um campo de entrada e a palavra Data Property. Ao interagir com o campo de entrada, myDataProperty será atualizado e refletirá as alterações feitas.

Etapa 3 — Usando acessórios de componentes

Através do uso do decorador @Prop(config) de vue-property-decorator, você pode declarar propriedades de entrada da mesma forma que as propriedades de dados.

Aqui está um exemplo em TypeScript que usa uma exampleProperty uma propriedade de componente com o valor padrão de Input Property:

<template>
  <div>{{ exampleProperty }}</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  @Prop({ default: 'Input Property' })
  exampleProperty!: string
}
</script>

Em JavaScript, isso é equivalente a:

export default {
  props: {
    exampleProperty: {
      type: String,
      default: 'Input Property'
    }
  }
}

Neste ponto, se você fosse compilar e observar seu aplicativo em um navegador, seria apresentada a mensagem: Input Property.

Etapa 4 — Usando propriedades calculadas

As propriedades computadas são escritas como getters e setters na classe.

Aqui está um exemplo em TypeScript que get é um myComputedProp e retorna um número aleatório:

<template>
  <div>{{ myComputedProp }}</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  get myComputedProp() {
    return Math.random()
  }
}
</script>

Em JavaScript, isso é equivalente a:

export default {
  computed: {
    myComputedProp() {
      return Math.random()
    }
  }
}

Nesse ponto, se você fosse compilar e observar seu aplicativo em um navegador, seria apresentado a você um número aleatório.

Passo 5 — Usando observadores

Os observadores podem ser criados com o decorador @Watch(propertyString, config).

Aqui está um exemplo em TypeScript que observa quando myWatchedProperty aciona onPropertyChanged:

<template>
  <div>
    <label>Update myWatchedProperty
      <input :value="myWatchedProperty" @input="updateMyProperty($event)"/>
    </label>
    <div>{{ myWatchedPropertyStatus }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  myWatchedProperty: string = 'Watched Property'
  myWatchedPropertyStatus: string = ''

  @Watch('myWatchedProperty')
  onPropertyChanged(value: string, oldValue: string) {
    this.myWatchedPropertyStatus = 'Watched Property Changed'
  }

  updateMyProperty ($event: { target: { value: string } }) {
    this.myWatchedProperty = $event.target.value
  }
}
</script>

Em JavaScript, isso é equivalente a:

export default {
  data() {
    return {
      myWatchedProperty: null
    }
  }

  methods: {
    onPropertyChanged(value, oldValue) {
      // ...
    }
  }

  watch: {
    myWatchedProperty: {
      handler: 'onPropertyChanged',
      immediate: false,
      deep: true
    }
  }
}

Nesse ponto, se você fosse compilar e observar seu aplicativo em um navegador, seria apresentado um campo de entrada. Alterar o valor de entrada exibirá a mensagem Watched Property Changed.

Conclusão

Neste artigo, você aprendeu como usar vue-class-component e vue-property-decorator para oferecer suporte a TypeScript em componentes baseados em classe Vue.js.

Este artigo apresentou @Component, get e set. Para obter uma lista completa de declarações disponíveis em vue-class-component, consulte a documentação oficial.

Este artigo também apresentou @Prop e @Watch. Para obter uma lista completa de decoradores disponíveis em vue-property-decorator, consulte a documentação oficial.

Se você quiser saber mais sobre o TypeScript, confira nossa página de tópicos do TypeScript para ver exercícios e projetos de programação.