• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

typescript中的this类型

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

typescript中,this 也是一种类型,一个计算器的例子:

class Counter{
  constructor(public count:number = 0){}

  add(value:number){
    this.count += value
    return this
  }

  subtract(value:number){
    this.count -= value
    return this
  }
}

let counter = new Counter(10)
console.log(counter.count) // 10
counter.add(2).subtract(3) 
console.log(counter.count) // 9

这里 this 指的是实例对象,每个方法都返回 this 类型时,我们就可以通过链式调用的形式来使用这些方法。

 

上面的类使用了 this 类型,你可以继承它,新的类可以直接使用之前的方法,不需要做任何的改变。

class PowerCounter extends Counter{
  constructor(public count:number){
    super(count)
  }

  pow(value:number){
    this.count = this.count ** value
    return this
  }
}

let powcounter = new PowerCounter(2)
powcounter
.pow(3)
.add(3)
.subtract(1)

console.log(powcounter.count) // 10

PowerCounter 继承了 Counter,本身只定义了 pow 这个实例方法,但是因为返回了  this 类型,所以可以使用父类中的方法。

 

在对象中,属性值可以是一个函数,函数内访问 this,默认情况下是对这个对象的引用,this 类型也就是这个对象的字面量类型:

const info = {
  name:'Tom',
  getName(){
    return this.name // Tom 这里的 this 类型是 {name:string, getName():string}
  }
}

如果显式指定了 this 类型,那么 this 的类型就改变了:

const info = {
  name:'Tom',
  getName(this:{age:number}){
    this // 这里的 this 类型就是 {age: number}
  }
}

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript笔记发布时间:2022-07-18
下一篇:
使用typescript开发vue项目发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap