应用 TypeScript 开发 Vue 应用程序时，定义组件有两种形式:

  • Options Api
  • class Api

根本用法 （Options Api）

要让 TypeScript 正确推断 Vue 组件选项中的类型，您须要应用 Vue.component 或 Vue.extend 定义组件：

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

在单文件组件中:

  1. script要加上lang='ts'
  2. import Vue from 'vue'
  3. 导出组件时要应用Vue.extend定义
// 1. 要加上`lang='ts'`<script lang='ts'>// 2. 导入vue模块import Vue from 'vue'// 3. 定义并导出一个组件 vue.extend({})export default Vue.extend({       // 两头内容与之前写法一样，之前放什么，extend对象中放什么})</script>

基于类的 Vue 组件（class Api）

如果您在申明组件时更喜爱基于类的 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 {  // 初始数据能够间接申明为实例的 property  message: string = 'Hello!'  // 组件办法也能够间接申明为实例的办法  onClick (): void {    window.alert(this.message)  }}

参考

  • https://cn.vuejs.org/v2/guide...