Vue中使用TypeScript

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中使用TypeScript相关的知识,希望对你有一定的参考价值。

参考技术A

​ Tip: 这篇文章是我用到了typescript后写的,因为刚接触没多久,写得不好多多海涵,栗子用了另外一位作者的,在此表示感谢,vue3.x开始会慢慢向typescript靠拢,所以学习ts是非常有必要的, 阅读本文需要具备一定的TypeScript基础和vue基础。

当我们在 vue 单文件中使用 TypeScript 时,引入 vue-property-decorator 之后, script 中的标签就变为这样:

等同于:

把我们需要用到的属性给导入进来,在这里我导入了Component;这是 vue-property-decorator 组件提供的属性,至于有哪些属性下面我会说到。

相信很多小伙伴也注意到我使用了和以往不同的写法,使用了es6的类的写法,至于为何可以使用这种写法就是因为这个组件是完全依赖于 vue-class-component ;这是尤大神写的支持vue的组件, 具体可看 。建议先看看~

Tip:(很重要的一点):在类中声明的变量其实和data中声明的是一样的,都是有双向绑定的;也就是例子中的ValA和ValB有了类型指定同时能双向绑定

这个组件完全依赖于 vue-class-component .它具备以下几个属性:

因为我个人也刚学ts没多久,写得不好,还请多多海涵。后续会继续更新。

typescript使用 TypeScript 开发 Vue 组件

使用 TypeScript 开发 Vue 应用程序时,定义组件有两种方式:

  • Options Api
  • class Api

基本用法 (Options Api)

要让 TypeScript 正确推断 Vue 组件选项中的类型,您需要使用 Vue.componentVue.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...

以上是关于Vue中使用TypeScript的主要内容,如果未能解决你的问题,请参考以下文章

vue中使用vue-awesome-swiper

【vue】在vue中使用高德地图API

vue 怎么挂载swiper

在vue中使用iframe标签

在vue中使用checkbox

less在vue中的使用