欢迎来到我专题文章【typescript】,更多干货内容持续分享中,敬请关注!
![65e478b1c21b0839b9c75774e2490dc9.png](https://i-blog.csdnimg.cn/blog_migrate/dab5c105070b9259a6be41a0cb700820.jpeg)
本章目标
- 基于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的编译配置,如下:
![156308ae30db70c2fbbac5ff10936052.png](https://i-blog.csdnimg.cn/blog_migrate/c50830f91d18d51138deb69b717854fb.jpeg)
很简单的配置,不再过多赘述了
到这里,我们的开发环境就配置好了,接下来我们来打包看下效果
![23f1eb4d18c299469a08305fc43e50e8.png](https://i-blog.csdnimg.cn/blog_migrate/0bf921055aaba8f5b552c5791973a721.jpeg)
这是index.ts中的内容
![63b03f205fe675536d9f3ddd36e14633.gif](https://i-blog.csdnimg.cn/blog_migrate/92048522714e8d742ce3abc47368d9cc.gif)
编译成功,然后通过node去执行了打包后的文件,环境配置完成!
ts中的装饰器的基本使用
环境配置完后以后,我们再来看看ts中的装饰器。先来看下什么是装饰器?
顾名思义,装饰器就是用来修饰其它的事物的。
在ts中,装饰器就是函数,它可以用来装饰类。类的属性,方法以及方法的参数等。这样说好像有点抽象,没关系,我先来举个栗子
![62437fce6d337f3cf95d0fbebb005528.png](https://i-blog.csdnimg.cn/blog_migrate/be714ac4d85045e8a1f556e89308f98b.jpeg)
我们先来申明一个装饰器。
![0ae8247d8932b2199eb9df270eb52b1b.gif](https://i-blog.csdnimg.cn/blog_migrate/18a8fa4dd61995a9ba4759b52467037d.gif)
这里要注意的是ts中默认不支持装饰器的语法解析,我们需要手动更新其配置文件tsconfigs.json
我们需要将experimentalDecorators设置为true,默认被注释掉了,只需要将注释去掉即可。
申明了一个say的装饰器,然后我将它修饰在一个类上面,注意,我们通过 @+装饰器名 直接加在类的前面即可。最后在执行的时候,我们打印了装饰器中的第一个参数target。结果是[Function Person]
说明了,当前的装饰器中的第一个参数target 就是我们的要修饰的类对象。
一、装饰器传参和应用
要想让装饰器能够传参,我们在定义装饰器的时候,内部必须是返回一个函数。像这样
![c84fb2ca96c678945bcb0556a8d606f1.png](https://i-blog.csdnimg.cn/blog_migrate/d9911789564d52e933b8409fb29a3fb8.jpeg)
调用:
![d47a8bbbc6a1449029a401a5d7d11a80.png](https://i-blog.csdnimg.cn/blog_migrate/7c02b73f8b8fef8ac7e4eef5bdafb85e.jpeg)
注意,这里调用的时候我们传入了hello ts 参数,我们在装饰器函数内部可以接收到这个函数。传参的目的达到了。
我们在Person类中并没有定义name属性,我们接下来打印一下最终的结果
![7451dc13aaa3c091e248ef8c5a20d562.gif](https://i-blog.csdnimg.cn/blog_migrate/983370a9ad304071c4665f9204ff10d0.gif)
从执行结果可以看出来,最终打印出来了 hello ts , 它是我们通过装饰器传入的,在装饰器内部,我们给类的原型对象上添加了一个name属性,并且赋值为我们传入的参数 。
也就是说:我们可以不改变类的内部代码逻辑,通过装饰器可能实现动态修改类的内部逻辑
同样的道理,我们也可以在装饰器中去重写类的方法成员
二、属性装饰器
和类的装饰器一样,通过函数的方式去申明,只不过我们需要将装饰器加在对应的属性上面
![1332e16fdc218267955f158aaa680154.png](https://i-blog.csdnimg.cn/blog_migrate/fbc3cf0114e3383fbeefee27c4c36c44.jpeg)
我们接下来打印一下这几个参数
![426ff248cf4e064c348570b9dc4b547d.png](https://i-blog.csdnimg.cn/blog_migrate/b5a7a635268ea751ea077d5032d69317.jpeg)
- params是我们动态传入的装饰器的参数
- target是我们修饰的属性对象
- attr是我们要修饰的属性名
最后我们可以通过
target[attr] = params;
来改变类的属性值
![f4b421e48f8fdd7fb750e29aa8c63ccc.gif](https://i-blog.csdnimg.cn/blog_migrate/4616f5b69eb7e094ac323e185c6ffcd8.gif)
可以看到我们已经通过装饰器修改了类的属性。
总结:
- 如何从0-1配置webpack编译ts的项目
- ts中的使用装饰器需要修改默认配置
- 类装饰器和属性装饰器的基本用法和传参
这里是【畅哥聊技术】的typescript专题系列。更多内容持续更新中。