学习ts(十)装饰器

这篇具有很好参考价值的文章主要介绍了学习ts(十)装饰器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

定义

装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,访问符,属性或参数上,是一种在不改变原类和使用继承的情况下,动态的扩展对象功能。
装饰器使用@expression形式,其中expression必须评估为一个函数,该函数将在运行时调用,并带有有关装饰声明的信息。
前置操作

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES5",
    "experimentalDecorators": true
  }
}

使用

类装饰

类装饰器会把Class A的构造函数传入你的watcher函数当做第一个参数

const watcher: ClassDecorator = (target) => {
    target.prototype.age = 18
    target.prototype.getName = ():string=>{
        return 'hello'
    }
}
@watcher
class A {
    constructor() {
       
    }
}
const a = new A()
console.log((a as any).age);  // 18
console.log((a as any).getName());  //hello

装饰器工厂

如果想要传递参数,使装饰器变成类似工厂函数,只需要在装饰器函数内部再返回一个函数即可。

const watcher = (name: string): ClassDecorator => {
    return (target) => {
        target.prototype.age = 18
        target.prototype.getName = (): string => {
            return name
        }
    }

}
@watcher('hello data')
class A {
    constructor() {

    }
}
const a = new A()
console.log((a as any).age); // 18
console.log((a as any).getName()); // hello data

装饰器组合

可以给一个类使用多个装饰器

const watcher = (name: string): ClassDecorator => {
    return (target) => {
        target.prototype.age = 18
        target.prototype.getName = (): string => {
            return name
        }
    }

}

const addAge = (age:number):ClassDecorator => {
    return (target) =>{
        target.prototype.addAge = (): number => {
            return age+1
        }
    }
}

@watcher('hello data')  @addAge(20)
class A {
    constructor() {

    }
}
const a = new A()
console.log((a as any).age);
console.log((a as any).getName());
console.log((a as any).addAge());

方法/属性装饰器

装饰器参数为:

  • target:对象的原型:对于静态成员来说是类的构造函数,对于实例成员是类的原型对象
  • propertyKey:方法的名称
  • descriptor:方法的属性描述符
    这三个属性实际就是Object.defineProperty的三个参数,如果是类的属性,则没有传递第三个参数
const met: MethodDecorator = (...args) => {
    console.log(args)
}

class A {
    constructor() {

    }
    @met
    getName(): string {
        return 'hello'
    }
}

const xx = new A()

学习ts(十)装饰器,typeScript,学习,javascript,前端

// 声明装饰器修饰方法/属性
function method(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.writable = false;
};

function property(target: any, propertyKey: string) {
    // 修改属性
    target[propertyKey] = '11223'
}

class Person {
    @property
    name: string;
    constructor() {
    }

    @method
    say() {
        return 'instance method';
    }
}

const xmz = new Person();

// 修改实例方法say
xmz.say = () => {
    return '5566'   //由于 descriptor.writable = false; 所以此处修改不生效
}
console.log(xmz.name)
console.log(xmz.say())  // nstance method

参数装饰

装饰器参数为:

  • target:当前对象的原型
  • propertyKey:参数的名称
  • index:参数数组中的位置
const init: ParameterDecorator = (...args)=>{
    console.log(args)
}
class A {
    constructor() {

    }
    getName(@init name: string = 'hello') {
        console.log(name) // [ {}, 'getName', 0 ]
    }
}

元数据文章来源地址https://www.toymoban.com/news/detail-684293.html

import data from './data.json'
import 'reflect-metadata'


const Base = (base: string) => {
    return (target) => {
        target.prototype.base = base
    }
}

const GetData = (url: string) => {
    console.log('getData run')
    const fn: MethodDecorator = (target: any, key, descriptor: PropertyDescriptor) => {
        const prop = Reflect.getMetadata('key', target)
        console.log(prop, 'prop')
        descriptor.value(prop ? data[prop] : data)
    }
    return fn;
}

const Result = () => {
    console.log('result run')
    const fn: ParameterDecorator = (target: any, key, index) => {
        Reflect.defineMetadata('key', 'data', target)
    }
    return fn
}

@Base('/api')
class Http {
    fileName: string
    constructor(name) {
        this.fileName = name
    }
    @GetData('json')
    getList(@Result() data: any) {
        console.log(data)
    }
}
const http = new Http('orange')

到了这里,关于学习ts(十)装饰器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?

    面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们? 在TypeScript中,装饰器( Decorators )是一种用于增强代码功能的特殊类型声明。装饰器提供了一种在类、方法、属性等代码元素上注释或修改的方式,使得我们可以通过装饰器来扩展、修改或监视代码的

    2024年02月15日
    浏览(56)
  • 面试题-TS(一):TypeScript是什么?它与JavaScript有什么区别?

    面试题-TS(一):TypeScript是什么?它与JavaScript有什么区别? TypeScript是一种编程语言,它是JavaScript的超集。它通过添加静态类型、类、接口和模块等功能来扩展JavaScript。 JavaScript是一种广泛应用于Web开发的脚本语言,它的灵活性和易用性使得它成为了开发者们的首选。然而,Jav

    2024年02月15日
    浏览(47)
  • 学习ts(十)装饰器

    装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,访问符,属性或参数上,是一种在不改变原类和使用继承的情况下,动态的扩展对象功能。 装饰器使用 @expression 形式,其中 expression 必须评估为一个函数,该函数将在运行时调用,并带有有关装饰声明的信息。

    2024年02月10日
    浏览(37)
  • 力扣前端leetcode 2622.有时间限制的缓存 语言TypeScript(详细分析)TS

    力扣题目:2622.有时间限制的缓存 语言:TypeScript 本文是该题目的众多方法之二 如果内容有不对的地方,恳请指正 编写一个类,它允许获取和设置键-值对,并且每个键都有一个 过期时间 。 该类有三个公共方法: set(key, value, duration) :接收参数为整型键 key 、整型值 value 和

    2024年03月21日
    浏览(42)
  • TypeScript学习(1)- ts基础配置介绍

    目录 TypeScript是什么? TypeScript开发环境搭建 以JavaScript为基础构建的语言 一个JavaScript的超集 typescript扩展了JavaScript,并添加了类型 可以在任何支持JavaScript的平台中执行 TS不能被js解析器直接执行(ts ---编译---js) 安装node 使用npm 全局安装typescript 创建一个ts文件  使用tsc对

    2024年02月09日
    浏览(40)
  • 【TypeScript】TS入门及基础学习(一)

    一、前言 TypeScript 是一种用于应用程序规模的 JavaScript 语言。 TypeScript 向 JavaScript 添加了可选类型,支持用于任何浏览器、任何主机、任何操作系统的大规模 JavaScript 应用程序的工具。 TypeScript 可编译为可读的、基于标准的 JavaScript。TypeScript属于 强类型语言 ,JavaScript属于弱

    2024年02月14日
    浏览(43)
  • 前端经典面试题 | 吊打面试官系列 之 说说你对TypeScript 和 JavaScript的理解

    🖥️ 前端经典面试题 专栏:吊打面试官系列 之 说说你对TypeScript 和 JavaScript的理解 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、回答

    2024年01月17日
    浏览(47)
  • web前端-TypeScript学习

    TypeScript 是什么? TypeScript(简称:TS)是JavaScript的 超集(JS有的TS都有) 。 TypeScript = Type +JavaScript(在JS基础之上,为JS添加了 类型支持 )。 TypeScript是微软开发的开源编程语言,可以在任何运行JavaScript的地方运行。 TypeScript为什么要为JS添加类型支持? 背景: JS的类型系统存在”

    2024年02月09日
    浏览(38)
  • 服务端使用ASP.NET Core SignalR与Vue3(TypeScript与JavaScript)前端建立通信(以进度条为例)

    1. ASP.NET Core           ASP.NET Core 是一个跨平台、高性能及开源的框架,用于生成基于云且连接互联网的新式应用程式。 官方文档:ASP.NET documentation | Microsoft Learn  2.  ASP.NET Core SignalR         ASP.NET Core SignalR 是开源库,用于服务端与客户端建立实时通信,可以自动管理连接

    2024年02月06日
    浏览(46)
  • Typescript:类的装饰器

    Typescript的装饰器我在学习typescript的时候并不是很清楚它的作用场景,直到使用了nest.js框架后,才明白其作用,于是又深入学习了一下,希望通过对装饰器的学习提高对nest.js的使用。 装饰器为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式 装饰器 是一种特

    2024年02月16日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包