学习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日
    浏览(62)
  • 面试题-TS(一):TypeScript是什么?它与JavaScript有什么区别?

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

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

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

    2024年02月10日
    浏览(39)
  • 力扣前端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日
    浏览(41)
  • 【TypeScript】TS入门及基础学习(一)

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

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

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

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

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

    2024年02月09日
    浏览(39)
  • 服务端使用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日
    浏览(48)
  • TypeScript之装饰器

    装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上 是一种在不改变原类和使用继承的情况下,动态地扩展对象功能 同样的,本质也不是什么高大上的结构,就是一个普通的函数, @expression  的形式其实是 Object.defineProperty 的语法糖 expres

    2024年02月06日
    浏览(40)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包