TypeScript中class类型实例讲解

 更新时间:2022年12月30日 11:50:18   作者:亦世凡华、  
众所周知在TypeScript中定义变量需要指定标识符的类型,下面这篇文章主要给大家介绍了关于TypeScript中class类型的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

class类型

TypeScript支持ES引入的class关键字,并为其添加了类型注解和其他语法(例如:可见性修饰符)。

class person {
  // 声明初始值,可省略类型注解(TS类型推论为string)
  name:'张三'
  // 声明成员类型为 number 没有初始值
  age: number
}
const p = new person()
p.name
p.age

构造函数

在class构造函数中,需要为构造函数指定类型注解,否则会被隐式推断为any,构造函数不需要返回值类型。

class Person {
  name:string
  age:number
  constructor(name:string,age:number){
    this.name = name
    this.age = age 
  }
}
const p = new Person('张三',18)

在class的实例方法中,方法的类型注解(参数与返回值)与函数用法相同。

class Point {
  x=1
  y=2
  scale(n: number){
    this.x*=n
    this.y*=n
  }
}
const p = new Point()
p.scale(5)
console.log(p.x,p.y);// 5 10

class类的继承

在class类的继承中,提供了两种类的继承方式:1、extends(继承父类)  2、implements(实现接口)。注意:JS中只有extends,而implements是TS提供的。

class Animal {
  move(){
    console.log('我是动物');
  }
}
// 使用 extends 继承父类
class Dog extends Animal {
  name='狗'
  say(){
    console.log('我是狗');
  }
}
const p = new Dog()
p.move()// 我是动物
p.say()// 我是狗
console.log(p.name);// 狗
interface Animals {
  name: string
  say(): void
}
// Dog类继承接口Animals,意味着Dog类必须提供Animals接口中指定的所有方法和属性
class Dog implements Animals {
  name = 'hobble'
  say(): void {
    console.log('汪汪汪');
  }
}

可见修饰符

在class中,类的可见性可以使用TS来控制class的方法或属性对于class外的代码是否可见。可见性修饰符包括:public(公有的)、protected(受保护的)、private(私有的)。

class Animal1 {
  // 因为 public 是默认可见的,所以可以直接忽略
  public move(){
    console.log('我是动物');
  }
}
class Dog1 extends Animal1 {}
const p1 = new Dog1()
p1.move()// 我是动物
 
 
class Animal2 {
  // 仅对其声明的所在类和子类中(非实例对象)可见
  protected move(){
    console.log('我是动物');
  }
  run(){
    this.move
  }
}
class Dog2 extends Animal2 {
  say(){
    this.move
  }
}
const p2 = new Dog2()
// p.move() 报错
 
 
class Animal3 {
  // private表示私有的,只在当前类中可见,对实例对象以及子类是不可见的
  private move(){
    console.log('我是动物');
  }
  run(){
    this.move
  }
}
class Dog3 extends Animal3 {
  say(){
    // this.move 报错
  }
}

只读修饰符

除了可见修饰符之外,还有一个常见的修饰符就是:readonly(只读修饰符)。readonly:表示只读,用来防止在构造函数之外对属性进行赋值。

 class Person {
  // 注意:只要是readonly来修饰的属性,必须手动提供明确属性,否则就是字面量类型
  readonly age: number = 18
  constructor(age: number){
    this.age = age
  }
  setAge(){
    // 无法分配到 "age" ,因为它是只读属性。
    // this.age = 20 
  }
 }

注意:readonly只能修饰属性不能修饰方法。

在接口和{}表示的对象类型中,也可以使用 readonly 。

// 在接口中
interface People {
  readonly name: string
}
 
let obj: People = {
  name:'张三'
}
// obj.name = '李四' 报错
 
// 在对象中
let oj: { readonly name: string } = {
  name:'张三'
}
// oj.name = '李四' 报错

总结

到此这篇关于TypeScript中class类型实例讲解的文章就介绍到这了,更多相关TypeScript class类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript中for of和for in的区别详解

    JavaScript中for of和for in的区别详解

    对于初学者,我们或许只知道无论是for of还是for in他们都有一个功能那就是遍历,至于具体的细节或许我们不是很清楚,那么接下来我们就来详细的区分一下for of和for in他们之间的不同点和相同点,需要的朋友可以参考下
    2023-06-06
  • 微信小程序实现计算器小功能

    微信小程序实现计算器小功能

    这篇文章主要为大家详细介绍了微信小程序实现计算器小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • 基于JavaScript实现控制下拉列表

    基于JavaScript实现控制下拉列表

    这篇文章主要介绍了基于JavaScript实现控制下拉列表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • JS关键字球状旋转效果的实例代码

    JS关键字球状旋转效果的实例代码

    这篇文章主要介绍了JS关键字球状旋转效果的实例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JavaScript访问样式表代码

    JavaScript访问样式表代码

    在web页面中,我们经常需要通过修改样式(style)来达到更好的用户体验,需要的朋友可以参考下。
    2010-10-10
  • Javascript实现一朵从含苞到绽放的玫瑰

    Javascript实现一朵从含苞到绽放的玫瑰

    今天小编就为大家分享一篇关于Javascript实现一朵从含苞到绽放的玫瑰,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-03-03
  • Javascript函数的参数

    Javascript函数的参数

    本文给大家分享的是网易云课堂中金旭亮老师的课堂笔记,对于大家学习javascript非常有帮助,这里推荐给小伙伴们
    2015-07-07
  • JSON.parse 解析字符串出错的解决方法

    JSON.parse 解析字符串出错的解决方法

    程序中很多数据是动态拼接而成的json数据,最近在用json的时候老是现JSON.parse错误
    2010-07-07
  • webpack4 从零学习常用配置(小结)

    webpack4 从零学习常用配置(小结)

    这篇文章主要介绍了webpack4 从零学习常用配置(小结),详细的介绍了几个核心部分,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 浅析return false的正确使用

    浅析return false的正确使用

    “return false”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢
    2013-11-11

最新评论