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');// 在装饰器里重载constructorreturn class extends target {apiUrl: any = '我修改了'getData() {this.apiUrl = this.apiUrl + '---'console.log(this.apiUrl);}}
}
@logClass
class HttpClient {public apiUrl: string | undefinedconstructor() {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 | undefinedconstructor() { }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.valuedesc.value = function (...args: any[]) {args = args.map((value) => {return String(value)})console.log(args, 'args');// 使用对象冒充修改当前方法,否则会替换原方法oMethed.apply(this, args)}}
}class HttpClient {public url: any | undefinedconstructor() { }@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.mzph.cn/diannao/9343.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第二篇【AI与传奇开心果系列】Python的AI技术点库案例示例:详解AI工业应用算法原理

AI与传奇开心果系列博文 系列博文目录Python的AI技术点库案例示例系列 博文目录前言一、AI工业应用算法原理介绍二、机器学习在工业领域的应用算法示例代码三、深度学习算法在工业领域应用示例代码四、强化学习在工业领域应用示例代码五、自然语言处理在工业领域应用示例代码六…

9. Django Admin后台系统

9. Admin后台系统 Admin后台系统也称为网站后台管理系统, 主要对网站的信息进行管理, 如文字, 图片, 影音和其他日常使用的文件的发布, 更新, 删除等操作, 也包括功能信息的统计和管理, 如用户信息, 订单信息和访客信息等. 简单来说, 它是对网站数据库和文件进行快速操作和管…

Hive多字节分隔符处理

Hive多字节分隔符处理 1.Hive分隔符默认规则 2.问题与需求 3.解决方案 (1)替换分隔符 (2)RegeSerDe正则加载 (3)自定义InputFormat

SAP-ABAP-ALV报表

1、功能介绍 什么是ALV报表 2、开发步骤 事物码: SE38创建报表程序SE93生成TCODESE43SE91消息号报表类型:简单报表、复杂报表、报表树 报表组成:查询界面(选择屏幕)、展示界面、功能按钮 基本流程: 重点:数据放在内表里,临时表,放在内存里。 3、开发实战 按标题…

科技早报|商务部回应美撤销部分企业对华为出口许可证;百度公关副总裁璩静道歉;微软关闭旗下四家游戏工作室 | 最新快讯

商务部回应美撤销部分企业对华为出口许可证 5月8日,据环球网报道,拜登政府已于7日当天进一步收紧了对华为的出口限制,撤销了美国芯片企业高通和英特尔公司向华为出售半导体的许可证。这一行动也得到了美国商务部的证实。其表示已“撤销了对华…

【Linux系统编程】31.pthread_detach、线程属性

目录 pthread_detach 参数pthread 返回值 测试代码1 测试结果 pthread_attr_init 参数attr 返回值 pthread_attr_destroy 参数attr 返回值 pthread_attr_setdetachstate 参数attr 参数detachstate 返回值 测试代码2 测试结果 线程使用注意事项 pthread_deta…

使用React高阶组件

高阶组件个人理解其实就是抽离公共逻辑,高阶组件英语全称为 Higher-Order Components,简称 HOC,所谓高阶组件,是 React中一种复用逻辑的技巧。高阶组件是一个函数,高阶组件作为一个函数,接收你传入的组件&a…

百度地图API 快速入门

一、创建一个应用 创建成功可以在应用程序中查看到自己的ak密钥 二、基本使用 2.1 显示地图 在static下创建demo1.html &#xff08;将密钥换成自己的就可以显示地图了&#xff09; 示例&#xff1a; <!DOCTYPE html> <html> <head><meta name"…

顺序表的实现(迈入数据结构的大门)(2)

目录 顺序表的头插(SLPushFront) 此时&#xff1a;我们有两个思路&#xff08;数组移位&#xff09; 顺序表的头删(学会思维的变换)(SLPopFront) 顺序表的尾插(SLPushBack) 有尾插就有尾删 既然头与尾部的插入与删除都有&#xff0c;那必然少不了指定位置的插入删除 查找…

特征提取与深度神经网络(二)

关键点/角点检测 2011论文-ORB关键点检测&#xff0c;比SIFT与SURF速度更快。 ORB算法可以看出两个部分组成&#xff1a;快速关键点定位BRIEF描述子生成 Fast关键点检测&#xff1a; 选择当前像素点P&#xff0c;阈值T&#xff0c;周围16个像素点&#xff0c;超过连续N12个像素…

Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)

Flutter笔记 Widgets Easier组件库 - 使用标签&#xff08;Tag&#xff09; - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this …

电路板维修【一】

最近喜欢上了电路板维修&#xff0c;经常看很多博主的维修视频&#xff0c;觉得还是颇有收获的&#xff08;维修板子原来有方法可循&#xff09;&#xff0c;于是做笔记如下&#xff1a; 一.【修了半天也没找到问题&#xff0c;原来是检查方向错了&#xff0c;变频油烟机板维修…

LifeCycle之ProcessLifeCycleOwner

问题&#xff1a;想要知道应用程序当前处在前台、后台、或从后台回到前台&#xff0c;想要知道应用的状态&#xff0c; LifeCycle提供了ProcessLifeCycleOwner的类&#xff0c;方便我们知道整个应用程序的生命周期情况 ProcessLifeCycleOwner 使用方法 1.首先添加依赖 imple…

ai电话机器人的操作难吗?智能电销系统部署

人工智能出现的目的&#xff0c;就是造福方便人类的生活&#xff0c;电话机器人的使用只需要通上电&#xff0c;登录后台在后台中导入客户的电话号码并设定好工作时间即可&#xff0c;其余的只需要完全交给机器人来做就行了&#xff0c;什么时候需要知道客户的筛选结果&#xf…

如何设置内网打印机端口网络穿透到公网

打印机是当前公司企业办公输出纸质文件处理过程中必不可少的工具设备。出差在外&#xff0c;我们经常会面对需要远程使用公司内部打印机复印或打印各种文件资料的情况&#xff0c;或不在家又需要远程访问家里打印机进行打印的情况。这时候&#xff0c;就必须学会远程打印的方法…

C++类和对象(三) 缺省值 | static成员 | 内部类

前言&#xff1a; 这是关于类和对象的最后一篇文章&#xff0c;当然还是基础篇的最后一篇&#xff0c;因为类的三大特性继承&#xff0c;封装和多态都还没有讲&#xff0c;少年&#xff0c;慢慢来。 缺省值&#xff1a; 之前讲过&#xff0c;在C11的新标准中&#xff0c;支持为…

vue3 - 图灵

目录 vue3简介整体上认识vue3项目创建Vue3工程使用官方脚手架创建Vue工程[推荐] 主要⼯程结构 数据双向绑定vue2语法的双向绑定简单表单双向绑定复杂表单双向绑定 CompositionAPI替代OptionsAPICompositionAPI简单不带双向绑定写法CompositionAPI简单带双向绑定写法setup简写⽅…

【机器学习之 sklearn 基础教程】

文章目录 机器学习之 sklearn 基础教程1. 引言2. 安装 sklearn3. 数据集3.1 加载数据集3.2 数据集划分 4. 数据预处理4.1 特征缩放4.2 编码分类特征 5. 模型训练与评估5.1 模型训练5.2 模型评估5.3 交叉验证 6. 模型调参7. 模型调参&#xff08;续&#xff09;7.1 GridSearchCV…

【C++后端项目】负载均衡OJ服务器

文章目录 一、演示项目二、所用技术与开发环境所用技术开发环境 三、项目宏观结构I. 风格&#xff1a;仿leetcodeII. 结构&#xff1a;Browser-Server模式III. 编写思路&#xff1a;编译服务 -> OJ服务 -> 前端设计 四、关于Git分支管理✨4.1 Git 分支结构4.2 Git 分支命…

mac电脑如何安装java

1、检查当前系统的 Java 版本 打开终端,输入以下命令查看当前 Java 版本 /usr/bin/java -version 2、前往 Java 官网下载 Java JDK 打开 Java 官网 (https://www.java.com/zh-CN/download/) 并下载最新版本的 Java JDK。 3、安装 Java JDK 双击下载的 .dmg 文件启动安装程序…