Поддержка TypeScript

Vue CLI обеспечивает встроенную поддержку инструментов TypeScript.

Официальная декларация в пакетах NPM

Система статического типа может помочь предотвратить многие потенциальные ошибки времени выполнения при создании приложений, особенно по мере роста приложений. Вот почему Vue поставляется с официальными объявлениями типов для TypeScript - не только в ядре Vue, но также для vuex и vue-router.

Поскольку эти пакеты публикуются в NPM, и последние версии TypeScript знают, как разрешить тип в пакете NPM, это означает, что когда пакет устанавливается через NPM, нам не нужны никакие дополнительные инструменты для использования TypeScript с Vue.

Рекомендуемая конфигурация

// tsconfig.json
{
  "compilerOptions": {
    // this will align with Vue's browser support
    "target": "es5",
    // this will enable stricter inference for data properties on `this`
    "strict": true,
    // if using rollup or webpack 2+, in leveraging tree shaking:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

Обратите внимание, что мы должны включить строгий: истинный (или, по крайней мере, noImplicitThis: true, который является частью строгого флага), чтобы использовать проверку типа этого в компонентных методах, иначе он всегда будет обрабатываться как любой тип.

Инструменты разработки

Создание проекта

Vue CLI 3 может генерировать новые проекты, которые используют TypeScript. Для начала:

1. Установите Vue CLI, если он еще не установлен на вашем ПК

npm install --global @vue/cli

2. Это создаст новый проект, а затем выберите опцию «Выбор компонентов вручную»

vue create my-project-name

Поддержка редактора

Код Visual Studio настоятельно рекомендуется для разработки приложений Vue с TypeScript. Это потому, что он обеспечивает отличную встроенную поддержку TypeScript. Если вы будете использовать компоненты с одним файлом, я рекомендую вам получить отличное расширение Vetur, которое обеспечит вывод TypeScript внутри SFC и многие другие замечательные функции.

WebStorm является альтернативой, поскольку он обеспечивает готовую поддержку как для TypeScript, так и для Vue.

Основное использование

Если мы хотим, чтобы TypeScript правильно выводил типы внутри параметров компонента Vue, нам нужно определить компоненты с помощью Vue.component или Vue.extend:

import Vue from 'vue'
const Component = Vue.extend({
  // type inference is enabled
})
const Component = {
  // have type inference will not be enabled here,
  // because TypeScript can't tell that this is options for a Vue component.
}

Компоненты стиля Vue

Если вы предпочитаете API на основе классов при объявлении компонентов, вы можете использовать официально поддерживаемый декоратор vue-class-component:

import Vue from 'vue'
import Component from 'vue-class-component'
// The @Component decorator indicates that the class is a Vue component
@Component({
  // All component options will be allowed in here
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // the initial data can be declared as instance properties
  message: string ='Hello!'
  //The Component methods can be declared as instance methods
  onClick (): void {
    window.alert(this.message)
  }
}

Дополнение типов для использования с плагинами

Мы можем добавить плагины к глобальным свойствам / параметрам экземпляра Vue. В таких случаях объявления типов необходимы для компиляции плагинов в TypeScript. Существует функция TypeScript, которая дополняет существующие типы, называемая модулем дополнения.

Например, если мы хотим объявить свойство экземпляра $ myProperty с типом string:

// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'
// 2. Specify a file with the types you want to augment
//    Vue.JS has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
  // 3. Declare the augmentation for Vue
  interface Vue {
    $myProperty: string
  }
}

После включения приведенного выше кода в качестве файла объявления (например, my-property.d.ts) в наш проект мы можем использовать $ myProperty для экземпляра Vue.

var vm = new Vue()
console.log(vm.$myProperty) // This should hopefully compile successfully

Мы также можем объявить дополнительные глобальные свойства и параметры компонента:

import Vue from 'vue'
declare module 'vue/types/vue' {
  // the global properties can be declared on
  // the `VueConstructor` interface
  interface VueConstructor {
    $myGlobal: string
  }
}
//  the ComponentOptions is declared in types/options.d.ts
declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    myOption?: string
  }
}

Вышеуказанные объявления позволят скомпилировать следующий код:

// Global property
console.log(Vue.$myGlobal)
// Additional component option
var vm = new Vue({
  myOption: 'Hello'
})

Аннотирующие типы возврата

Из-за циклического характера файлов объявлений Vue, у TypeScript могут возникнуть некоторые трудности с выводом типов определенных методов. Следовательно, нам может понадобиться аннотировать возвращаемый тип для таких методов, как рендеринг и методы вычислений.

import Vue, { VNode } from 'vue'
const Component = Vue.extend({
  data () {
    return {
      msg: 'Hello'
    }
  },
  methods: {
    // we need annotation due to `this` in return type
    greet (): string {
      return this.msg + ' world'
    }
  },
  computed: {
    // need annotation
    greeting(): string {
      return this.greet() + '!'
    }
  },
  //the `createElement` is inferred, but `render` will need return type
  render (createElement): VNode {
    return createElement('div', this.greeting)
  }
})

Если мы обнаружим, что вывод типа или завершение члена не работает, то аннотирование определенных методов может помочь решить эти проблемы. Использование параметра --noImplicitAny поможет найти многие из этих аннотированных методов.