深入理解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中的更多细节