深入理解Vue中的Typescript(一)-es语法的类属性和装饰器

深入理解Vue中的Typescript(一)-es语法的类属性和装饰器

1.前言

typescript是javascript超集,能帮助程序员写出更好的,更不容易出错的javascript代码.所以越来越受到各大公司的欢迎.当vue拥抱typescript后,写出的vue代码会更加得符合面向对象编程的风格,更符合未来的es语法的规范,因此vue3.0选用语言就是typescript

在我们学习typescript下的vue前,我们不妨对比下vue2.x当中,不用typescript和用typescript的区别

想查看更多的文章请关注公众号：IT巡游屋

1.1不用TS

<template>
    <div>
    	<button @click="handleClick">{{count}}</button>
        <hello-world></hello-world>
    </div>
</template>
<script>
import HelloWorld = from './HelloWorld.vue'
export.default {
    components: {
        'hello-world': HelloWorld
    },
	data(){
        return {
        	count: 0    
        }
    },
    created(){
      	this.count = 1  
    },
    methods: {
        handleClick(){
        	this.count++
        }    
    }
}
</script>

1.2用TS

<template>
    <div>
    	<button @click="handleClick">{{count}}</button>
        <hello-world></hello-world>
    </div>
</template>
<script>
import Vue from 'vue'
import Component from 'vue-class-component'    
import HelloWorld = from './HelloWorld.vue'
    
@Component({
    components: {
        'hello-world': HelloWorld
    }    
})
export default class Counter extends Vue {
    count = 0   
    created(){
      	this.count = 1  
    },
    handleClick(){
        this.count++
    }
}
</script>

上面的两种写法中,第2种用TS的方式和第1种不用TS的区别有

(1)通过extends vue采用定义类的方式生成组件

(2)少了data,methods属性,采用直接在类上定义变量和方法的方式

(3)vue其他的配置通过@Component({...})方式定义

从上面的3个区别看出,用typescript方式,更像是在javascript类定义基础进行扩展,用到更多的es语法规范,

接下来,我逐步分享这个3个区别中涉及到技术点

2.概述

在弄清楚用上面第2种typescript方式具体含义之前,我们得明白一个问题,上面3个区别点,体现语法特点,是属于vue?还是属于typescript?还是属于es语法?答案是属于es语法,也就是不用typescript,我们也可以怎么定义类,只是用了typescript我们还可以再上述代码的基础上,做得更多,做得更好,为了更好的学习后面的知识,我们有必要先来了解目前遇到的es语法标准-类属性和装饰器,要注意的是,截止目前为止,这两个语法标准,都还是试验性标准,还没成为正式标准

3.类属性

3.1含义

回顾e6标准,给类定义变量的方式如下

class Person {
    constructor() {
    	name = '张三';//类实例的变量    
    }
}
Person.type = '哺乳类';//类的静态变量

使用类变量的语法后,上面代码可以写成

class Person {
    name = '张三';//类实例的变量
	static type = '哺乳类';//类的静态变量
}

通过类变量语法定义的类,语法上要更加的简洁,好写,好读

3.2 测试

接下来,我们来写下代码,测试下类变量语法的效果,因为这是高级的es语法,我们需要通过babel做语法上的转换成低版本的es语法,才可以执行,下面是测试的步骤和相关命令和代码

(1)安装babel

打开终端，输入命令：

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

安装完毕之后，再次输入命令安装：

npm install --save @babel/polyfill

(2)安装babel插件

再次输入命令安装：

npm install --save-dev @babel/plugin-proposal-class-properties

(3)创建babel.config.js

在项目目录中创建babel.config.js文件。
编辑js文件中的代码如下：

const presets = [
    ["@babel/env",{
        targets:{
            edge:"17",
            firefox:"60",
            chrome:"67",
            safari:"11.1"
        }
    }]
]
const plugins = [
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
]
module.exports = { presets, plugins }

(4)创建index.js

class Person {
    name = '张三';//类实例的变量
	static type = '哺乳类';//类的静态变量
}
let p = new Person
console.log(p.name)
console.log(Person.type)

(5)使用npx执行文件

打开终端，输入命令：

npx babel-node ./index.js

4.装饰器

4.1 含义

装饰器是通过注释修改类和类的方法,同时这个修改是发送在代码编译阶段,而不是发生在运行阶段,例如下面是最简单的装饰器用法,给MyClass类添加静态属性annotated

@annotation
class MyClass { }

function annotation(target) {
   target.annotated = true;
}

MyClass.annotated //true

如果用es5的语法,上面的语句可以写成

class MyClass { }

function annotation(target) {
   target.annotated = true;
}
annotation(MyClass)

MyClass.annotated //true

前面的例子是为类添加一个静态属性，如果想添加实例属性，可以通过目标类的prototype对象操作

@annotation
class MyClass { }

function annotation(target) {
   target.prototype.annotated = true;
}

var my = new MyClass()
my.annotated //true

同时装饰器可以接受参数,例如下面例子

@annotation({
    isTestable: true
})
class MyClass { }

function annotation(options) {
  	return function(target) {
    	target.isTestable = options.isTestable;
	}
}

MyClass.isTestable //true

4.2 测试

接下来,我们来写下代码,测试下装饰器语法的效果,因为这是高级的es语法,我们需要通过babel做语法上的转换成低版本的es语法,才可以执行,下面是测试的步骤和相关命令和代码

(1)安装babel

打开终端，输入命令：

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

安装完毕之后，再次输入命令安装：

npm install --save @babel/polyfill

(2)安装babel插件

再次输入命令安装：

npm install --save-dev @babel/plugin-proposal-decorators

(3)创建babel.config.js

在项目目录中创建babel.config.js文件。
编辑js文件中的代码如下：

const presets = [
    ["@babel/env",{
        targets:{
            edge:"17",
            firefox:"60",
            chrome:"67",
            safari:"11.1"
        }
    }]
]
const plugins = ["@babel/plugin-proposal-decorators"]
module.exports = { presets, plugins }

(4)创建index.js

@annotation({
    isTestable: true
})
class MyClass {}

function annotation(options) {
  	return function(target) {
    	target.isTestable = options.isTestable;
        target.prototype.annotated = true;
	}
}

let my = new MyClass() 
console.log(MyClass.isTestable)
console.log(my.annotated)

(5)使用npx执行文件

打开终端，输入命令：

npx babel-node ./index.js

5.预告

弄清楚这两个高级的es的语法之后,接下来看下vue-class-component这个项目和typescript在vue中的更多细节