• ts装饰器基本的用法,并使用装饰器完成@Controller等装饰器,简化路由开发


    TS

    TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类	型和基于类的面向对象编程。
    TypeScript 扩展了 JavaScript 的句法,所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作。	TypeScript 是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性。
    这段是我在网上扒下来的
    

    为什么要用TS对express进行封装呢?

    主要是为了用ts里面的装饰器,虽然装饰器已经是es7里面的一个提案了,但是在js里面
    使用的话还需要用babel进行配置(太麻烦了,图省事所以用Ts)
    

    我们先来了解一下什么是装饰器

    装饰器(Decorator) 仅提供定义劫持,能够对类及其方法、方法入参、属性的定义
    并没有提供任何附加元数据的功能。
    主要是为了提供附加的功能
    

    那么TS里面的装饰器如何使用呢

    //需要在tsconfig开启装饰器
    {
    	"compilerOptions": {
        	"experimentalDecorators": true
    	}
    }
    
    二话不说npm一把梭
    npm init -y //使用默认配置
    npm i typescript -S //安装ts包
    tsc --init //初始化ts配置
    mkdir src //创建src目录
    mkdir decorators //创建装饰器目录
    touch common.ts //创建common 用于辨析而装饰器
    touch index.ts //创建index文件
    到此为止已经搭建了项目的基本架构
    

    接下来我们介绍一下TS里面有那些类型的装饰器

    类装饰器

    应用于类的构造函数
    参数:target (类)
    写法:function classDecorators(target:any){
    	//我们在这个地方来对象进行操作
        //比我我们给类里面的原型加一点东西
        target.prototype.usernmae='沉默'
    }
    

    属性装饰器

    应用于属性上面的装饰器
    参数:targte (类),name(当前属性的名字)
    写法:
    
    function attrDecorators(target:any,name:string){
        target[name]=150 //我们给当前属性赋了一个值
    }
    

    方法装饰器

    应用于方法上面的装饰器
    参数:targte (类),name(当前方法的名字),descriptor (当前方法的描述对象)
    写法:
    
    function funcDecorators(target:any,name:string,descriptor:PropertyDescriptor){
        //我们在这个装饰器里面来写一些,在每次执行的时候打印一个时间
        let origin=descriptor.value;//这个就是当前方法的内容,我们给他保存起来
        descriptor.value=function(){
            console.log(new Date())
            //执行我们保存的那个方法 arguments是传进来的那些参数
            return origin.apply(this,arguments)
        }
        return descriptor
    }
    

    方法参数的装饰器

    应用于方法参数上面的装饰器
    参数:target(类),name(当前参数方法的名称),index(按当前参数的在形参列表里面的索引值)
    
    function paramDecorators(target:any,name:string,index:number){
    	//这个装饰器也没有上面例子好举了
    }
    

    这是我们讲的ts的装饰器,我们一起加在一个类上面,来看看他的执行顺序是上面样的


    我们可以看到先走的是属性的装饰器,之后是参数在是方法然后是类

    我看别人的装饰器里面都能传值,为什么我看你这个不能呢!

    不要着急,马上就会讲到,TS里面还有一个叫装饰器工厂的装饰器就是用来完成这个工作的。
    装饰器工厂的定义方法就是返回的是一个方法
    来看例子
    
    function classDesc(path:string){
      //这就是一个装饰器工厂,上面的path就是你可以传进来的值
      console.log(path,'class')
      return (target:any)=>{
          console.log(typeof target,'class')
      }
    }
    
    其他类型的装饰器的写法也都类似与这样,只不过是参数不一样
    

    接下来我们讲讲js里面的元数据

    元数据即为描述数据的数据,也有个称呼叫
    注解(Annotation) 仅提供附加元数据支持,并不能实现任何操作。需要另外的 Scanner 根据元数据执行相应操作。
    但是我一听到注解就像Java里面的东西
    总而言之,装饰器和注解是不一样的,我上面有讲过装饰器的概念,主要是为了提供附加功能,注解不提供这些,它只提供元数据的支持,不能操作任何东西,所以只能根据元数据来实现具体的操作。
    

    知道元数据之后我们就可以来封装标题上面所讲的装饰器了,封装那些需要用到

    我们最终会是实现这些装饰器
    Controller Get Post Body Query 等
    之前我们以及创建了common.ts文件,那么就在这里先创建第一个装饰器(Controller)
    
    const PATH_METADETA='path';
    const PATH_METADETA = "path";
    const PARAMS_METADETA = "params";
    function Controller(path:string):ClassDecorator{
    	//创建装饰器工厂,可以用来接收参数,上面以及讲过了
      return (target)=>{
      	/*
          给当前类添加一个元数据
          Reflect.defineMetadata用来添加元数据,总共有四个值第一个是key,唯一的,
          第二个是值,第三个是当前对象,第四个是方法名,但我们当前只给类设置元数据,就不需要
          填方法
          为什么要设置元数据呢,装饰器本来就是用来扩展方法的,但是他是用来对本方法进行扩展的,
          在此装饰器里面我们拿不到,具体的数据,所以我们用元数据去设置具体的数据,在其他地方进行
          通用的注册使用,这个装饰器的作用就是用设置元数据的(我也不知道这样讲能不能明白:))
          */
      	Reflect.defineMetadata(PATH_METADETA, path, target);//当前装饰器传过来
          //的数据给设置进入了类的元数据里面了,日常的时候这个类并不影响我们的使用
      }
    }
    //我们需要编写Post Get 这些的方法,本质上这些方法除了Post,Get这些不一样,传过来的东西都
    //是一样的
    function createdMethod(methods: string) {
      return (path: string): MethodDecorator => {
        return (target: any, key: string | symbol, descriptor: any) => {
          //给当前方法设置了一个
          Reflect.defineMetadata(PATH_METADETA, path, target, key);
          //添加方法元数据,描述当前方法为什么方法
          Reflect.defineMetadata(METHOD_METADETA, methods, target, key);
        };
      };
    }
    
    目前我们先写这两个装饰器,之后在写params的装饰器
    

    装饰器虽然是写好了

    但是我们在那里去用呢,不会这么简单吧。
    当然不会那么简单,我们现在还需要一个注册的地方,我们需要让express拿到装饰器装饰上去的
    元数据。
    
    我们在decorators里面在建一个文件 叫	register.ts 用来注册我们装饰的类
    下面是代码
    
    import {Router} from 'express';
    function register(app:any,controller:Array<any>){
    	const router=Router();
     	controller.forEach((v:any)=>{
             //这个v就是类
             //获取当前类key为path的元数据 也就是之前我们装饰器设置的值
             let classPath=Reflect.getMetadata('path',v);
             //遍历当前属性,查询当前类属性上面有哪些元数据
             for(const key in new v()){
             	//这个getMetadata里面的key是当前遍历的方法的名称
                 //也就拿到当前方法设置的元数据
                 let attrMethod = Reflect.getMetadata('method', new v(), key);
                 let attrPath = Reflect.getMetadata('path', new v(), key);
                 //我们在定义一个回调方法,这个就是express的回调方法
                 let fn:any=(req,res,next)=>{
                 	//我们先把我们当前的方法给执行一下,在传两个参数(这个方法就是@Post@Get这个中下面的方法)
                   let result=new v()[key].apply(new v(),[req,res]);
                   if (result instanceof Promise) {
                   	result.then(value => {
                   		!res.headersSent && res.send(value);
                   	}).catch(err => {
                   		next(err)
                   	})
                   } else if (result !== undefined) {
                   		!res.headersSent && res.send(result);
                   }
                     
                 }
                 //组装一下路由的路径
                 let routerParams = [classPath + attrPath]
                 //在添加回调
                 routerParams.push(fn)
                 //去调用router方法
                 router[attrMethod].apply(router, routerParams)
             }
             //用来解决body
             app.use(bodyParser.json())
             app.use(bodyParser.urlencoded({ extended: false }))
             app.use(router)//使用路由
     	})
    }
    
    在index.ts 里面启动express并注册,我们的装饰器应该就能和router联动起来了
    
      register(app,[UserController]);
    
      var server = app.listen(3122, function () {
          var host = server.address().address;
          var port = server.address().port;
          console.log('Example app listening at http://%s:%s', host, port);
      })
    
    自此也就算是写完了!我也是研究了一下午,看了github上面的一些主流的框架的源码,剥离出来的简单的版本
    
    我也是一个没干多久小菜鸟,希望这个篇文]章对你们有所帮助
    我自己写的那个项目在[github](https://github.com/mrzhouxl/express-decorator)
  • 相关阅读:
    LAMP 环境搭建备忘 -- Linux的安装(一)
    Qt 的一些浅知识点
    chm 转 txt
    SQL 语句 (二) --- SELECT
    SQL语句 (一)
    量子电路
    量子隐形传态 Quantum Teleportation
    量子逻辑门
    量子纠缠2——CHSH不等式
    量子纠缠1——量子比特、Bell态、EPR佯谬
  • 原文地址:https://www.cnblogs.com/silentCM/p/14509664.html
Copyright © 2020-2023  润新知