TypeScript学习笔记(五) 类

最新推荐文章于 2024-09-21 16:01:20 发布
最新推荐文章于 2024-09-21 16:01:20 发布
阅读量1k 收藏 16
点赞数 28
分类专栏： TypeScript 文章标签： typescript 类 封装 继承 实现 抽象 class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsmrzx/article/details/138769817
版权

大家好，我是半虹，这篇文章来讲 TypeScript 中的类

类是面向对象编程中的重要概念，可以提供一种组织和规划代码的方式

同时也是对象的蓝图，定义对象的状态和行为，也即对象的属性和方法

下面具体介绍  TypeScript  中类的用法，包括类的定义、使用、拓展等


1、定义

使用 class  关键字可以定义类，在类中可以声明属性和方法

（1）声明属性

可以在类的顶层声明属性，同时还能显式声明属性类型

若无显式声明，那么就会被隐式推导为 any

class Person {
  // 声明属性
  name: string; // 属性名为 name，类型为 string
  age : number; // 属性名为 age ，类型为 number
}

另外还能设置属性默认值，此时属性类型声明可以省略

编译器会根据属性默认值来自动推导类型

class Person {
  // 声明属性
  name = 'Jack'; // 属性名为 name，默认值为 Jack，此时类型会被推导为 string
  age  = 18;     // 属性名为 age ，默认值为 18  ，此时类型会被推导为 number
}

（2）声明方法

同样在类的顶层声明方法，此时可以在函数字面量声明参数和返回值类型

函数内可以使用 this 访问类中其它的属性和方法

class Person {
  name: string;
  age : number;

  // 声明方法
  // 接收零个参数，返回一个字符串
  sayHi():string {
    return `My name is ${this.name}. I am ${this.age} years old.`
  }
}

（3）构造函数

构造函数在实例化对象时自动执行并返回一个对象，构造函数名称必须为 constructor

通常会在该函数内执行一些必要的初始化工作，例如初始化属性值

class Person {
  name: string;
  age : number;

  // 构造函数
  // 接收一个字符串和一个数字，分别用于初始化 name 和 age 属性，默认返回 Person 类型对象
  constructor(name:string, age:number) {
    this.name = name;
    this.age  = age ;
  }

  sayHi():string {
    return `My name is ${this.name}. I am ${this.age} years old.`
  }
}

（4）只读属性

可以使用 readonly 关键字声明某个属性只读，表示该属性无法被修改

只读属性 只能在声明时赋予初始值，或是在构造函数中赋予或修改其值

class Person {
  readonly name: string = 'Jack'; // 声明只读属性，同时赋予初始值
  readonly age : number;          // 声明只读属性，没有赋予初始值

  // 构造函数
  constructor() {
    this.name = 'Jacky'; // 修改只读属性，编译正常
    this.age  = 18;      // 赋值只读属性，编译正常
  }

  // 普通方法
  changeProps() {
    this.name = 'Jacky'; // 修改只读属性，编译错误
    this.age  = 18;      // 修改只读属性，编译错误
  }
}

（5）存取器方法

存取器是特殊的类方法，用于控制对成员的访问，具体来说包括有两类：

  • 取值器方法：使用  get  关键字定义，在属性被读取时调用，用于控制属性读取行为
  • 存值器方法：使用  set  关键字定义，在属性被写入时调用，用于控制属性写入行为
class Person {
  _name = 'Jack';

  // 取值器方法，其中 get 是关键字，name 是属性名，在读取 name 属性时，该方法会自动调用
  // 该方法不接收任何参数，且返回值类型就是属性类型
  get name() {
    return this._name;
  }

  // 存值器方法，其中 set 是关键字，name 是属性名，在写入 name 属性时，该方法会自动调用
  // 该方法只接收一个参数，且参数的类型默认是取值器返回类型
  set name(newName) {
    this._name = newName;
  }
}

注意，一个属性的存取器并不要求同时都有声明，此时会有以下的表现：

  • 如果一个属性只声明取值器，不声明存值器，那么写入该属性时会失败
  • 如果一个属性只声明存值器，不声明取值器，那么读取该属性时会返回 undefined
class Person {
  _name = 'Jack';
  _age  = 18;

  get name() {              // 只有取值器
    return this._name;
  }

  set age(newAge) {         // 只有存值器
    this._age = newAge;
  }

  getProps() {
    console.log(this.name); // 正常
    console.log(this.age);  // 编译时正常，运行时返回 undefined
  }

  setProps() {
    this.name = 'Jacky';    // 编译时报错，运行时不会执行任何逻辑
    this.age = 21;          // 正常
  }
}

2、使用

（1）实例化

使用  new  关键字可以实例化对象，每个对象都有类中定义的属性和方法

需要注意的是，不同的实例化对象中属性和方法是独立的，它们互不影响

// 定义类

class Person {
  // 声明属性
  name = 'Jack';

  // 声明方法
  sayHi() {
    console.log('Hi');
  }
}

// 实例化对象

let person1 = new Person(); // person1 变量的类型是 Person，可以显式指定为 person1:Person
let person2 = new Person(); // person2 变量的类型是 Person，可以显式指定为 person2:Person

person1.name = 'Jacky';
console.log(person1.name); // Jacky
console.log(person2.name); // Jack

person1.sayHi = function() {
  console.log('Hello');
}
person1.sayHi(); // Hello
person2.sayHi(); // Hi

（2）类型

TypeScript 中代码分为两种，分别是值代码和类型代码，二者位于不同的命名空间

一般情况下，代码要么属于值代码，要么属于类型代码，而在编译时只保留值代码

// 值代码
// 编译时会被保留
let a = 'string';
let b = function() { console.log('function'); }

// 类型代码
// 编译时会被删除
type c = number|string;
interface d {
  e: number;
  f: string;
}

但类声明比较特别，就和枚举一样，其既是类型也是值

编译器会根据上下文自动推断这时候用的是类型还是值，这种特性用起来十分方便

// 枚举
enum G {
  h,
  i,
  j,
}
let g:G = G.h;     // 其中，第一个 G 表示的是类型，第二个 G 表示的是值

// 类
class K {}
let k:K = new K(); // 其中，第一个 K 表示的是类型，第二个 K 表示的是值

总结一下，类本身就是类型，不过此时表示的是该类实例对象的类型

与此同时，类本身也是值，而这时可以使用 typeof 获取该类作为值时的类型

class Point {
  x:number;
  y:number;
  // 构造函数
  constructor(x:number, y:number) {
    this.x = x;
    this.y = y;
  }
}

function createPoint(
  PointClass: typeof Point, // 接收的是 Point 类的本身，不是 Point 类的实例对象，此时可以使用 typeof 获取类的类型
  x:number,
  y:number,
):Point {
  return new PointClass(x, y);
}

let point1:Point = createPoint(Point, 1, 2);
let point2:Point = createPoint(Point, 3, 4);

本质上，类不过是构造函数的语法糖，因此也可以用构造函数的类型签名描述类的类型

构造函数的类型签名相比于普通函数，主要区别在于前面多了  new  关键字来进行修饰

// 普通函数的类型签名有两种写法，因此构造函数的类型签名也是有两种写法，一种是简写版，一种是完整版

type PointType1 = new (x:number, y:number) => Point; // 简写版
type PointType2 = {                                  // 完整版
  new (x:number, y:number): Point;
}

function createPoint(
  PointClass: PointType1, // 或者是 PointType2
  x:number,
  y:number,
):Point {
  return new PointClass(x, y);
}

（3）静态成员

之前介绍的类中定义的属性和方法，类本身是无法使用的，只能由实例化对象使用

但是有些场景下，一些属性和方法更适合由类本身使用嘞，例如：

  • 类的所有实例需要共享某些属性或方法
  • 某些属性或方法是与类的实例对象无关

这时候就需要定义静态成员，静态成员只由类本身使用，并不能由实例化对象使用

可以使用 static 关键字定义静态成员，静态成员有二，包括静态属性和静态方法

class Test {
  // 实例属性
  x:number = 0;
  // 静态属性
  static y:number = 0;
  // 实例方法
  printX() {
    console.log(this.x);
  }
  // 静态方法
  static printY() {
    console.log(this.y);
  }
}

Test.x;        // 编译报错
Test.y;        // 编译正常
Test.printX(); // 编译报错
Test.printY(); // 编译正常

let test = new Test();

test.x;        // 编译正常
test.y;        // 编译报错
test.printX(); // 编译正常
test.printY(); // 编译报错

3、继承 (extends)

（1）继承

继承是面向对象编程中的重要概念，允许一个类（子类）基于另外一个类（父类）定义

子类能继承父类的属性和方法，并且能在此基础上添加自己的属性和方法

可以用  extends 关键字实现，在该关键字之后可指定当前类继承的父类

class Father {
  greeting:string = 'Hi.';
  sayHi() {
    console.log(this.greeting);
  }
}

class Son extends Father { // 可以用 extends 关键字实现继承
  identity:string = 'I am son.';
  identify() {
    console.log(this.greeting, this.identity);
  }
}

let f = new Father();
let s = new Son();

s.sayHi();    // 子类可以继承父类的属性和方法，输出为：Hi.
s.identify(); // 子类也能添加自己的属性和方法，输出为：Hi. I am son.

// 根据结构类型原则
// 任何可以使用父类的地方都可以使用子类代替 ，但反之不行
let a:Father = f;
a = s; // 编译正常
let b:Son = s;
b = f; // 编译报错

子类可定义与父类同名的属性和方法，此时定义的属性和方法会覆盖父类的属性和方法

但是要注意，这些同名的属性和方法要兼容原来的类型声明，否则编译器会报错不通过

class Father {
  greeting:string = 'Hi.';
  sayHi() {
    console.log(this.greeting);
  }
}

class Son extends Father {
  greeting:string = 'Hello.'; // 同名属性
  identity:string = 'I am son.';
  sayHi() { // 同名方法
    console.log(this.greeting, 'I am new.');
  }
  identify() {
    console.log(this.greeting, this.identity);
  }
}

let f = new Father();
let s = new Son();

f.sayHi();    // Hi.
s.sayHi();    // Hello. I am new.
s.identify(); // Hello. I am son.

子类方法中还能调用父类方法，此时只要使用 super 关键字即可

  • 构造函数中，调用方式为 super()，此时会调用 父类的构造函数

    而且要注意，子类如果有 构造函数 ，构造函数中 一定要有 super()

  • 普通方法中，调用方式为 super.父类方法()

class Father {
  greeting:string;
  constructor(greeting) {
    this.greeting = greeting;
  }
  sayHi() {
    console.log(this.greeting);
  }
}

class Son extends Father {
  greeting:string;
  identity:string;
  constructor(greeting, identity) {
    super(greeting); // 调用父类的构造函数，如果缺少，就会报错
    this.identity = identity;
  }
  sayHi() {
    super.sayHi();   // 调用父类的普通方法，需要注意，虽然此时执行的是父类方法的逻辑，但是其中的 this 指向子类
    console.log(this.greeting, 'I am new.');
  }
  identify() {
    super.sayHi();   // 调用父类的普通方法，需要注意，虽然此时执行的是父类方法的逻辑，但是其中的 this 指向子类
    console.log(this.greeting, this.identity);
  }
}

let f = new Father('Hi.');
let s = new Son('Hello.', 'I am son.');

f.sayHi();    // Hi.
s.sayHi();    // Hello.           (注意这里是 Hello，而不是 Hi)
              // Hello. I am new.
s.identify(); // Hello.           (注意这里是 Hello，而不是 Hi)
              // Hello. I am son.

（2）访问修饰符

为了控制类中成员对外部代码的可见性，TypeScript 提供有三种访问修饰符

这些修饰符对类本身以及类继承后成员的访问都有着一定的约束

  • public       表示公有成员，该成员既能在类内部访问，也能通过类实例访问

    public       成员可被继承，且继承后的可访问性不变

  • protected 表示保护成员，该成员可以在类内部访问，不能通过类实例访问

    protected 成员可被继承，且继承后的可访问性不变，但也可以将其设置为 public

  • private     表示私有成员，该成员可以在类内部访问，不能通过类实例访问

    private     成员不可继承，且子类定义父类私有成员的同名成员会导致报错

需要注意的是 ，如果没有设置任何访问修饰符，默认就是 public

class Father {
  public x = 'x';    // 公有成员
  protected y = 'y'; // 保护成员
  private z = 'z';   // 私有成员

  // 类内部
  testF() {
    console.log(this.x); // 编译正常，公有成员可以在类内部访问
    console.log(this.y); // 编译正常，保护成员可以在类内部访问
    console.log(this.z); // 编译正常，私有成员可以在类内部访问
  }
}
// 类实例
let f = new Father();
f.x; // 编译正常，公有成员可以用类实例访问
f.y; // 编译报错，保护成员不能用类实例访问
f.z; // 编译报错，私有成员不能用类实例访问

class Son extends Father {
  // 继承后：
  // 公有成员 x 可被继承，且其可访问性仍为 public
  // 保护成员 y 可被继承，且其可访问性仍为 protected
  // 私有成员 z 不可继承

  // 等价于：
  // public x = 'x';     // 公有成员
  // protected y = 'y';  // 保护成员，此时可以将其改为公有成员：public y = 'y';

  // 类内部
  testS() {
    console.log(this.x); // 编译正常，公有成员可以在类内部访问
    console.log(this.y); // 编译正常，保护成员可以在类内部访问
    console.log(this.z); // 编译错误，相当于无定义
  }
}
// 类实例
let s = new Son();
s.x; // 编译正常，公有成员可以用类实例访问
s.y; // 编译报错，保护成员不能用类实例访问
s.z; // 编译报错，相当于无定义

4、实现 (implements)

我们知道，type 和 interface 都能用于定义一个类型声明

那么其实，type 和 interface 也能用对象形式的类型声明为类指定一组检查条件

type typeC = {
  p1: number;
  p2: string;
  f1: (x:number, y:number) => number;
}

interface interfaceC {
  p1: number;
  p2: string;
  f1: (x:number, y:number) => number;
}

在定义类时，可以用 implements 指定检查条件，如有多个，则用逗号分隔

在实现类时，需要满足这些条件， 具体来说：

  • 类需要实现检查条件中的所有成员，且成员的类型也要满足条件
  • 类可以定义检查条件中没有的成员
class C implements typeC {
  p1: number;
  p2: string;
  f1(x:number, y:number):number { return x + y; }
  f2(x:string, y:string):string { return x + y; }
}

5、抽象 (abstract)

在定义类时，如果在类的前面加上 abstract 关键字，则表示该类是抽象类

抽象类无法被实例化，故只能作为父类使用， 普通类可以继承该类并实例化

// 抽象类
abstract class Person {
  name: string;
  age : number;
}
let p = new Person(); // 编译错误，抽象类无法实例化

// 抽象类
// 抽象类可以继承抽象类
abstract class Doctor extends Person {
  
}
let d = new Doctor(); // 编译错误，抽象类无法实例化

// 普通类
// 普通类可以继承抽象类
class Lawyer extends Person {
  
}
let l = new Lawyer(); // 编译正常，普通类可以实例化

在抽象类中，如果在成员前面加上 abstract 关键字，则表示成员是抽象成员

抽象成员不能有具体实现，而普通子类则必须 实现所有的抽象成员，否则报错

abstract class Person {
  // 抽象成员只能存在于抽象类
  abstract name: string;
  abstract age : number;
  abstract addF(x:number, y:number):number; // 抽象成员不能有具体实现
}

// 抽象子类，可以不实现抽象成员
abstract class Doctor extends Person {
  
}

// 普通子类，必须要实现抽象成员
class Lawyer extends Person {
  name: string;
  age : number;
  addF (x:number, y:number):number { return x + y; }
}

好啦，本文到此结束，感谢您的阅读！

如果你觉得这篇文章有需要修改完善的地方，欢迎在评论区留下你宝贵的意见或者建议

如果你觉得这篇文章还不错的话，欢迎点赞、收藏、关注，你的支持是对我最大的鼓励 (/ω＼)

半虹
关注
专栏目录
TypeScript学习笔记
bill的博客
03-24 610
TypeScript学习笔记
typeScript学习笔记
04-27
TypeScript学习笔记 TypeScript是一个自由和开源的编程语言，由微软开发。它是JavaScript的一个超集，扩展了JavaScript的语法，解决了JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化。TypeScript支持...
TypeScript学习笔记(全)
q1372302825的博客
06-30 800
本文概述了TypeScript的基本类型系统，包括但不限于原始类型（如string、number、boolean）、数组、元组、枚举以及任意类型（any），强调了类型注解在提升代码质量方面的作用。探讨了类与接口的使用，如何通过类的继承、接口的实现来促进代码复用与结构化设计。介绍了泛型的概念与应用，文章还涉及了高级主题，如类型推断、类型别名、装饰器的使用，以及如何利用模块和命名空间组织提升项目的可管理性。
typescript 学习笔记
nihaio25的博客
09-05 1133
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。
TypeScript学习笔记2
最新发布
2302_80985169的博客
09-21 795
1.3TypeScript表达式1.3TypeScript表达式变量的命名规则TypeScript变量的命名规则遵循以下规则：1. 变量名必须以字母、下划线(_)或者美元符号($)开头。不能以数字开头。2. 变量名可以包含字母、数字、下划线(_)或者美元符号($)。3. 变量名是区分大小写的，例如myVariable和myvariable是不同的变量名。4. 变量名应该尽量使用驼峰命名法，即首字母小写，后续单词首字母大写，例如myVariableName。
TypeScript 学习笔记
Alex_CYX的博客
07-22 1111
本博客记录了学习TypeScript的过程。涵盖了TypeScript的基础知识、高级特性以及实用工具。内容包括TypeScript的安装与配置、基本语法、类型系统、函数和类的使用、模块化开发等。
typescript学习笔记
Cosmic Lover
12-15 1052
泛型（Generics）是 TypeScript 中的一个重要特性，它允许你编写可重用的、灵活的代码，同时提高代码的类型安全性。接口在 TypeScript 中是一种非常有用的工具，它有助于增强代码的可读性和可维护性，同时可以进行静态类型检查，帮助开发者在开发过程中捕获潜在的错误。泛型是 TypeScript 中非常强大和灵活的功能，它允许你编写更具通用性和可维护性的代码，并提供了强类型检查，有助于在编译时捕获潜在的错误。在函数中使用泛型可以使函数接受不同类型的参数，同时确保正确的类型检查。
TypeScript学习笔记（一）——TypeScript介绍与常用类型注解
weixin_56370772的博客
08-09 1062
TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统。所有的 JS 代码都是 TS 代码。JS 有类型（比如，number/string 等），但是JS 不会检查变量的类型是否发生变化。而TS 会检查。TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性。类型注解常用基础类型。
Typescript学习笔记
zhoushuaiyxlmwan的博客
07-09 347
TypeScript学习笔记
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 2108
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
7. 吴恩达机器学习课程-作业7-Kmeans and PCA
wujing1_1的博客
02-22 1051
fork了别人的项目，自己重新填写，我的代码如下 https://gitee.com/fakerlove/machine-learning/tree/master/code 代码原链接 文章目录7. 吴恩达机器学习课程-作业7-Kmeans and PCA7.1 k-means7.1.1 题目介绍7.1.2 算法流程7.1.3 实现k-means7.1.4 测试7.2 图像压缩与k-均值7.3 PCA7.3.1 题目介绍7.3.2 算法流程7.3.3 代码1) 示例数据集2) 实现PCA3) 脸图像数据集
算法提高分类学习刷题——1.动态规划——1.3背包模型
m0_51474171的博客
02-25 3516
（1）01背包 模型 题目介绍 有 N件物品和一个容量为 V 的背包，每件物品有各自的价值且只能被选择一次，要求在有限的背包容量下，装入的物品总价值最大。 「0-1 背包」是较为简单的动态规划问题，也是其余背包问题的基础。 动态规划是不断决策求最优解的过程，「0-1 背包」即是不断对第 i个物品的做出决策，「0-1」正好代表不选与选两种决定。 二维 （1）状态f[i][j]定义：前i个物品，背包容量j下的最优解（最大价值）： 当前的状态依赖于之前的状态，可以理解为从初始状态f[0][0] = 0开.
算法提高分类学习刷题——1.动态规划——1.2.最长上升子序列模型
m0_51474171的博客
02-21 1483
最长上升子序列模型 1.最长上升子序列 题目描述 给定一个长度为 N 的数列，求数值严格单调递增的子序列的长度最长是多少。 输入格式 第一行包含整数 N。 第二行包含 N 个整数，表示完整序列。 输出格式 输出一个整数，表示最大长度。 数据范围 1≤N≤1000， −109≤数列中的数≤109 输入样例： 7 3 1 2 1 8 5 6 输出样例： 4 解题思路 因为以i结尾的子序列，一定是由前i-1个数结尾的子序列长度加一取max 比如一个子序列a[j]a[i] ,那么当a[j]<a[i
类和对象进阶
sqjddb的博客
02-23 532
/关于访问限定符的几点说明 /类的实例化 /计算类对象的大小 /深入理解this指针 /六大默认成员函数 /const修饰成员函数 /细谈成员函数 /对象成员的初始化 /static成员 /友元 /内部类
经典的图像分类模型
最白の白菜的博客
02-22 5368
目录经典的图像分类模型AlexNetAlexNet的网络架构手写数字势识别数据读取模型编译模型训练模型评估VGGVGG的网络架构手写数字势识别数据读取模型编译模型训练模型评估GoogLeNetInception 块GoogLeNet模型B1模块B2模块B3模块B4模块B5模块手写数字识别数据读取模型编译模型训练模型评估延伸版本InceptionV2InceptionV3ResNet残差块ResNet模型手写数字势识别数据读取模型编译模型训练模型评估 经典的图像分类模型 AlexNet 学习目标 知道Ale
年薪20W的自动化测试工程师教你用Postman做接口测试
02-23 2042
The higher your test coverage, the more flexible and bug-resistant your code will be, and the less time you’ll spend debugging hot fixes in production. 测试覆盖率越高，代码就越灵活，生产中调试修补程序所花费的时间就越少。 首先，比较遗憾的一点是，Postman对并发测试并不好，但支持指定次数与间隔时间的串行测试。 官方文档链接：Postman .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值