Você está navegando a documentação da v2.x e anterior. Para a v3.x, clique aqui.

Suporte ao TypeScript

Vue CLI oferece suporte de fábrica às ferramentas TypeScript.

Declaração Oficial em Pacotes NPM

Um sistema de tipagem estática pode ajudar a prevenir muitos erros de runtime potenciais, especialmente conforme as aplicações crescem. Por isso temos declaração de tipos oficial para o TypeScript - não apenas no núcleo do Vue, mas para Vue Router e Vuex também.

Já que estão publicadas no NPM e o TypeScript mais recente sabe como resolver declarações de tipo em pacotes NPM, isto significa que você não precisa de nenhuma ferramenta adicional para utilizar TypeScript com Vue quando instalado via NPM.

Configuração Recomendada

// tsconfig.json
{
  "compilerOptions": {
    // isto alinha com o suporte de navegadores do Vue
    "target": "es5",
    // habilita inferência estrita de propriedades de dados no `this`
    "strict": true,
    // se usando webpack 2+ ou rollup, para habilitar tree shaking
    "module": "es2015",
    "moduleResolution": "node"
  }
}

Observe que é obrigatório incluir strict: true (ou pelo menos noImplicitThis: true o qual é parte da flag strict) para poder se aproveitar da checagem de tipos do this em métodos de componentes, caso contrário ele sempre será tratado como o tipo any.

Veja as opções de compilação do TypeScript para mais detalhes.

Ferramentas para Desenvolvimento

Criação do Projeto

Vue CLI 3 pode gerar novos projetos que utilizam TypeScript. Para começar:

# 1. Instale o Vue CLI globalmente, se ainda não estiver instalado
npm install --global @vue/cli

# 2. Crie um novo projeto, então escolha a opção "Manually select features"
vue create my-project-name

Suporte a Editores

Para desenvolver aplicações Vue com TypeScript, nós recomendamos fortemente utilizar o Visual Studio Code, o qual oferece ótimo suporte por padrão ao TypeScript. Se você está usando Componentes Single-File, obtenha a ótima extensão Vetur, que oferece inferência TypeScript dentro dos componentes .vue e muitos outros ótimos recursos.

WebStorm também oferece suporte por padrão tanto a TypeScript quanto ao Vue.

Utilização Básica

Para permitir que o TypeScript infira tipos dentro das opções de componentes Vue, você precisa definir componentes com Vue.component ou Vue.extend:

import Vue from 'vue'

const Component = Vue.extend({
  // inferência de tipos habilitada
})

const Component = {
  // isto NÃO terá inferência de tipos,
  // pois TypeScript não pode supor que são opções de componente Vue.
}

Componentes Através de Classes

Se você prefere uma API baseada em classes ao declarar seus componentes, pode usar o decorador oficial vue-class-component:

import Vue from 'vue'
import Component from 'vue-class-component'

// O decorador @Component indica que a classe é um componente Vue
@Component({
  // Todas as opções de componentes são permitidas aqui
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // Dados iniciais podem ser declarados como propriedades da instância
  message: string = 'Hello!'

  // Métodos do componente podem ser declarados como métodos da instância
  onClick (): void {
    window.alert(this.message)
  }
}

Ampliando Tipos ao Usar Plugins

Plugins podem adicionar propriedades e opções à instância Vue ou ao contexto global. Nestes casos, declarações de tipos são necessárias para que possam compilar em TypeScript. Por sorte, há um recurso TypeScript para ampliar tipos existentes, module augmentation.

Por exemplo, para declarar uma propriedade de instância $myProperty como string:

// 1. Tenha certeza de importar 'vue' antes de declarar tipos ampliados
import Vue from 'vue'

// 2. Especifique o arquivo com os tipos que quer ampliar
//    Vue tem um construtor de tipos em types/vue.d.ts
declare module 'vue/types/vue' {
  // 3. Declare a ampliação para Vue
  interface Vue {
    $myProperty: string
  }
}

Após incluir o código acima como um arquivo de declaração (como my-property.d.ts) em seu projeto, você pode importar $myProperty em uma instância Vue.

var vm = new Vue()
console.log(vm.$myProperty) // Isto deve compilar com sucesso

Você também pode declarar propriedades globais e opções de componentes adicionais:

import Vue from 'vue'

declare module 'vue/types/vue' {
  // Propriedades globais podem ser declaradas
  // na interface `VueConstructor`
  interface VueConstructor {
    $myGlobal: string
  }
}

// ComponentOptions são declarados em types/options.d.ts
declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    myOption?: string
  }
}

As declarações acima permitem compilação dos códigos a seguir:

// Propriedade global
console.log(Vue.$myGlobal)

// Opções de componente adicional
var vm = new Vue({
  myOption: 'Hello'
})

Anotando Tipos de Retorno

Por causa da natureza circular dos arquivos de declaração Vue, TypeScript pode ter dificuldades ao inferir tipos de alguns métodos. Por esta razão, você pode precisar anotar o tipo de retorno em métodos como render e aqueles em computed.

import Vue, { VNode } from 'vue'

const Component = Vue.extend({
  data () {
    return {
      msg: 'Olá'
    }
  },
  methods: {
    // Precisa de anotação por causa do `this` no retorno
    greet (): string {
      return this.msg + ' mundo'
    }
  },
  computed: {
    // Precisa de anotação
    greeting(): string {
      return this.greet() + '!'
    }
  },
  // `createElement` é inferido, mas `render` precisa do tipo de retorno
  render (createElement): VNode {
    return createElement('div', this.greeting)
  }
})

Se você achar que a inferência de tipos ou a autocompletação não estiver funcionando, anotar certos métodos pode ajudar a endereçar estes problemas. Usar a opção --noImplicitAny irá ajudar a encontrar muitos destes métodos não anotados.

Annotating Props

import Vue, { PropType } from 'vue'

interface ComplexMessage {
  title: string,
  okMessage: string,
  cancelMessage: string
}
const Component = Vue.extend({
  props: {
    name: String,
    success: { type: String },
    callback: {
      type: Function as PropType<() => void>
    },
    message: {
      type: Object as PropType<ComplexMessage>,
      required: true,
      validator (message: ComplexMessage) {
        return !!message.title;
      }
    }
  }
})

If you find validator not getting type inference or member completion isn’t working, annotating the argument with the expected type may help address these problems.