返回顶部
首页 > 资讯 > 前端开发 > JavaScript >TypeScript 学习笔记之 typeScript类定义,类的继承,类成员修饰符
  • 288
分享到

TypeScript 学习笔记之 typeScript类定义,类的继承,类成员修饰符

2024-04-02 19:04:59 288人浏览 八月长安
摘要

目录1、类的定义2、类的继承3、修饰符前言: typescript 中的类与 es6 中的类非常相似,如果不知道 ES6 中的类,建议先学习下 ES6 中的 class 。本篇文章重

前言:

typescript 中的类与 es6 中的类非常相似,如果不知道 ES6 中的类,建议先学习下 ES6 中的 class 。本篇文章重点介绍 typeScript 中的类定义、继承以及修饰符。

1、类的定义

类描述了所创建的对象共同的属性和方法。typeScript 支持面向对象的所有特性,比如类、接口等。

typeScript 中定义类的时候,使用 class 关键字,类名首字母使用大写,类可以包含以下三个模块:

  • ​字段​ - 字段是类里面声明的变量,表示与对象有关的属性。
  • ​构造函数​ - 类实例化时自动调用,可以为实例化的对象分配内存。
  • ​方法​ - 方法为对象要执行的某种操作。

定义属性的时候,需要添加属性类型,构造函数中的参数也需要加类型,引用任何一个类的成员的时候都用 this ,this 关键字表示当前类实例化的对象。使用 new 关键字来实例化对象,并初始化它。

如示例:

class WEB{
 workTime: string
 constructor(n:string) {
  this.workTime = n
 }
 showWork(){
  return "搬砖的前端"
 }
}
let qq = new Web("五年")
console.log(qq.showWork());
console.log(qq.workTime);

编译以上代码,得到的 js 代码如下:

"use strict";
class Web {
 constructor(n) {
  this.workTime = n;
 }
 showWork() {
  return "搬砖的前端";
 }
}
let qq = new Web("五年");
console.log(qq.showWork());
console.log(qq.workTime);

2、类的继承

typeScript 支持继承类,即可以在创建类的时候继承一个已存在的类,类继承的时候使用 extends 关键字,基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类。比如:

class Dirnks{
 name: string
 constructor(n: string) {
  this.name = n
 }
 save(m: string) {
  console.log(`${this.name}饮料应该${m}`);
 }
}
class Soda extends Dirnks{
 constructor(n: string) {
  super(n)
 }
}
let kele = new Soda("可乐")
kele.save("冷藏")

上述示例是一个最基本的类继承,其中 Soda 继承了 Dirnks 的属性和方法,其中 Soda 是一个派生类,也叫做子类,Dirnks 是一个基类,也叫超类或父类。

派生类包含了一个构造函数,构造函数必须调用 super() ,会执行基类的构造函数。需要注意的是:在子类构造函数里访问 this 的属性之前,一定要先调用 super ,这是 typeScript 强制执行的一条重要规则。

如果父类和子类都包含某一方法时,方法名相同,但是具体执行内容不同的时候,该执行哪一个方法呢?

修改上述实例,给子类也添加一个方法,代码如下:

class Dirnks{
 name: string
 constructor(n: string) {
  this.name = n
 }
 save(m: string) {
  console.log(`${this.name}饮料应该${m}`);
 }
}
class Soda extends Dirnks{
 constructor(n: string) {
  super(n)
 }
 save() {
  return "存储方法"
 }
}
let kele = new Soda("可乐")
console.log(kele.save());

编译以上代码啊,得到的 js 代码如下:

"use strict";
class Dirnks {
 constructor(n) {
  this.name = n;
 }
 save(m) {
  console.log(`${this.name}饮料应该${m}`);
 }
}
class Soda extends Dirnks {
 constructor(n) {
  super(n);
 }
 save() {
  return "存储方法";
 }
}
let kele = new Soda("可乐");
console.log(kele.save());

此时会执行子类中的方法。其原理是,类继承后,子类可以对父类的方法进行重新定义,这个过程称之为方法的重写。

typeScript 中子类只能继承一个父类,虽然不支持继承多个类,但是支持多重继承。如下:

class One{
 name: string
 constructor(n: string) {
  this.name = n
 }
 show() {
  return "展示"
 }
}
class Two extends One{
 constructor(n:string) {
  super(n)
 }
}
class Three extends Two{
 constructor(n: string) {
  super(n)
 }
}
let three = new Three("剁成")
console.log(three.show());

3、修饰符

typeScript 中,可以使用访问控制符来保护对类、变量、方法和构造函数的访问。typeScript 支持 3 种不同的访问权限,分别为:

  • ​public(默认)​ - 公有,表示共享的属性和方法。可以在任何地方被访问。
  • ​protected​ - 受保护,表示属性和方法被保护,可以被自身以及子类访问,不能在类外面使用。
  • ​private​ - 私有,只能被其定义所在的类访问。
  • ​readonly​ - 只读,只读属性必须在声明时或构造函数里初始化。

​理解 public​

在上边类中的成员定义的时候,没有明确使用任何修饰符,默认的就是 public 所以可以将上面的类改写为:

class HH{
 public name: string
 public constructor(n: string) {
  this.name = n
 }
}
let h = new HH("HH")
console.log(h.name);

使用 public 之后,对上面的应用并没有任何影响。

它的特点:被它标记的成员在类的里面、子类里面、类外面都可以访问到。

​理解 protected​

类中添加 protected 修饰符来修饰成员时,将上述实例的 public 修饰符修改为 protected 如下:

class HH{
 protected name: string
 constructor(n: string) {
  this.name = n
 }
}
let h = new HH("HH")
console.log(h.name); // 此处报错,提示 属性"name"受保护,只能在类 HH 及子类中访问

它的特点:被它标记的成员在类的里面、子类里面能使用,但是在类的外面不能使用。

​理解 private​

class HH{
 private name: string
 constructor(n: string) {
  this.name = n
 }
}
class H extends HH{
 constructor(n: string) {
  super(n)
 }
 show() {
  console.log(this.name); // 报错
 }
}
let h = new H("HH")
console.log(h.name);  // 报错
h.show()

上面的示例报错,提示:属性“name”为私有属性,只能在类“HH”中访问。

它的特点:被它标记的成员不能再声明它的类的外部访问。

到此这篇关于TypeScript 学习笔记之 typeScript类定义,类的继承,类成员修饰符的文章就介绍到这了,更多相关 typeScript类定义,类的继承,类成员修饰符内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: TypeScript 学习笔记之 typeScript类定义,类的继承,类成员修饰符

本文链接: https://lsjlt.com/news/140070.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • TypeScript 学习笔记之 typeScript类定义,类的继承,类成员修饰符
    目录1、类的定义2、类的继承3、修饰符前言: typeScript 中的类与 ES6 中的类非常相似,如果不知道 ES6 中的类,建议先学习下 ES6 中的 class 。本篇文章重...
    99+
    2024-04-02
  • TypeScript学习笔记之类型缩小
    目录类型缩小什么是类型缩小呢?常见的类型保护有如下几种:typeof平等缩小instanceofin总结类型缩小 什么是类型缩小呢? 类型缩小的英文是 Type Narrowing;...
    99+
    2024-04-02
  • TypeScript学习笔记之类型窄化篇
    目录前言类型推论真值窄化相等性窄化in操作符窄化instanceof窄化窄化的本质联合类型的窄化总结前言 TS最好用的地方就是强类型,随之而来的就是类型窄化,摸鱼的时候顺道总结下. ...
    99+
    2024-04-02
  • C++学习笔记之类成员指针
    C++的类成员指针是一种奇葩的指针。 假设现在我们要表示一个三维的点,现在有两种定义方式: struct point1{ int x, y, z; }; struct point...
    99+
    2024-04-02
  • C++继承类成员访问权限修饰符详解
    目录1. 前言2. 不同修饰下的类成员被访问权限3. 继承时的属性变化4. protected的作用总结1. 前言 C++提供了三个修饰符来限定类成员的被访问权限,分别是public...
    99+
    2024-04-02
  • 如何进行C++继承类成员访问权限修饰符的分析
    这期内容当中小编将会给大家带来有关如何进行C++继承类成员访问权限修饰符的分析,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。1. 前言C++提供了三个修饰符来限定类成员的被访问权限,分别是public ,...
    99+
    2023-06-21
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作