typescript 命名空间、装饰器

1、命名空间

 命名空间:在代码量较大的情况下,为了避免各种变量命名的冲突,可将相似功能的函数、类、接口等放置到命名空间内。同Java的包.Net的命名空间一样,typescript 的命名空间可以将代码包裹起来,只对外暴露需要在外部访问的对象

命名空间和模块的区别:

命名空间:内部模块,主要用于组织代码,避免命名冲突。 

模块:ts的外部模块的简称,侧重代码的复用,一个模块里可能会有多个命名空间。


namespace A {
    interface Animal {
        name: string;
        eat(): void
    }
    export class Dog implements Animal {
        name: string;
        constructor(name: string) {
            this.name = name
        }
        eat() {
            console.log(`${this.name}汪汪`);
        }
    }
    class Cat implements Animal {
        name: string;
        constructor(name: string) {
            this.name = name
        }
        eat() {
            console.log(`${this.name}喵喵`);

        }
    }

}

// 想在外部使用命名空间里的方法 需要先暴露 命名空间.调用
let d = new A.Dog('小狗')
d.eat();

/* 
    也可以将命名空间模块化,引入
    export namespace A
*/

2、装饰器

 装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性或参数上,可以修改类的行为。

通俗的讲装饰器就是一个方法,可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。

常见的装饰器有:类装饰器、属性装饰器、方法装饰器、参数装饰器

装饰器的写法:普通装饰器(无法传参)、装饰器工厂(可传参)

(1)类装饰器:类装饰器是在类声明之前被声明(紧靠着类声明) 。类装饰器应用于类构造函数,可以用来监视,修改或替换类定义。传入一个参数

普通装饰器

function logClass(params: any) {
    // params 就是当前类
    console.log(params, 'params');

    // 动态扩展属性
    params.prototype.apiUrl = 'http://'
    params.prototype.run = function () {
        console.log('我是扩展的方法');
    }
}
// 调用装饰器
@logClass
class HttpClient {
    constructor() {

    }
    getData() {

    }
}
var http = new HttpClient()
console.log(http.apiUrl);
http.run()

装饰器工厂(可传参)

function logClass(params: string) {
    return function (target: any) {
        console.log(target, '当前类');
        console.log(params, '接收的参数');

        target.prototype.apiUrl = params
    }
}
@logClass('http://')
class HttpClient {
    constructor() {

    }
    getData() {

    }
}
var http = new HttpClient
console.log(http.apiUrl);

类装饰器 重载构造函数

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

如果类装饰器返回一个值,它会使用提供的构造函数来替换类的声明


function logClass(target: any) {
    console.log(target, 'target');

    // 在装饰器里重载constructor
    return class extends target {
        apiUrl: any = '我修改了'
        getData() {
            this.apiUrl = this.apiUrl + '---'
            console.log(this.apiUrl);
        }
    }
}
@logClass
class HttpClient {
    public apiUrl: string | undefined
    constructor() {
        this.apiUrl = '我是构造函数的apiUrl'
    }
    getData() {
        console.log(this.apiUrl);
    }
}
var http = new HttpClient()
http.getData()

 (2)属性装饰器:属性装饰器表达式会在运行时当作函数被调用,传入2个参数。

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

                                2、成员的名字

// 属性装饰器
function logProperty(params: any) {
    // target 类的原型对象
    return function (target: any, attr: any) {
        console.log(target, '类的原型对象');
        console.log(attr, '属性名');
        console.log(params, '属性传入的值');
        target[attr] = params

    }

}

@logClass('类的传参')
class HttpClient {
    @logProperty('http')
    public url: any | undefined
    constructor() { }
    getData() {
        console.log(this, 'url');
    }
}
var http = new HttpClient()
http.getData()

(3)方法装饰器:它会被应用到方法的属性描述符上,可以用来监视,修改或者替换方法定义。

        方法装饰会在运行时传入下列3个参数

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

        2、成员的名字

        3、成员的属性描述符

function get(params: any) {
    return function (target: any, methodName: any, desc: any) {
        console.log(target, '原型对象');
        console.log(methodName, '方法名');
        console.log(desc, '描述');
        target.apiUrl = 'hahaha'
        target.run = function () {
            console.log('run');
        }

        /* 
            修改装饰器的方法,把装饰器方法里面传入的所有参数改为string类型
            1、保存当前方法
        */
        var oMethed = desc.value
        desc.value = function (...args: any[]) {
            args = args.map((value) => {
                return String(value)
            })
            console.log(args, 'args');

            // 使用对象冒充修改当前方法,否则会替换原方法
            oMethed.apply(this, args)
        }

    }
}

class HttpClient {
    public url: any | undefined
    constructor() { }
    @get('http://')
    getData(...args: any[]) {
        console.log(args);
        console.log(this.url, '我是getData');
    }
}

var http: any = new HttpClient()
console.log(http.apiUrl, 'apiUrl');
http.run()
http.getData(132, '8545')

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/610267.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

云手机:海外舆情监控的新工具

在数字化时代,海外舆情监控对于企业、品牌和政府机构来说,已经变得至关重要。传统的舆情监控方法往往受限于地域、设备和技术,而云手机的出现,为海外舆情监控带来了全新的解决方案。 一、云手机与海外舆情监控的完美结合 云手机作…

一个开源即时通讯源码

一个开源即时通讯源码 目前已经含服务端、PC、移动端即时通讯解决方案,主要包含以下内容。 服务端简介 不要被客户端迷惑了,真正值钱的是服务端, 服务是采用Java语言开发,基于spring cloud微服务体系开发的一套即时通讯服务端。…

华为eNSP学习—IP编址

IP编址 IP编址子网划分例题展示第一步:机房1的子网划分第二步:机房2的子网划分第三步:机房3的子网划分IP编址 明确:IPv4地址长度32bit,点分十进制的形式 ip地址构成=网络位+主机位 子网掩码区分网络位和主机位 学此篇基础: ①学会十进制与二进制转换 ②学会区分网络位和…

Python批量备份华为设备配置到FTP服务器

Excel表格存放交换机信息: 备份文件夹效果图: Windows系统配置计划任务定时执行python脚本: Program/script:C:\Python\python.exe Add arguments (optional): D:\Python_PycharmProjects\JunLan_pythonProje…

能源系统升级BACnet IP分布式I/O边缘模块深度整合

能源管理系统(EMS)的高效运行成为了实现绿色建筑、节能减排的关键。而BACnet IP分布式远程I/O模块作为这一系统中的重要组件,正发挥着不可小觑的作用。本文将以某大型商业综合体为例,探讨BACnet IP I/O模块如何在能源管理中大显身手。 商业综合体涵盖办公…

揭秘APP广告变现:轻松赚取额外收入!

在移动应用(APP)的世界中,变现能力是衡量一个应用成功与否的关键指标之一。无论是个人开发者还是企业团队,如何通过应用创造收入,始终是一个备受关注的话题。今天,我们将深入探讨APP广告变现的路径&#xf…

【ElementUI -- 优化小技巧系列】 -- el-tree 节点内容过长优化 以及选中默认节点

在使用elementui过程中经常碰到关于样式的问题,我曾经很喜欢通过类名修改css样式来做,其实原生封装的elementui库的样式对于普通开发来说已经足够了,通过类名修改css只会让组件臃肿难以维护,现在真的越来越怕写css,经常…

镜舟科技亮相2024中国移动算力网络大会、Qcon、DTC等多项活动

在刚刚过去的 4 月份,镜舟科技受邀参与一系列技术交流活动,与移动云、金科创新社、infoQ、墨天轮、开科唯识等媒体及合作伙伴展开积极交流,并分享其在数据技术、金融等垂直行业领域的创新实践,从产业侧、业务侧、技术侧洞察需求、…

基于springboot+mybatis+vue的项目实战之页面参数传递

如图所示&#xff0c;删除操作可以用按钮实现&#xff0c;也可以用超链接来实现。 1、第一种情况&#xff0c;用按钮实现。 html页面相关&#xff1a; <button type"button" click"deleteId(peot.id)">删除</button> <script>new Vue(…

Redis 支持的 Java 客户端都有哪些?

Redis 是一种高性能的键值存储系统&#xff0c;它以其快速、灵活和可扩展的特性而闻名。在 Java 开发中&#xff0c;与 Redis 交互的方式通常是通过使用 Redis 的 Java 客户端。 这些客户端提供了访问 Redis 数据库的接口&#xff0c;使开发人员能够在 Java 应用程序中轻松地使…

活动报名 | 某头部股份制银行,构建实时指标平台的最佳实践

&#x1f449;欢迎到镜舟科技公众号报名了解研讨会 数字化转型不仅是一场技术革命&#xff0c;更是企业决策模式的革新。在这一过程中&#xff0c;数据成为企业最宝贵的资产&#xff0c;实时数据分析对企业决策至关重要。 随着业务复杂性增加&#xff0c;各业务部门数据指标越…

【概率论基础】 一篇文章缕清概率论常见概念关系

碎碎念&#xff1a;再写CSDN之前有一小段时间写数模公众号的经历&#xff0c;但是公众号看的人实在太少了&#xff0c;而且排版和公式、代码编辑都没有CSDN这么方便&#xff0c;所以坚持一算时间就没有更新了。公众号大多写的是概念性的基础&#xff0c;稍加修改搬到咱们的主战…

人人都是开发者?Baidu Comate智能代码助手改变你传统的编程之路

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引入一、人人都是开发者二、Baidu Comate 智能编码助手2.1 Baidu Comate 是什么&#xff1f;2.2 Baidu Comate 支持那…

5到15秒片头音乐200款,30秒片头音效音乐大全

一、素材描述 本套音乐音效素材&#xff0c;大小2.88G&#xff0c;13个压缩文件。 二、素材目录 200个5到15秒的片头音乐.zip 30秒片头-1.zip 30秒片头-2.zip 30秒片头-3.zip 30秒片头-4.zip 30秒片头-5.zip 30秒片头-6.zip 30秒片头-7.zip 30秒片头-8.zip 30秒片头…

海睿思受邀参加 “走进中节能”研习交流,探索新能源数据治理的创新路径

近日&#xff0c;OceanMind海睿思参加由江苏省企业信息化协会&#xff08;以下简称“苏信会”&#xff09;主办的“走进中节能太阳能科技&#xff08;镇江&#xff09;有限公司”研习交流活动。 海睿思与苏美达、远东控股、隆基乐叶、固德威、上能电气等40多位来自制造业领域的…

Unity使用ToggleGroup对多个Toggle进行管理时,初始化默认选项失效的问题

问题描述&#xff1a; 在unity脚本的OnEnable中用代码设置Toggle集合中的其中一个对象的ison时&#xff0c;发现并没有根据设置发生变化。但是该Toggle的OnValueChange却发生过变化。 如果使用协程等待0.01s,那么对应组件的ison的修改才能生效&#xff0c;但是逐帧分析的话会发…

读写备份寄存器BKP与实时时钟RTC

文章目录 读写备份寄存器接线图代码 RTC实时时钟接线图代码 读写备份寄存器 接线图 即接个3.3v的电源到VBT引脚 代码 代码效果&#xff1a;第一次写入备份寄存器&#xff0c;下载程序后再注释掉&#xff0c;再进行下载&#xff0c;之前写入的数据还会保存在备份寄存器中&am…

JavaEE之线程(3)_线程的开始、中断、等待、休眠线程、线程的状态

前言 在本栏的上一节&#xff08;https://blog.csdn.net/2301_80653026/article/details/138500558&#xff09;&#xff0c;我们重点讲解了五种不同的创建线程的方式&#xff0c;我们还介绍了Tread类的常见构造方法和常见属性&#xff0c;在这一节中我们将会继续介绍Tread类。…

【SVN-TortoiseSVN】SVN 的简介与TortoiseSVN 安装使用教程

目录 &#x1f31e;前言 &#x1f30a;1. SVN 的简介 &#x1f30d;1.1 SVN是什么 &#x1f30d;1.2 SVN 工作原理 &#x1f30d;1.3 TortoiseSVN 术语及定义 &#x1f30a;2. TortoiseSVN 安装与汉化 &#x1f30a;3. SVN 基本操作-TortoiseSVN &#x1f30d;3.1 浏览…

在k8s中部署Prometheus并实现对k8s集群的监控

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Prometheus&#xff1a;监控的神》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、k8s简介 2、 Prometheus概述 二、准备k8s环境 1、…