TypeScript详解四：类（class）

剑九六千里

已于 2023-07-09 17:58:07 修改

阅读量438

点赞数

分类专栏： TypeScript学习文章标签： typescript 学习 javascript

于 2022-07-22 08:58:37 首次发布

本文链接：https://blog.csdn.net/to_the_Future/article/details/125924513

版权

TypeScript学习专栏收录该内容

18 篇文章 14 订阅

订阅专栏

一、TypeScript中类的介绍

本文将介绍TypeScript中类的基本用法。

1. 类的基本使用

类的定义方式和ES6的class基本相同，如下所示：

class Person {
  name: string="word";
  getName(): void{
    console.log(this.name);
  }
}
const p1 = new Person();
p1.name = "hello";
p1.getName();


// 编译成ES5
var Person = /** @class */ (function () {
    function Person() {
        this.name = "word";
    }
    Person.prototype.getName = function () {
        console.log(this.name);
    };
    return Person;
}());
var p1 = new Person();
p1.name = "hello";
p1.getName();

这段代码定义了一个Person类，该类有一个name属性和一个getName()方法。我们可以实例化这个类并修改实例的属性值，然后调用getName()方法。

2.定义存取器

存取器是一种特殊的方法，用于读取和设置类的属性值。它们通常用于隐藏类的内部实现，同时允许在属性值被访问或修改时执行其他逻辑。

以下是一个使用存取器的示例：

// 普通使用
class Hello {
  myName: string;
  constructor(myName: string) {
    this.myName = myName;
  }
  get name() {
    return this.myName;
  }
  set name(value) {
    this.myName = value;
  }
}
const hello = new Hello("hello");
hello.name = "word";
console.log(hello.name); // word


// 编译成ES5，本质就是Object.defineProperty()
var Hello = /** @class */ (function () {
    function Hello(myName) {
        this.myName = myName;
    }
    Object.defineProperty(Hello.prototype, "name", {
        get: function () {
            return this.myName;
        },
        set: function (value) {
            this.myName = value;
        },
        enumerable: false,
        configurable: true
    });
    return Hello;
}());
var hello = new Hello("hello");
hello.name = "word";
console.log(hello.name); // word

这个示例定义了一个Hello类，该类有一个myName属性和一个使用get/set存取器定义的name属性。我们可以实例化这个类并修改实例的属性值，然后访问name属性值。

另外，我们也可以使用修饰符来简化类的定义：

// 优化 public:将属性变为公开的
class Hello {
  constructor(public myName: string) {
  }
  get name() {
    return this.myName;
  }
  set name(value) {
    this.myName = value;
  }
}
const hello = new Hello("hello");
hello.name = "word";
console.log(hello.name); // word

这个示例中，我们使用public修饰符来简化类的定义。这意味着我们不需要显式地定义myName属性，而是可以直接在构造函数中通过参数定义。

3.补充public和readonly用法

在类中，我们还可以使用public和readonly修饰符来更改属性的访问权限。public修饰符表示属性是公开的，可以被任何人访问；readonly修饰符表示属性是只读的，只能在构造函数中初始化。

以下是一个使用readonly修饰符的示例：

class Animal {
  // readonly定义的属性，只能在constructor中改变
  public readonly name: string;
  constructor(name: string) {
    this.name = name;
  }
  changeName(name: string) {
    // 在此处改变name的值会报错
    this.name = name;
  }
}

这个示例定义了一个Animal类，该类有一个name属性，并且该属性是只读的。在构造函数中初始化之后，我们不能在其他地方更改该属性的值，否则会引发编译错误。

4.类的继承

类的继承是一种常见的面向对象编程技术，它允许我们创建一个新的类，该类继承自另一个类的属性和方法。在TypeScript中，我们可以使用extends关键字来实现类的继承。

以下是一个使用类继承的示例：

class Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  getName(): string {
    return this.name;
  }
  setName(name: string): void {
    this.name = name;
  }
}

class Student extends Person {
  stuNo: number;
  constructor(name: string, age: number, stuNo: number) {
    super(name, age);
    this.stuNo = stuNo;
  }
  getStuNo(): number {
    return this.stuNo;
  }
}
const s1 = new Student('tom', 18, 100)
console.log(s1.name, s1.age, s1.stuNo); // tom 18 100

这个示例定义了一个Person类和一个Student类，该Student类继承自Person类。Student类有一个额外的属性stuNo，我们可以实例化这个类并访问其属性值。

5.类的修饰符

类的修饰符用于控制类的属性和方法的访问权限。在TypeScript中，类的修饰符包括public、private、protected和static。

public修饰符表示属性或方法是公开的，可以被任何人访问。
private修饰符表示属性或方法是私有的，只能在类内部访问。
protected修饰符表示属性或方法是受保护的，只能在类内部及其子类中访问。
static修饰符表示属性或方法是静态的，可以在类本身上访问，而不需要实例化类。

以下是一个使用类修饰符的示例：

class Father {
  static fatherName: string = "fatherName";
  toString():void { console.log('Father'); }
  public name: string; // public 自己及自己的子类，其他类都能访问到
  protected age: number; // protected 自己及自己的子类可以访问，其他类访问不到
  private hobby: string; // private 自己能访问，子类及其他类不能访问
  constructor(name: string, age: number, hobby: string) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
  }
  getName(): string {
    return this.name;
  }
}

class Child extends Father {
  static childName: string = "childName"; // 父类的静态属性会挂在子类的静态属性上
  toString(): void {
    // super.toString(); // 这样也可以调父类的方法
    console.log('Child');
  }
  constructor(name: string, age: number, hobby: string) {
    super(name, age, hobby);
  }
  desc():void {
    console.log(this.name); // tom 说明public生效
    console.log(this.age); // 18 说明protected生效
    // console.log(this.hobby); // 属性“hobby”为私有属性，只能在类“Father”中访问
  }
}

const father = new Father('tom', 18, '睡觉')
father.toString(); // 此时打印的是Father，想调用父类中被子类覆盖的属性或方法，需要new父类的实例对象

const child = new Child('tom', 18, '睡觉')
child.desc();
// child.age; // 属性“age”受保护，只能在类“Father”及其子类中访问
// child.hobby // 属性“hobby”为私有属性，只能在类“Father”中访问
console.log(Child.fatherName); // fatherName
console.log(Child.childName); // childName
child.toString(); // 此时打印的是Child，说明如果子类和父类有同名属性或方法，子类会覆盖父类的属性或方法