当前位置: 首页 > news >正文

【TypeScript】this指向,this内置组件

this类型

      • TypeScript可推导的this类型
        • 函数中this默认类型
          • 对象中的函数中的this
          • 明确this指向
        • 怎么指定this类型
      • this相关的内置工具
        • 类型转换
          • ThisParameterType<>
          • ThisParameterType<>
          • ThisType

TypeScript可推导的this类型

函数中this默认类型

对象中的函数中的this
// 对象中的this
const obj ={a:1,b:2,fun:function(){//默认情况下,this是any类型console.log(this.a)}
}
obj.fun()//1
明确this指向
  • 步骤1:tsc --init,生成文件
    在这里插入图片描述
  • 步骤二,打开注释
  • 不让有模糊的this,必须指定this指向
    在这里插入图片描述
  • this就会更严格,这个是this根据上下文自行推导出来的类型
    在这里插入图片描述
  • 这个是没有上下文。推导不出来的,在严格模式下,不允许模糊this,所以会报错
    在这里插入图片描述

怎么指定this类型

  • 函数的第一个参数我们可以根据该函数之后被调用的情况,用于声明this的类型,名词必须叫this
  • 在后续调用函数传入参数的时候。从第二个参数开始传递,this参数会在编译后被抹除
// - 把this作为函数的第一个参数,给指定类型
function fun( this:{name:string},info:{name:string}){console.log(this)//{ name: '名字' }
}
//调用的时候,得这样调用,不然会报void类型的错误
fun.call({name:"名字"},{name:"第二个名字"})

this相关的内置工具

类型转换

  • TS提供了一些工具来辅助进行常见的类型转换,这些类型全局可用
ThisParameterType<>
  • 用于提取一个函数类型Type的this
  • 没有this,则返回unknown
ThisParameterType<>
  • 想要移除一个函数类型type的this参数类型,并且返回当前的函数类型
function fun( this:{name:string},info:{name:string}){console.log(this)
}
//获取函数的类型
type funtype = typeof fun
//想要直接获取函数的this类型,采用内置组件
type thisType= ThisParameterType<funtype>
//想要移除一个函数类型type的this参数类型,并且返回当前剩余的函数类型
type thisRemove= OmitThisParameter<funtype>export{}
ThisType
  • 被用作标记一个上下文的this类型
  • 原始方法
//原始获取this,繁琐
type User = {name: stringage: number
}
type Intype = {User: Usergetname: () => voidgetage: () => void
}
const username: Intype = {User: {name: "乞力马扎罗",age: 18},//ts接收指定的this指向getname: function (this:User) {console.log(this.name)//乞力马扎罗},getage: function (this:User) {console.log(this.age)//18}}
//call() 可以修改函数调用时 this 的指向,其余参数则会作为原函数的参数。
//第一个参数 thisArg。代表 this 将会被指向的值。如果不是对象,也会通过 Object() 方法转换为对象。如果是 null 或 undefined,this 则会指向全局对象(即 window 或 global)
//传入this指向
username.getname.call(username.User)
username.getage.call(username.User)
export { }
  • 采取ThisType<>
type User = {name: stringage: number
}
type Intype = {User: Usergetname: () => voidgetage: () => void
}
//通过ThisType<User>,将这里以后不管多少函数,this的指向始终是User
const username: Intype & ThisType<User> = {User: {name: "乞力马扎罗",age: 18},//ts接收指定的this指向getname: function () {console.log(this.name)//乞力马扎罗},getage: function () {console.log(this.age)//18}}
//call() 可以修改函数调用时 this 的指向,其余参数则会作为原函数的参数。
//第一个参数 thisArg。代表 this 将会被指向的值。如果不是对象,也会通过 Object() 方法转换为对象。如果是 null 或 undefined,this 则会指向全局对象(即 window 或 global)
//传入this指向
username.getname.call(username.User)
username.getage.call(username.User)
export { }

相关文章:

【TypeScript】this指向,this内置组件

this类型 TypeScript可推导的this类型函数中this默认类型对象中的函数中的this明确this指向 怎么指定this类型 this相关的内置工具类型转换ThisParameterType<>ThisParameterType<>ThisType TypeScript可推导的this类型 函数中this默认类型 对象中的函数中的this…...

MySQL 深度分页优化

MySQL 深度分页优化 理解总结&#xff1a; 分页使用limit &#xff0c;前提是要排序好的数据&#xff0c;这时候&#xff0c;就推荐使用带索引的字段排序&#xff0c;因为索引是天然有序的&#xff0c;不需要像是无序的字段一样&#xff0c;全表扫描&#xff0c;如果太大的话…...

如何在CSS中水平居中一个元素?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用 margin: 0 auto⭐ 使用 Flexbox 布局⭐ 使用绝对定位和负边距⭐ 使用表格布局⭐ 使用网格布局⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅…...

生信豆芽菜-ESTIMATE预测免疫评分

网址&#xff1a;http://www.sxdyc.com/immuneEstimateScore 一、ESTIMATE预测免疫评分介绍 ESTIMATE&#xff08;Estimation of STromal and Immune cells in MAlignant Tumor tissues using Expression data&#xff09;是一种用于预测肿瘤免疫评分的计算方法。它通过分析基因…...

分享一颗能用在TYPE-C接口取电协议芯片LDR6328Q,方便好用

芯片功能&#xff1a;诱导PD充电器输出最大功率&#xff0c;支持最大诱骗20V电压。支持协议&#xff1a;PD/QC/三星AFC/华为SCP等主流快充协议 芯片封装&#xff1a;QFN16,SOP8多封装选择 芯片应用&#xff1a; 桶形连接器替换&#xff08;BCR&#xff09;&#xff0c;USB-A和…...

【java】Java与SQLite3数据库类型之间对应关系

引 在开发应用程序时&#xff0c;经常需要将数据存储到数据库中。SQLite3 是一种轻量级的嵌入式数据库&#xff0c;广泛应用于移动设备和嵌入式系统。在使用 SQLite3 数据库时&#xff0c;了解 Java 数据类型与 SQLite3 数据库类型之间的对应关系非常重要&#xff0c;以便正确…...

ELK常见部署架构以及出现的问题及解决方案

ELK常见部署架构以及出现的问题及解决方案 ELK 已经成为目前最流行的集中式日志解决方案&#xff0c;它主要是由Beats 、Logstash 、Elasticsearch 、 Kibana 等组件组成&#xff0c;来共同完成实时日志的收集&#xff0c;存储&#xff0c;展示等一站式的解决方案。本文将会介…...

windows使用vscode配置java开发环境

安装JDK 下载windows版本的JDK&#xff0c;解压到一个目录 openJDK下载地址&#xff1a;Archived OpenJDK GA Releases (java.net) 下载 Microsoft Build of OpenJDK | Microsoft Learn 添加环境变量&#xff1a;JAVA_HOME&#xff1a;JDK的解压目录 编辑PATH&#xff1a;…...

centos系统kubeadm安装K8S_v1.27.x容器使用docker(K8S_v1.24版本以后依然使用docker容器管理)

kubeadm安装K8S_v1.27.x容器使用docker 按照需要的文档点击这里下载 一.环境部署 1.1基础环境配置 主机IP 主机名规划 192.168.186.128 k8s-master01 192.168.186.129 k8s-node01 192.168.186.130 k8s-node02 1.2修改机器名称 #永久修改主机名 hostnamectl set-hostname …...

如何使用索引加速 SQL 查询 [Python 版]

推荐&#xff1a;使用 NSDT场景编辑器助你快速搭建可二次编辑器的3D应用场景 假设您正在筛选一本书的页面。而且您希望更快地找到所需的信息。你是怎么做到的&#xff1f;好吧&#xff0c;您可能会查找术语索引&#xff0c;然后跳转到引用特定术语的页面。SQL 中的索引的工作方…...

Oracle 开发篇+Java通过DRCP访问Oracle数据库

标签&#xff1a;DRCP、Database Resident Connection Pooling、数据库驻留连接池释义&#xff1a;DRCP&#xff08;全称Database Resident Connection Pooling&#xff09;数据库驻留连接池&#xff08;Oracle自己的数据库连接池技术&#xff09; ★ Oracle开启并配置DRCP sq…...

在安装 ONLYOFFICE 协作空间社区版时如何使用额外脚本参数

ONLYOFFICE 协作空间社区版是免费的文档中心工具&#xff0c;可帮助您将用户与文档聚合至同一处&#xff0c;提高协作效率。 ONLYOFFICE 协作空间主要功能 使用 ONLYOFFICE 协作空间&#xff0c;您可以&#xff1a; 邀请他人&#xff0c;协作和沟通完成工作创建协作房间&…...

ChatGPT在智能家居控制和环境管理中的应用如何?

智能家居控制和环境管理是近年来在科技领域迅速发展的重要领域之一。智能家居技术通过将物联网、人工智能和自动化技术相结合&#xff0c;实现了家居设备的智能化、自动化控制和远程管理。ChatGPT作为强大的自然语言处理模型&#xff0c;在智能家居控制和环境管理方面具有广泛的…...

理解 Go 中的切片:append 操作的深入分析(篇2)

理解 Go 语言中 slice 的性质对于编程非常有益。下面&#xff0c;我将通过代码示例来解释切片在不同函数之间传递并执行 append 操作时的具体表现。 本篇为第 2 篇&#xff0c;当切片的容量 cap 不够时 func main() {// slice1 当前长度为 3&#xff0c;容量大小也为 3slice1 :…...

GPT-4 如何为我编写测试

ChatGPT — 每个人都在谈论它,每个人都有自己的观点,玩起来很有趣,但我们不是在这里玩— 我想展示一些实际用途,可以帮助您节省时间并提高效率。 我在本文中使用GPT-4 动机 我们以前都见过这样的情况——代码覆盖率不断下降的项目——部署起来越来越可怕,而且像朝鲜一样…...

java.lang.NoClassDefFoundError: org/apache/tez/dag/api/TezConfiguration

错误&#xff1a; java.lang.NoClassDefFoundError: org/apache/tez/dag/api/TezConfigurationat org.apache.hadoop.hive.ql.exec.tez.TezSessionPoolSession$AbstractTriggerValidator.startTriggerValidator(TezSessionPoolSession.java:74)at org.apache.hadoop.hive.ql.e…...

19、SQL注入之SQLMAP绕过WAF

目录 逻辑层1、逻辑问题2、性能问题 白名单方式一&#xff1a;IP白名单方式二&#xff1a;静态资源方式三&#xff1a;url白名单方式四: 爬虫白名单 sqlmap在测试漏洞的时候&#xff0c;选择了no&#xff0c;它就不会去测试其它的了&#xff0c;我们一般选择yes&#xff0c;为了…...

Redis对象类型和结构、内存回收、对象共享

对象类型和结构 在Redis中&#xff0c;无论是键key还是值value都是一个对象&#xff0c;每次对Redis数据库创建一个新的键值对时&#xff0c;就至少会创建两个对象。 常见的对象类型有&#xff1a; 字符串列表哈希集合有序集合 这些对象在Redis中统一用一个结构体redisObjec…...

标准模板库STL——容器适配器-stack/queue/priority_queue

目录 容器适配器的理解 容器适配器的实现与使用 三类容器适配器 基本概述 示例代码 容器适配器的理解 容器适配器对底层容器进行封装&#xff0c;不具备自己的数据结构 容器适配器的方法全都由底层容器实现&#xff0c;不支持迭代器 容器适配器的实现与使用 // 容器适配器…...

Golang实现完整聊天室(内附源码)

项目github地址&#xff1a; 由于我们项目的需要&#xff0c;我就研究了一下关于websocket的相关内容&#xff0c;去实现一个聊天室的功能。 经过几天的探索&#xff0c;现在使用Gin框架实现了一个完整的聊天室消息实时通知系统。有什么不完善的地方还请大佬指正。 用到的技术…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

渗透实战PortSwigger靶场:lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...

高保真组件库:开关

一:制作关状态 拖入一个矩形作为关闭的底色:44 x 22,填充灰色CCCCCC,圆角23,边框宽度0,文本为”关“,右对齐,边距2,2,6,2,文本颜色白色FFFFFF。 拖拽一个椭圆,尺寸18 x 18,边框为0。3. 全选转为动态面板状态1命名为”关“。 二:制作开状态 复制关状态并命名为”开…...

【2D与3D SLAM中的扫描匹配算法全面解析】

引言 扫描匹配(Scan Matching)是同步定位与地图构建(SLAM)系统中的核心组件&#xff0c;它通过对齐连续的传感器观测数据来估计机器人的运动。本文将深入探讨2D和3D SLAM中的各种扫描匹配算法&#xff0c;包括数学原理、实现细节以及实际应用中的性能对比&#xff0c;特别关注…...