TypeScript-Unterstützung


Vue CLI bietet integrierte TypeScript-Tool-Unterstützung.


Verzeichnis


Veröffentlicht als offizielle Deklarationsdatei für NPM-Pakete

Das statische Typsystem kann Ihnen dabei helfen, viele potenzielle Laufzeitfehler effektiv zu verhindern und wie Sie die Anwendungen nutzen werden mit zunehmender Reife immer deutlicher hervortreten. Aus diesem Grund stellt Vue nicht nur offizielle Typdeklarationen für TypeScript bereit, sondern auch für Vue Router und Vuex entsprechende Deklarationsdateien.

Außerdem haben wir sie in NPM veröffentlicht, und die neueste Version von TypeScript weiß, wie Typdeklarationen aus NPM-Paketen selbst analysiert werden. Das bedeutet, dass Sie bei erfolgreicher Installation über NPM keine zusätzliche Tool-Unterstützung mehr benötigen, um TypeScript in Vue zu verwenden. 


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

Beachten Sie, dass Sie <🎜 importieren müssen > (Oder zumindest strict: true, was Teil des noImplicitThis: true-Musters ist), um die Typprüfung für strict in Komponentenmethoden zu nutzen, andernfalls würde es immer als this-Typ behandelt. any

Weitere Informationen finden Sie in der

Dokumentation zu den TypeScript-Compiler-Optionen (Englisch).


Entwicklungs-Toolchain


Projekterstellung

Vue CLI 3 kann TypeScript verwenden, um neue Projekte zu generieren. Erstellt von: 

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

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


Editor-Unterstützung

Um Vue-Anwendungen mit TypeScript zu entwickeln, empfehlen wir es dringend Es wird empfohlen, Visual Studio Code zu verwenden, bei dem es sich um TypeScript handelt Bietet hervorragenden „out of the box“-Support. Wenn Sie Single File Components (SFC) verwenden, können Sie das Vetur-Plugin installieren, das SFC-Unterstützung und viele weitere nützliche Funktionen bietet.

WebStorm bietet auch „out-of-the-box“-Unterstützung für TypeScript und Vue.


Grundlegende Verwendung

Damit TypeScript den Typ in den Vue-Komponentenoptionen korrekt ableitet , Sie müssen Vue.component oder Vue.extend verwenden Definieren Sie Komponenten: 

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


Klassenbasierte Vue-Komponente

Wenn Sie Wenn Sie beim Deklarieren von Komponenten eine klassenbasierte API bevorzugen, können Sie die offiziell verwaltete verwenden vue-class-componentDekorator: 

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)
  }
}


Erweiterte Typen für die Arbeit mit Plugins

Plugin kann Vue hinzufügen globale/Instanzeigenschaften und Komponentenoptionen. In diesen Fällen erfordert die Erstellung des Plugins in TypeScript Typdeklarationen. Glücklicherweise verfügt TypeScript über eine Funktion zur Ergänzung bestehender Typen, die Modulerweiterung genannt wird.
Deklarieren Sie beispielsweise eine Instanzeigenschaft vom Typ

: string

// 1. 确保在声明补充的类型之前导入 'vue'
import Vue from 'vue'
// 2. 定制一个文件，设置你想要补充的类型
//    在 types/vue.d.ts 里 Vue 有构造函数类型
declare module 'vue/types/vue' {
// 3. 声明为 Vue 补充的东西
  interface Vue {
    $myProperty: string
  }
}
$myProperty, nachdem Sie den obigen Code als Deklarationsdatei in Ihr Projekt eingefügt haben (wie

). , können Sie

auf der Vue-Instanz verwenden. my-property.d.ts

var vm = new Vue()
console.log(vm.$myProperty) // 将会顺利编译通过
$myPropertySie können auch zusätzliche Eigenschaften und Komponentenoptionen deklarieren: 

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
  }
}

Die obige Deklaration ermöglicht den reibungslosen Ablauf des folgenden Codes Lee kompiliert und übergibt: 

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

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


Markieren Sie den Rückgabewert

weil Die Deklarationsdateien von Vue sind von Natur aus zirkulär und TypeScript kann Schwierigkeiten haben, den Typ einer Methode abzuleiten. Daher müssen Sie möglicherweise Rückgabewerte für Methoden innerhalb von
oder

mit Anmerkungen versehen. rendercomputed

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)
  }
})

Wenn Sie feststellen, dass die Typinferenz oder Membervervollständigung nicht funktioniert, kann Ihnen das Markieren einer Methode bei der Lösung des Problems helfen. Mithilfe der Option --noImplicitAny können Sie diese nicht annotierten Methoden leichter finden.