首页 前端知识 【TypeScript】this指向,this内置组件

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

2024-04-29 12:04:08 前端知识 前端哥 1002 428 我要收藏

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: string
   age: number
}
type Intype = {
   User: User
   getname: () => void
   getage: () => 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: string
   age: number
}
type Intype = {
   User: User
   getname: () => void
   getage: () => 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 { }
转载请注明出处或者链接地址:https://www.qianduange.cn//article/6554.html
标签
ubuntu
评论
发布的文章

什么是JSON 为什么使用它

2024-05-07 13:05:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!