Typescript 装饰器和反射

最新推荐文章于 2024-10-06 22:50:02 发布
最新推荐文章于 2024-10-06 22:50:02 发布
阅读量3.1k 收藏 6
点赞数
分类专栏： 前端学习 文章标签： typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1369508468/article/details/118959620
版权

装饰器

装饰器（也叫注解）对一个类/方法/属性/参数的装饰。它是对这一系列代码的增强，并且通过自身描述了被装饰的代码可能存在行为改变。

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。 装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。

装饰器分为：类装饰器、方法装饰器、属性装饰器、参数装饰器

要使用装饰器需要在tsconfig.json中配置：

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true
    }
}

一个简单的示例：

在一个User类中含有一个changeName方法，在调用方法前，需要调用validate方法进行校验，此种方式缺点：侵入了changeName主流程代码，并且耦合性提高

class User {
    name: string;
 
    id: number;
 
    constructor(name: string, id: number) {
        this.name = name;
        this.id = id;
    }
 
    public validate(newName: string) {
        if (!newName) {
            throw Error("name is invalid");
        }
    }
 
    public changeName(newName: string) {
        this.validate(newName)
        this.name = newName;
    }
}

借助装饰器可以进行以下改造，不侵入代码，降低耦合度

const validate = (target: any,propertyKey: string,descriptor: PropertyDescriptor) => {
    let method = descriptor.value;
    descriptor.value = function(newValue: string) {
        if (!newValue) {
            throw Error("name is invalid");
        } else {
            method.apply(this, arguments)
        }
    }
}
class User {
    name: string;
 
    id: number;
 
 
    constructor(name: string, id: number) {
        this.name = name;
        this.id = id;
    }
 
    public validate(newName: string) {
        if (!newName) {
            throw Error("name is invalid");
        }
    }
 
    @validate
    public changeName(newName: string) {
        this.name = newName;
    }
}

装饰器工厂 - 可以传参的装饰器

function print(msg: string) {
    return function(traget: string, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log(`msg: ` + msg)
    }
}
class User {
    @print('getName evaluated')
    public getName () {
        return 'name'
    }
}
 
// 调用getName时会输出: getName evaluated
类装饰器

类装饰器表达式会在运行时当做函数被调用，类的构造函数作为其唯一的参数

const sealed = (constructor: Function) {
    Object.seal(constructor)
    Object.seal(constructor.prototype)
}
 
@sealed
class User{}
方法装饰器

方法装饰器会在运行时当做函数被调用，有3个参数：

1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象

2、成员的名字

3、成员的属性描述符{ value: any, writable: boolean, enumerable: boolean, configurable: boolean }

示例参考示例1

访问器装饰器

和函数装饰器一样，只不过是装饰与访问器上

function print(msg: string) {
    return function(traget: string, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log(`msg: ` + msg)
    }
}
class User {
    private _name: string
    @print('getName evaluated')
    get name () {
        return this._name
    }
}
属性装饰器

属性装饰器会在运行时当做函数被调用，有2个参数
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
2、成员的名字

const freeze = (target, propertyKey) => {
    target[propertyKey] = 0;
    Object.defineProperty(target, propertyKey, {
        configurable: false,
        writable: false,
    });
}
class User {
    @freeze
    id: number
}
参数装饰器

参数装饰器会在运行时当作函数被调用，有3个参数
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
2、成员的名字
3、参数在函数参数列表的索引

const required = function (target: any, propertyKey: string, paramterIndex: number) {
    console.log(target[propertyKey].prototype)
}
class User {
    private _name: string
    changeName (@required name: string) {
        this._name = name
    }
}

将validate示例用在参数装饰器上

// 定义一个私有 key
const requiredMetadataKey = Symbol("required")
// 定义参数装饰器，大概思路就是把要校验的参数索引保存到成员中
const required = function (target, propertyKey: string, parameterIndex: number) {
    // 参数装饰器只能拿到参数的索引
    if (!target[propertyKey][requiredMetadataKey]) {
        target[propertyKey][requiredMetadataKey] = {}
    }
    // 把这个索引挂到属性上
    target[propertyKey][requiredMetadataKey][parameterIndex] = true
}
 
// 定义一个方法装饰器，从成员中获取要校验的参数进行校验
const validate = function (target, propertyKey: string, descriptor: PropertyDescriptor) {
    // 保存原来的方法
    let method = descriptor.value
    // 重写原来的方法
    descriptor.value = function () {
        let args = arguments
        // 看看成员里面有没有存的私有的对象
        if (target[propertyKey][requiredMetadataKey]) {
            // 检查私有对象的 key
            Object.keys(target[propertyKey][requiredMetadataKey]).forEach(parameterIndex => {
            // 对应索引的参数进行校验
                if (!args[parameterIndex]) throw Error(`arguments${parameterIndex} is invalid`)
            })
        }
    }
}
 
class User {
    name: string
    id: number
    constructor(name:string, id: number) {
        this.name = name
        this.id = id
    }
 
    // 方法装饰器做校验
    @validate
    changeName (@required newName: string) { // 参数装饰器做描述
        this.name = newName
    }
}

反射

反射实在运行时动态获取一个对象的一切信息：方法/属性等等，特点在于动态类型反推导，在typescript中，反射的原理是通过设计阶段对对象注入元数据信息，在运行阶段读取注入的元数据，从而得到对象信息。

使用时需要在tsconfig.json配置并且引入reflect-metadata：

{
    "compilerOptions": {
        "target": "ES5",
        "emitDecoratorMetadata": true
    }
}

反射可以获取对象的：
1、对象的类型
2、对象/静态属性的信息（类型）
3、方法的参数类型，返回类型

默认注入的三种元数据：
1、design:type：成员类型
2、design:paramtypes：成员所有参数类型
3、design:returntype：成员返回类型
使用反射实现动态路由和自动注入生成

默认元数据示例
import "reflect-metadata";

const Prop = (): PropertyDecorator => {
    return (target, key: string) => {
        const _type = Reflect.getMetadata('design:type', target, key)
        console.log("type: ", _type) // type: [Function: String]
    }
}

const Method = (): MethodDecorator => {
    return (traget: any, propertyKey: string, descriptor: PropertyDescriptor) => {
        const _params = Reflect.getMetadata('design:paramtypes', traget, propertyKey)
        console.log('params: ', _params) // params:  [ [Function: String] ]
    }
}

const GetReturn = (): MethodDecorator => {
    return (traget: any, propertyKey: string, descriptor: PropertyDescriptor) => {
        const _return = Reflect.getMetadata('design:returntype', traget, propertyKey)
        console.log('return type: ', _return) // return type:  [Function: String]
    }
}

class TestReflect {
    @Prop()
    public name: String

    @GetReturn()
    public getName (): String {
        return this.name
    }

    @Method()
    public setName (name: String) {
        this.name = name
    }
}

上面示例拿到了返回，类型和参数，就可以做些略微高级的事

简单的自动注入
import 'reflect-metadata'
const Autowired = (target: any, key: string) => {
	const type = Reflect.getMetadata('design:type', target, key)
    return target[key] = new type()
}
 
class ServiceDemo {
    public getService () {
        console.log('aaa')
    }
}
 
class ReflectDemo {
 
    @Autowired
    serviceDemo: ServiceDemo
 
 
    testAutowired () {
        this.serviceDemo.getService()
    }
}
 
let reflectDemo = new ReflectDemo()
reflectDemo.testAutowired() // aaa
自动生成路由
import 'reflect-metadata'
 
const Prefix = (path: string): ClassDecorator => {
    return (target: any) => {
        Reflect.defineMetadata(Symbol.for('PREFIX'), path, target)
    }
}
 
const getMethodDecorator = (method: string) => (path: string): MethodDecorator => {
    return (target: any, key: string, descriptor: PropertyDescriptor) => {
        Reflect.defineMetadata(Symbol.for('PATH_METADATA'), path, descriptor.value)
        Reflect.defineMetadata(Symbol.for('METHOD_METADATA'), method, descriptor.value)
    }
}
 
const Get = getMethodDecorator('get')
const Post = getMethodDecorator('post')
 
 
@Prefix('/test')
class ReflectDemo {
 
    @Get('/get-method')
    getMethod () {
    }
 
    @Post('/post-method')
    postMethod () {
 
    }
 
}
 
const mapRoutes = (instance: Object) => {
    const prototype = Object.getPrototypeOf(instance)
 
    const methodNames = Object.getOwnPropertyNames(prototype).filter(item => item !== 'constructor' && item !== 'Function')
 
    const prefix = Reflect.getMetadata(Symbol.for('PREFIX'), prototype['constructor'])
    return methodNames.map(methodName => {
        const fn = prototype[methodName]
        if (isFunction(fn) {
            const route = Reflect.getMetadata(Symbol.for('PATH_METADATA'), fn)
            const method = Reflect.getMetadata(Symbol.for('METHOD_METADATA'), fn)
            return {
                route,
                method,
                fn,
                methodName
            }
        }
    })
}
 
mapRoutes(new ReflectDemo())

参考

从 JavaScript 到 TypeScript 4 - 装饰器和反射

Node + TypeScript 使用装饰器构造路由表
Ancecis的博客
08-03 1179
文章目录如何用Node和TypeScript配置RouterRouter简介通用的解决办法一对一映射自然路由映射TypeScript的解决办法使用自然路由映射使用1对1映射方式通过配置方式通过装饰器进行构建路由表装饰器使用例子装饰器引入如何构建router装饰器总结全部代码 如何用Node和TypeScript配置Router Router简介 ​ Router，即路由。路由的作用是存储与转发。如...
typescript 装饰器
junhuafly的专栏
03-14 946
ts 中装饰器用于在构造函数参数或是方法中使用 @ 表示 // 这里用到 reflect-metadata 反射 import "reflect-metadata" // 定义装饰器 接收一个参数 function inject(serviceIdentifier: string) { return function (target: Object, targetKey: string, index: number) { // 反射定义数据元 Reflect.defineMeta
TypeScript中文版
04-18
TypeScript中文版文档
TypeScript：装饰器
最新发布
ChinaDragon10的博客
10-06 1190
随着TypeScript和ES6里引入了类，在一些场景下我们需要额外的特性来支持标注或修改类及其成员。 装饰器（Decorators）为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。 注意： 装饰器是一项实验性特性，在未来的版本中可能会发生改变。
反射机制在Typescript中的应用
qq_37365676的博客
01-27 6674
前言 学过Java的小伙伴应该都知道反射，用过的都说好。 反射的概念 反射其实就是程序能够自检查自身信息。就像程序会照镜子反光看自己。 在程序中可以检查某个类中的方法属性等信息，并且能够动态调用。 反射的基本用法： 1、要把一个对象中的数据copy到另外一个对象中，规则是属性名相同就copy，用反射来做，不需要指定每个属性的名字，只要动态从类中取得信息，再判断属性名是否相同即可。 2、可以在程序上动态创建实例对象，并调用它的方法、属性。 反射的优点： 提升程序的灵活性和扩展性，降低模块的耦合度。 反射的缺点
Typescript反射对象Reflect使用
07-25 1516
Typescript反射对象Reflect使用。
反射和装饰器
HashFlag的博客
06-01 270
9、反射 反射针对的是类、对象和模块 反射：通过字符串去操作类对象或者模块当中的成员（属性方法） hasattr、getattr、setattr、delattr （1）反射类、对象中的成员 ​ hasattr：判断类或对象中是否存在指定的成员 ​ 注：判定的必须是字符串形式的成员 ​ getattr：获取对象/类成员的值 ​ 注：通过类反射出来的是一个普通方法；通过对象反射出来的是绑定方法； ​ 当类对象中的成员不存在时，可以设置默认值（第三个参数是默认
TypeScript反射机制动态创建类
大猪的博客
10-20 5211
前言 在前一篇文章桥接模式与策略模式的区别与刘伟老师的桥接模式中，我们可以明白桥接模式处理得比较好的一个点是在于Java的反射机制。 那么，假如我们需要再TypeScript中，来实现桥接模式的处理，需要怎么样来实现这个“反射”呢？ 注：在策略模式中，该文章的处理全部适用。 思路 反射机制：就是要实现通过一个Key值来创建一个类。 那么在TypeScript中，普通的对象就有key:value的这样的格式，然后TypeScript编译后的源代码是JavaScript，而JS的类创建是通过原型
ts-prop-injection:带装饰器的基本Typescript依赖注入
05-16
以上就是使用 Typescript 装饰器进行依赖注入的基本概念和实现方式。通过这种方式，我们可以使代码更加模块化，降低组件间的耦合度，提高代码的可测试性，同时保持代码的清晰和简洁。在实际开发中，你可以根据项目...
Typescript-ts 装饰器源码分析——方法装饰器
小辣抓
02-23 1905
Typescript-ts 装饰器源码分析——方法装饰器 方法装饰器声明在一个方法的声明之前（紧靠着方法声明）。 它会被应用到方法的 属性描述符上，可以用来监视，修改或者替换方法定义。 方法装饰器不能用在声明文件( .d.ts)，重载或者任何外部上下文（比如declare的类）中。 方法装饰器表达式会在运行时当作函数被调用，传入下列3个参数： 对于静态成员来说是类的构造函数，对于实例成...
使用typescript改造koa开发框架
zsxy2019的博客
11-19 1073
强类型的 TypeScript 开发体验和维护项目上相比 JavaScript 有着明显的优势，那么对常用的脚手架进行改造也就势在必行了。 接下来开始对基于 koa 框架的 node 后端脚手架进行改造： 1.项目开发环境 和 typescript 编译环境的搭建； 2.对 node、koa、koa中间件和使用到的库 添加类型化支持； 3.基于 typesript 的特性改造项目。 项目开发环境搭建 基于 gulp 搭建开发编译环境，gulp-typescript 插件用于编译 typescript 文件，
reflec-ts:具有反射功能的TypeScript编译器
05-16
反思 增强（非官方）版本，提供了反射功能。 该项目目前处于待命状态，因为我正在等待以下问题的结果（Typescript团队应对此做出决定）： 正在安装 发布遵循官方发布，因此我尝试保持相同的方案。 对于最新的稳定版本： npm install -g reflec-ts 对于最新的可用版本： npm install -g reflec-ts@next 我会至少每周一次使反射大师与官方大师保持一致。 例子 您可以找到一些示例。 这个怎么运作 每种提供真正反射功能的语言都必​​须在编码时和运行时提供两件事： 类，接口，用于构建类型层次结构 用于访问反射数据的元类（有关Java中的示例，请参见 ）。 实际上，如果单独选择这两个功能，还不足以实现反射，但是应该以某种方式将它们链接在一起。 例如，我们通常希望从其标识符检索类元数据（例如Java中的String.class ），或者我们想
深入理解 TypeScript Reflect Metadata
12-13
在定义类或者类方法的时候，可以设置一些元数据，我们可以获取到在类与类方法上添加的元数据，用的方法就是 Reflect Metadata。元数据指的是描述东西时用的数据。 在 TypeScript 里使用 Reflect Metadata 需要做下面这样的配置： { "compilerOptions": { "experimentalDecorators": true , "emitDecoratorMetadata": true }, } 然后在项目里安装 reflect-metadata 这个包： npm install reflect-metadata --save 然
封装、反射、装饰器
cc_park的博客
07-02 177
#################################################### class foo(object): def __init__(self): self.func() def func(self): print('a') class son(foo): def func(self): print('b') son() class foo(object): def __init__(sel
30.【TypeScript 教程】Reflect Metadata
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
01-26 1156
Reflect，翻译为『反射』，Metadata，翻译为『元数据』。反射这个概念在 Java 等众多语言中已经广泛运用，Reflect Metadata 就是通过装饰器来给类添加一些自定义的信息，然后通过反射将这些信息提取出来，也可以通过反射来添加这些信息。通过这种方式给对象添加额外的信息，是不会影响对象的结构的。注意, 实例方法与静态方法取元数据是不同的，实例方法需要在类的实例上取元数据，静态方法直接在类上取元数据。，再通过反射拿到这个路由信息，将这些路由信息进行一定的封装，然后绑定在。
Typescript + 反射实现Ioc DI依赖注入
qq_45593068的博客
02-08 755
Typescript + 反射实现Ioc DI依赖注入 参考资料： 深入Typescript：Reflect Metadata https://github.com/rbuckton/reflect-metadata#api 有关开启、安装反射和装饰器参考深入Typescript：Reflect Metadata 反射的基本使用 import 'reflect-metadata'; function Class(): ClassDecorator{ return (target: any)
2024最全前端面试系列（数据结构篇）（大厂必考算法），学习网页前端开发
2401_84094620的博客
04-03 434
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。
TypeScript系列教程十一《装饰器》 -- reflect-metadata
2401_84091580的博客
04-08 1001
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取前端）**你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值