如何在Vue项目中应用TypeScript类

目录
  • 一、前言
  • 二、使用
    • 1.@Component
    • 2.compued、data、methods
    • 3.@props
    • 4.@watch
    • 5.@emit
  • 三 、总结

一、前言

TypeScript是基于vue-class-component库而来,这个库vue官方推出的一个支持使用class方式来开发vue单文件组件的库

主要的功能如下:

  • methods 可以直接声明为类的成员方法
  • 计算属性可以被声明为类的属性访问器
  • 初始化的 data 可以被声明为类属性
  • datarender 以及所有的 Vue 生命周期钩子可以直接作为类的成员方法
  • 所有其他属性,需要放在装饰器中

二、使用

vue-property-decorator 主要提供了以下装饰器

  • @Prop
  • @PropSync
  • @Model
  • @Watch
  • @Provide
  • @Inject
  • @ProvideReactive
  • @InjectReactive
  • @Emit
  • @Ref
  • @Component (由 vue-class-component 提供)
  • Mixins (由 vue-class-component 提供)

1.@Component

Component装饰器它注明了此类为一个Vue组件,因此即使没有设置选项也不能省略

如果需要定义比如 namecomponentsfiltersdirectives以及自定义属性,就可以在Component装饰器中定义,如下:

import {Component,Vue} from 'vue-property-decorator';
import {componentA,componentB} from '@/components'; 

 @Component({
    components:{
        componentA,
        componentB,
    },
    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.focus()
            }
        }
    }
})
export default class YourCompoent extends Vue{ 

}

2.compued、data、methods

这里取消了组件的datamethods属性,以往data返回对象中的属性、methods中的方法需要直接定义在Class中,当做类的属性和方法

@Component
export default class HelloDecorator extends Vue {
    count: number = 123 // 类属性相当于以前的 data 

    add(): number { // 类方法就是以前的方法
        this.count + 1
    } 

    // 获取计算属性
    get total(): number {
      return this.count + 1
    } 

    // 设置计算属性
    set total(param:number): void {
      this.count = param
    }
}

3.@props

组件接收属性的装饰器,如下使用:

import {Component,Vue,Prop} from vue-property-decorator; 

@Component
export default class YourComponent extends Vue {
    @Prop(String)
    propA:string; 

    @Prop([String,Number])
    propB:string|number; 

    @Prop({
     type: String, // type: [String , Number]
     default: 'default value', // 一般为String或Number
      //如果是对象或数组的话。默认值从一个工厂函数中返回
      // defatult: () => {
      //     return ['a','b']
      // }
     required: true,
     validator: (value) => {
        return [
          'InProcess',
          'Settled'
        ].indexOf(value) !== -1
     }
    })
    propC:string;
}

4.@watch

实际就是Vue中的监听器,如下:

import { Vue, Component, Watch } from 'vue-property-decorator' 

@Component
export default class YourComponent extends Vue {
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {} 

  @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val: Person, oldVal: Person) {} 

  @Watch('person')
  onPersonChanged2(val: Person, oldVal: Person) {}
}

5.@emit

vue-property-decorator 提供的 @Emit 装饰器就是代替Vue中的事件的触发$emit,如下:

import {Vue, Component, Emit} from 'vue-property-decorator';
    @Component({})
    export default class Some extends Vue{
        mounted(){
            this.$on('emit-todo', function(n) {
                console.log(n)
            })
            this.emitTodo('world');
        }
        @Emit()
        emitTodo(n: string){
            console.log('hello');
        }
    }

三 、总结

可以看到上述typescript版本的vue class的语法与平时javascript版本使用起来还是有很大的不同,多处用到class与装饰器,但实际上本质是一致的,只有不断编写才会得心应手

到此这篇关于如何在Vue项目中应用TypeScript的文章就介绍到这了,更多相关在Vue项目中应用TypeScript内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-09-13

Vue3+TypeScript实现递归菜单组件的完整实例

目录 前言 需求 实现 首次渲染 点击菜单项 样式区分 默认高亮 数据源变动引发的 bug 完整代码 App.vue 总结 前言 小伙伴们好久不见,最近刚入职新公司,需求排的很满,平常是实在没时间写文章了,更新频率会变得比较慢. 周末在家闲着无聊,突然小弟过来紧急求助,说是面试腾讯的时候,对方给了个 Vue 的递归菜单要求实现,回来找我复盘. 正好这周是小周,没想着出去玩,就在家写写代码吧,我看了一下需求,确实是比较复杂,需要利用好递归组件,正好趁着这 个机会总结一篇 Vue3 + TS 实现递

vue3+typeScript穿梭框的实现示例

前言 实现功能:模仿element穿梭框的简单功能 每周分享一个vue3+typeScript的小组件,我只想分享下自己的实现思路,楼主是个菜鸡前端,记录下实现过程,说不定对你有帮助. 效果展示 预览地址 github地址 开发过程 思路:用两个数组分别记录左右框框里面的值,根据复选框选中状态来实现删除增加即可 html部分 <div class="shuttle"> <!-- 左边列表 --> <div class="shuttle-box&q

vue3+typescript实现图片懒加载插件

github项目地址: github.com/murongg/vue- 求star 与 issues 我文采不好,可能写的文章不咋样,有什么问题可以在留言区评论,我会尽力解答 本项目已经发布到npm 安装: $ npm i vue3-lazyload # or $ yarn add vue3-lazyload 需求分析 支持自定义 loading 图片,图片加载状态时使用此图片 支持自定义 error 图片,图片加载失败后使用此图片 支持 lifecycle hooks,类似于 vue 的生命周

Vue 使用typescript如何优雅的调用swagger API

Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务,后端集成下Swagger,然后就可以提供一个在线文档地址给前端同学. 前端如何优雅的调用呢? 入门版 根据文档,用axios自动来调用 // 应用管理相关接口 import axios from '../interceptors.js' // 获取应用列表 export const getList = (data) => { return axios({ url: '/app/list?s

详解Vue3.0 + TypeScript + Vite初体验

项目创建 npm: $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev or yarn: $ yarn create vite-app <project-name> $ cd <project-name> $ yarn $ yarn dev 项目结构 main.js 在个人想法上,我觉得createApp()是vue应用的实例,createApp

vue中使用TypeScript的方法

引言 近几年前端对 TypeScript的呼声越来越高,Typescript也成为了前端必备的技能.TypeScript 是 JS类型的超集,并支持了泛型.类型.命名空间.枚举等特性,弥补了 JS 在大型应用开发中的不足. 在单独学习 TypeScript时,你会感觉很多概念还是比较好理解的,但是和一些框架结合使用的话坑还是比较多的,例如使用 React.Vue 这些框架的时候与 TypeScript 的结合会成为一大障碍,需要去查看框架提供的.d.ts的声明文件中一些复杂类型的定义.组件的书写

Vue3+TypeScript封装axios并进行请求调用的实现

不是吧,不是吧,原来真的有人都2021年了,连TypeScript都没听说过吧?在项目中使用TypeScript虽然短期内会增加一些开发成本,但是对于其需要长期维护的项目,TypeScript能够减少其维护成本,使用TypeScript增加了代码的可读性和可维护性,且拥有较为活跃的社区,当居为大前端的趋势所在,那就开始淦起来吧~ 使用TypeScript封装基础axios库 代码如下: // http.ts import axios, { AxiosRequestConfig, AxiosRes

Vue新搭档TypeScript快速入门实践记录

目录 1. 使用官方脚手架构建 2. 项目目录解析 3. TypeScript极速入门 3.1 基本类型和扩展类型 3.2 泛型:Generics 3.3 自定义类型:Interface vs Type alias 3.4 实现与继承:implements vs extends 3.5 声明文件与命名空间:declare 和 namespace 3.6 访问修饰符:private.public.protected 3.7 可选参数 ( ?: )和非空断言操作符(!.) 4. Vue组件的Ts写法

Vue-cli3项目引入Typescript的实现方法

前言 假设已经有一个通过 vue-cli3 脚手架构建的 vue 项目 命令行安装 Typescript npm install --save-dev typescript npm install --save-dev @vue/cli-plugin-typescript 编写 Typescript 配置 根目录下新建 tsconfig.json,下面为一份配置实例(点击查看所有配置项).值得注意的是,默认情况下,ts 只负责静态检查,即使遇到了错误,也仅仅在编译时报错,并不会中断编译,最终还是

vue element项目引入icon图标的方法

为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库. 因为阿里巴巴海量的图标,所以决定引入阿里巴巴的图标库 阿里巴巴图标网站: http://www.iconfont.cn/ 下面具体介绍如何使用 1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建. 2.点击添加到项目后,选中第二个 3.点击更多操作里面的

vue cli4.0项目引入typescript的方法

现有的项目是采用vue cli4.0脚手架生成的,现在想要引入typescript. 1.执行安装命令 npm install --save-dev typescript npm install --save-dev @vue/cli-plugin-typescript 2.根目录下新建 tsconfig.json { "compilerOptions": { "target": "esnext", "module": &qu

vue项目引入字体.ttf的方法

1.下载所需要的字体,.ttf格式本文以(FZCYJ.ttf 为例) 2.在src下新建common文件,文件夹中包含以下文件 3.打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; } 4.配置webpack.base.conf.js 文件 5.App.vue引入字体 6.可在body中设置字体

vue@cli3项目模板怎么使用public目录下的静态文件

作为图片最好放在static目录下,但是vue@cli3没有static,网上都说放在public目录下,行,那就放吧,可问题是图片放了怎么使用 第一次尝试 肯定用绝对路径这就不说了,用相对路径,webpack会解析成base64,可是绝对路径怎么输都不对,咋回事 后面看网上说把前面路径下的public路径去掉,好,开发环境没问题了,可打包报错怎么办,就这个我研究了好久. 解决问题 网上一大堆牛头不对马嘴的,我也是无语了 最后的最后,终于官网找到了完美的解决方案 如此设置,完美解决问题,如果你留

vue cli3.0 引入eslint 结合vscode使用

它的目标是提供一个插件化的javascript代码检测工具.官网地址 最近一个项目里,最开始使用 cli3.0 搭建的时候没有默认选用 eslint ,导致现在有的人使用其他编辑器,就会出现格式错乱的情况.所以引入 eslint 做代码检测 第一步 (安装) npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev 引入关于 eslint 的一些依赖 当你的 pac

Vue CLI3中使用compass normalize的方法

normalize:统一了基本的样式,如margin: 0;(类似compass中的reset模块) compass:对sass的封装,扩展 1.安装 npm i normalize.css compass-mixins --save-dev 1.1 normalize.cssx引用 在main.js中 import 'normalize.css' 这样就完成了引用,F12,查看 body { margin: 0; // 如果是0则说明normalize已经起作用 } 2.1 compass引用

在vue项目中引入highcharts图表的方法(详解)

npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

详解Vue项目引入CreateJS的方法(亲测可用)

1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 包含4类工具库 EaselJS

Vue项目中引入外部文件的方法(css、js、less)

这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font