Prise en charge de TypeScript


Vue CLI fournit la prise en charge intégrée de l'outil TypeScript.


Annuaire


Publié en tant que document de déclaration officiel du package NPM

Le système de types statiques peut vous aider à prévenir efficacement de nombreuses erreurs d'exécution potentielles, et il deviendra plus important à mesure que votre application deviendra plus mature. . C'est pourquoi Vue fournit non seulement des déclarations de type officielles pour TypeScript pour Vue core, mais fournit également des fichiers de déclaration correspondants pour Vue Router et Vuex.

Et maintenant que nous les avons publiées sur NPM, la dernière version de TypeScript sait également analyser elle-même les déclarations de type des packages NPM. Cela signifie que tant que vous l'installez avec succès via NPM, vous n'avez plus besoin d'aide d'outils supplémentaires pour utiliser TypeScript dans Vue. 


// tsconfig.json
{
  "compilerOptions": {
    // 与 Vue 的浏览器支持保持一致
    "target": "es5",
    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

Notez que vous devez introduire le type strict: true (或者至少 noImplicitThis: true，这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查，否则它会始终被看作 any.

Consultez la Documentation sur les options du compilateur TypeScript (anglais) pour en savoir plus.


Chaîne d'outils de développement


Création de projet

Vue CLI 3 peut utiliser TypeScript pour générer de nouveaux projets. Créé par : 

# 1. 如果没有安装 Vue CLI 就先安装
npm install --global @vue/cli

# 2. 创建一个新工程，并选择 "Manually select features (手动选择特性)" 选项
vue create my-project-name


Support de l'éditeur

Pour développer des applications Vue à l'aide de TypeScript, nous vous recommandons fortement d'utiliser Visual Studio Code qui fournit une excellente fonctionnalité "prête à l'emploi" pour TypeScript "soutien. Si vous utilisez Single File Component (SFC), vous pouvez installer le Vetur plugin qui fournit la prise en charge SFC et de nombreuses autres fonctionnalités utiles.

WebStorm fournit également une prise en charge « prête à l'emploi » pour TypeScript et Vue.


Utilisation de base

Pour que TypeScript déduise correctement les types dans les options du composant Vue, vous devez utiliser Vue.component ou Vue.extend Définir les composants : Vue.component 或 Vue.extend 定义组件：

import Vue from 'vue'
const Component = Vue.extend({
  // 类型推断已启用
})
const Component = {
  // 这里不会有类型推断，
  // 因为TypeScript不能确认这是Vue组件的选项
}


基于类的 Vue 组件

如果您在声明组件时更喜欢基于类的 API，则可以使用官方维护的 vue-class-component 装饰器：

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

// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
  // 所有的组件选项都可以放在这里
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // 初始数据可以直接声明为实例的属性
  message: string = 'Hello!'
  // 组件方法也可以直接声明为实例的方法
  onClick (): void {
    window.alert(this.message)
  }
}


增强类型以配合插件使用

插件可以增加 Vue 的全局/实例属性和组件选项。在这些情况下，在 TypeScript 中制作插件需要类型声明。庆幸的是，TypeScript 有一个特性来补充现有的类型，叫做模块补充 (module augmentation)。

例如，声明一个 string 类型的实例属性 $myProperty：

// 1. 确保在声明补充的类型之前导入 'vue'
import Vue from 'vue'
// 2. 定制一个文件，设置你想要补充的类型
//    在 types/vue.d.ts 里 Vue 有构造函数类型
declare module 'vue/types/vue' {
// 3. 声明为 Vue 补充的东西
  interface Vue {
    $myProperty: string
  }
}

在你的项目中包含了上述作为声明文件的代码之后 (像 my-property.d.ts)，你就可以在 Vue 实例上使用 $myProperty 了。

var vm = new Vue()
console.log(vm.$myProperty) // 将会顺利编译通过

你也可以声明额外的属性和组件选项：

import Vue from 'vue'

declare module 'vue/types/vue' {
  // 可以使用 `VueConstructor` 接口
  // 来声明全局属性
  interface VueConstructor {
    $myGlobal: string
  }
}

// ComponentOptions 声明于 types/options.d.ts 之中
declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    myOption?: string
  }
}

上述的声明允许下面的代码顺利编译通过：

// 全局属性
console.log(Vue.$myGlobal)

// 额外的组件选项
var vm = new Vue({
  myOption: 'Hello'
})


标注返回值

因为 Vue 的声明文件天生就具有循环性，TypeScript 可能在推断某个方法的类型的时候存在困难。因此，你可能需要在 render 或 computed

import Vue, { VNode } from 'vue'

const Component = Vue.extend({
  data () {
    return {
      msg: 'Hello'
    }
  },
  methods: {
    // 需要标注有 `this` 参与运算的返回值类型
    greet (): string {
      return this.msg + ' world'
    }
  },
  computed: {
    // 需要标注
    greeting(): string {
      return this.greet() + '!'
    }
  },
  // `createElement` 是可推导的，但是 `render` 需要返回值类型
  render (createElement): VNode {
    return createElement('div', this.greeting)
  }
})

🎜🎜

🎜🎜Composants Vue basés sur les classes🎜🎜🎜🎜🎜Si vous préférez une API basée sur les classes lors de la déclaration des composants, vous pouvez utiliser l'API officiellement maintenue vue-class-component🎜 Décorateur : 🎜🎜rrreee🎜🎜🎜

🎜🎜Améliorer les types pour fonctionner avec les plug-ins🎜🎜🎜🎜🎜Les plug-ins peuvent augmenter les propriétés globales/d'instance et les options de composants de Vue. Dans ces cas, la création du plugin en TypeScript nécessite des déclarations de type. Heureusement, TypeScript dispose d'une fonctionnalité pour compléter les types existants appelée Module augmentation🎜. 🎜🎜🎜Par exemple, pour déclarer une propriété d'instance $myProperty de type string : 🎜rrreee🎜Après avoir inclus le code ci-dessus comme fichier de déclaration dans votre projet (comme my-property.d.ts), vous pouvez utiliser $myProperty sur l'instance Vue. 🎜rrreee🎜Vous pouvez également déclarer des propriétés et des options de composants supplémentaires : 🎜rrreee🎜La déclaration ci-dessus permet au code suivant de se compiler en douceur : 🎜rrreee🎜🎜🎜

🎜🎜Valeur de retour de l'étiquette 🎜 🎜🎜🎜🎜Le fichier de déclaration de Vue étant intrinsèquement circulaire, TypeScript peut avoir des difficultés à déduire le type d'une méthode. Par conséquent, vous devrez peut-être annoter les valeurs de retour sur les méthodes dans render ou calculed. 🎜🎜rrreee

Si vous constatez que l'inférence de type ou la complétion de membre ne fonctionne pas, marquer une méthode peut vous aider à résoudre le problème. L'utilisation de l'option --noImplicitAny vous aidera à trouver ces méthodes non étiquetées.