做海外购网站一站式媒体发稿平台

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 { }