使用 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 组件的选项
}
在单文件组件中:
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>
基于类的 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)
}
}