关于typescript:typescript使用-TypeScript-开发-Vue-组件

37次阅读

共计 886 个字符，预计需要花费 3 分钟才能阅读完成。

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

Options Api
class Api

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

import Vue from 'vue'
const Component = Vue.extend({// 类型推断已启用})

const Component = {
  // 这里不会有类型推断，// 因为 TypeScript 不能确认这是 Vue 组件的选项
}

在单文件组件中:

script要加上lang='ts'
import Vue from 'vue'
导出组件时要应用 Vue.extend 定义

// 1. 要加上 `lang='ts'`
<script lang='ts'>
// 2. 导入 vue 模块
import Vue from 'vue'

// 3. 定义并导出一个组件 vue.extend({})
export default Vue.extend({// 两头内容与之前写法一样，之前放什么，extend 对象中放什么})
</script>

如果您在申明组件时更喜爱基于类的 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)
  }
}