什么是Typescript

TypeScript 是一种由微软开发的自由和开源的编程语言,它是 JavaScript 的一个超集,扩展了 JavaScript 的语法。作者是安德斯大爷, Delphi、C# 之父(你大爷永远是你大爷)。把弱类型语言改成了强类型语言,拥有了静态类型安全检查, IDE 智能提示和追踪,代码重构简单、可读性强等特点。

现在VUE 也支持了 TypeScript ,面对安德斯大爷放出的这些大招,果断用之。

安装使用

使用 vue-cli 创建项目的时候 选择Typescript就行了,

注意下几个配置文件



tsconfig.json

{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}

tslint.json

{
"defaultSeverity": "warning",
"extends": [
"tslint:recommended"
],
"linterOptions": {
"exclude": [
"node_modules/**"
]
},
"rules": {
"quotemark": [true, "single"],
"indent": [true, "spaces", 2],
"interface-name": false,
"ordered-imports": false,
"object-literal-sort-keys": false,
"no-consecutive-blank-lines": false,
"no-console": false, //允许使用console
"member-access": [true, "no-public"], //禁止指定公共可访问性,因为这是默认值
// "noImplicitAny": false, //允许参数而不声明其类型
"one-variable-per-declaration": false, //允许在同一声明语句中使用多个变量定义
"no-unused-expression": [true, "allow-fast-null-checks"], //允许使用逻辑运算符执行快速空检查并执行副作用的方法或函数调用( 例如e && e.preventDefault())
"curly": [true, "ignore-same-line"],
"arrow-parens": [true, "ban-single-arg-parens"],
"semicolon": [true, "never"],//是否提示不必要的分号
"trailing-comma": [
true,
{
"multiline": {
"objects": "ignore",
"arrays": "ignore",
"functions": "ignore",
"typeLiterals": "ignore"
},
"esSpecCompliant": true
}
]
}
}

重要的是怎么在项目中使用Typescrit写法

1:安装npm install --save vue-property-decorator

此类库提供了7个装饰器

  • @Emit
  • @Inject
  • @Model
  • @Prop
  • @Provide
  • @Watch
  • @Component

    实现生成像原生 JavaScript class 那样的声明组件。

下面分别给出实例解释其用法:

  • @Component

    组件声明

    原生写法
import UploadImage from '@/components/UploadImage'

export default {
name: 'user',
components: { UploadImage },
data() {
return {
name:"张三",
sex: '男'
}
},
methods: {
funcA(params) {},
funcB() {}
}
}

使用Ts中写法

import UploadImage from '@/components/UploadImage'
import { Component, Vue, Provide } from 'vue-property-decorator' @Component(name:"user",components:{UploadImage})
export default class user extends Vue{
private name:string="张三"
private sex:string="男" private funcA(params:any){}
private funcB(){}
}

其中使用 @Component 声明了 user组件 ,同时引用 子组件 UploadImage,写在 Components 参数中。

  • @Prop

    属性声明 在自定义组建中使用

    原生写法
export default{
name:"upload",
props:{
value:{
type:String,
default:''
}
}
}

在ts中写法

@Component()
export default class upload extends Vue{
@Prop()
private value:string='';
}
  • computed

    计算属性

    这个很类似于c#中的 属性概念,属性值本身可以通过计算得出。

原生写法

computed: {
imageUrl() {
return 'http://xxxx.xxxx.com/' + this.value;//value是定义的一个字段
}
},

在ts中写法

get imageUrl(){
return 'http://xxxx.xxxx.com/' + this.value;//value是定义的一个字段
} template 中一样使用{{imageUrl}}
  • @watch

    用来监测Vue实例上的数据变动

    如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项。
  export default {
name: 'index',
data() {
return {
demo: {
name: ''
},
value: ''
};
},
computed: {
newName() {
return this.demo.name;
}
},
watch: {
newName(val) {
this.value = val;
}
}
};

ts写法

export default class index extends Vue{
demo:any={name:''};
value:string=''; get newName(){
return this.demo.name;
} @watch('wnewName')
wnewName(val){
this.value=val;
}
}
  • emit

    我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!

每个 Vue 实例都实现了事件接口(Events interface),即:

-   使用 $on(eventName) 监听事件
- 使用 $emit(eventName)触发事件
Vue.component('counter', {
template: `
<button v-on:click="increment">{{ counter }}</button>`,
data() {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('increment')
}
},
}); new Vue({
el: '#example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
}) <div id="example">
<p>{{ total }}</p>
<counter v-on:increment="incrementTotal"></counter>
</div>

子组件自定义了个事件,然后把这个事件发射出去,父组件使用这个事件

vue-property-decorator vue typescript写法的更多相关文章

  1. [Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript

    Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as for ...

  2. 用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象

    用TypeScript开发Vue--如何通过vue实例化对象访问实际ViewModel对象 背景 我个人很喜欢TypeScript也很喜欢Vue,但在两者共同使用的时候遇到一个问题. Vue的实例化对 ...

  3. 如何在Vue项目中使用Typescript

    0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新 ...

  4. Property 'validate' does not exist on type 'Element | Element[] | Vue | Vue[]'. Property 'valid...

    使用vue-cli 3.0+Element-ui时候,调用form表单校验时候出现的问题是: Property 'validate' does not exist on type 'Element | ...

  5. vue cli4构建基于typescript的vue组件并发布到npm

    基于vue cli创建一个vue项目 首先安装最新的vue cli脚手架, npm install --global @vue/cli npm WARN optional SKIPPING OPTIO ...

  6. Vue项目中应用TypeScript

    一.前言 与如何在React项目中应用TypeScript类似 在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, 其是基于vue-class-c ...

  7. 使用@vue/cli搭建vue项目开发环境

    当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js  vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...

  8. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  9. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

随机推荐

  1. springboot整合websocket高级版

    目录 sockjs介绍 产生的原因 环境搭建 springboot整合sockjs 使用场景 聊天室开发 点对点通信 群聊 效果 总结 加入战队 微信公众号 上一章节我们说了websocket的优缺点 ...

  2. 《机器学习技法》---soft-margin SVM

    1. soft-margin SVM的形式 其中ξn表示每个点允许的犯错程度(偏离margin有多远),但是犯错是有代价的,也就是目标函数里面要最小化的.c控制对犯错的容忍程度. 2. 推导soft ...

  3. 帝国CMS(EmpireCMS) v7.5 代码注入分析(CVE-2018-19462)

    帝国CMS(EmpireCMS) v7.5 代码注入分析(CVE-2018-19462) 一.漏洞描述 EmpireCMS7.5及之前版本中的admindbDoSql.php文件存在代码注入漏洞.该漏 ...

  4. GoAccess 分析 Nginx 日志

    0x00 事件 帮助朋友搭建了博客,运行过了一段时间,准备发个网站分析报告给他. 有效的数据只有 Nginx 的访问日志,于是使用决定 GoAccess 工具对这个日志进行分析, 0x01 安装 吾使 ...

  5. 颜色下拉菜单(combox)

    using System; using System.Drawing; using System.Collections; using System.ComponentModel; using Sys ...

  6. python学习笔记(2)--列表、元组、字符串、字典、集合、文件、字符编码

    本节内容 列表.元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 1.列表和元组的操作 列表是我们以后最长用的数据类型之一,通过列表可以最方便的对数据实现最方便的存储.修改等操作 定 ...

  7. centos6.8启动防火墙的艰辛过程

    首先我的/etc/sysconfig/iptables文件没有. 解决办法: 1.任意运行一条iptables防火墙规则配置命令: iptables -P OUTPUT ACCEPT 2.对iptab ...

  8. ionic 删除返回按钮文字,及自定义nav两侧的按钮和title格式

    1.删除返回按钮文字 1)可以在app.js进行配置 .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) ...

  9. abp(net core)+easyui+efcore实现仓储管理系统——菜单 (十六)

    系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二) ...

  10. JavaScript String 小球重力弹回

    JavaScript String 小球重力弹回 <!DOCTYPE html> <html lang="en"> <head> <met ...