当前位置: 首页 > 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框架实现了一个完整的聊天室消息实时通知系统。有什么不完善的地方还请大佬指正。 用到的技术…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...