js 装饰器_typescript专题(五) 装饰器

欢迎来到我专题文章【typescript】，更多干货内容持续分享中，敬请关注！

本章目标

• 基于webpack4.x从0开始搭建ts的开发环境
• ts中的装饰器的基本使用

基于webpack4.x从0开始搭建ts的开发环境

webpack4.x已经问世好久了，0配置是一大亮点，but，在配置ts的开发环境时，才明白这就只是一个噱头而已。下我们一步步的来搭建我们的项目吧

一、创建工程目录和基本目录

mkdir ts

cd ts

初始化项目目录后，我们需要初始化我们的项目配置文件package.json文件。我们在ts目录下运行

npm init -y

后会生成一个默认的package.json配置文件。

接下来，我们创建ts的配置文件，tsconfig.json，我们运行

tsc --init

即可，在package.json相同目录会生成一个tsconfig.json文件，这里面默认是对ts的基本配置。

两个配置文件完成了以后，我们创建一个src目录

mkdir src

cd src

这里创建了ts的工程目录，以及webpack4.x默认的目录src,在src中，我们创建一个index.ts文件，注意这里是.ts文件哦，它将将是我们的程序的主入口文件

二、安装依赖和基本配置

我们要编译ts，我们需要在当前目录下安装typescript 、ts-loader和webpack

cnpm install typescript ts-loader webpack -D

安装完成后，我们还不能直接运行webpack命令，因为webpack默认会去找src下的index.js文件为入口文件，而我们创建的是ts文件，并且我们需要手动配置我们的ts-loader

创建webpack.config.js文件。

手动指定我们的入口文件

entry : './src/index.ts'

同时，我们需要将.ts结尾的文件通过ts-loader来处理它。我们需要在module下配置ts的编译配置，如下：

很简单的配置，不再过多赘述了

到这里，我们的开发环境就配置好了，接下来我们来打包看下效果

这是index.ts中的内容

编译成功，然后通过node去执行了打包后的文件，环境配置完成！

ts中的装饰器的基本使用

环境配置完后以后，我们再来看看ts中的装饰器。先来看下什么是装饰器？

顾名思义，装饰器就是用来修饰其它的事物的。

在ts中，装饰器就是函数,它可以用来装饰类。类的属性，方法以及方法的参数等。这样说好像有点抽象，没关系，我先来举个栗子

我们先来申明一个装饰器。

这里要注意的是ts中默认不支持装饰器的语法解析，我们需要手动更新其配置文件tsconfigs.json

我们需要将experimentalDecorators设置为true,默认被注释掉了，只需要将注释去掉即可。

申明了一个say的装饰器，然后我将它修饰在一个类上面，注意，我们通过 @+装饰器名 直接加在类的前面即可。最后在执行的时候，我们打印了装饰器中的第一个参数target。结果是[Function Person]

说明了，当前的装饰器中的第一个参数target 就是我们的要修饰的类对象。

一、装饰器传参和应用

要想让装饰器能够传参，我们在定义装饰器的时候，内部必须是返回一个函数。像这样

调用：

注意，这里调用的时候我们传入了hello ts 参数，我们在装饰器函数内部可以接收到这个函数。传参的目的达到了。

我们在Person类中并没有定义name属性，我们接下来打印一下最终的结果

从执行结果可以看出来，最终打印出来了 hello ts , 它是我们通过装饰器传入的，在装饰器内部，我们给类的原型对象上添加了一个name属性，并且赋值为我们传入的参数 。

也就是说：我们可以不改变类的内部代码逻辑，通过装饰器可能实现动态修改类的内部逻辑

同样的道理，我们也可以在装饰器中去重写类的方法成员

二、属性装饰器

和类的装饰器一样，通过函数的方式去申明，只不过我们需要将装饰器加在对应的属性上面

我们接下来打印一下这几个参数

• params是我们动态传入的装饰器的参数
• target是我们修饰的属性对象
• attr是我们要修饰的属性名

最后我们可以通过

target[attr] = params;

来改变类的属性值

可以看到我们已经通过装饰器修改了类的属性。

总结：

1. 如何从0-1配置webpack编译ts的项目
2. ts中的使用装饰器需要修改默认配置
3. 类装饰器和属性装饰器的基本用法和传参

---

这里是【畅哥聊技术】的typescript专题系列。更多内容持续更新中。