TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解（学习总结---从入门到深化）

雨点打透心脏的1/2处 2024-02-05 15:32 25阅读 0赞

### ![95b81e7a86234bd5bf1155448239eb16.gif][] ###

**文章目录**

类的继承

访问修饰符

readonly 修饰符

存取器

实例方法与静态方法

实例属性与静态属性

静态属性

抽象类

接口初探

--------------------

### 类的继承 ###

![4dcc33b2ac354c40adbba151fadeb7bb.png][]

在 TypeScript 里，我们可以使用常用的面向对象模式。 基于类的程序设计中一种最基本的模式，是允许使用继承来扩展现有的类

**继承示例**

class Animal {
      move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
     }
    }
    class Dog extends Animal {
      bark() {
        console.log('Woof! Woof!');
     }
    }
    const dog = new Dog();
    dog.bark();
    dog.move(10);

为 **Dog** 继承了 **Animal** 的功能，因此我们可以创建一个 **Dog** 的实例，它能够 **bark()** 和 **move()**

class Animal{
      public name:string;
      // 温馨提示：子类继承父类，父类存在构造函数，子类必须实现构造函数
      constructor(name:string){
        this.name = name;
     }
      move(distanceInMeters:number){
        console.log(`${this.name} moved ${distanceInMeters}m.`);
     }
    }
    class Dog extends Animal{
      constructor(name:string){
        super(name)
     }
      drak(){
        console.log(this.name + " Woof! Woof!")
     }
    }
    class Snake extends Animal{
     constructor(name:string){
        super(name)
     }
      move(distanceInMeters: number): void {
        console.log(this.name + ":---" + distanceInMeters)
        // 执行父类的move方法
        super.move(distanceInMeters)
     }
    }
    const d = new Dog("dog")
    d.move(100)
    d.drak()
    const s = new Snake("蛇")
    s.move(1000)

### 访问修饰符 ###

![a124b11d210249318f509e16e40b09e9.png][]

在类中声明的属性与方法，可以添加访问修饰符控制可被访问的范围  
TypeScript 可以使用三种访问修饰符（Access Modifiers），分别是 **public** 、 **private** 和 **protected**

1、**public** 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是**public** 的  
2、private 修饰的属性或方法是私有的，不能在声明它的类的外部访问  
3、protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

**默认为** public

我们可以自由的访问程序里定义的成员，在 TypeScript 里，成员都默认为 public

name 被设置为了 public ，所以直接访问实例的 name 属性是允许的

class Animal {
      public name: string;
      public constructor(theName: string) {
        this.name = theName
     }
      public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
     }
    }

**理解 private**

当成员被标记成 private 时，它就不能在声明它的类的外部访问

class Animal {
      private name: string;
      public constructor(theName: string) {
        this.name = theName
     }
      public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
     }
    }
    let a = new Animal("动物")
    console.log(a.name) // Property 'name' is private and only accessible within class 'Animal'.

**理解 protected**

**protected** 修饰符与 **private** 修饰符的行为很相似，但有一点不同，**protected** 成员在派生类（子类）中仍然可以访问

class Animal {
      protected name: string;
      public constructor(theName: string) {
        this.name = theName
     }
     
    }
    class Cat extends Animal{
      constructor(theName:string){
        super(theName)
     }
      public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
     }
    }
    let c = new Cat("猫")
    c.move(10)

### readonly 修饰符 ###

![9aa5eabfc8be4ec0b780a1efa3dfb8c0.png][]

你可以使用 **readonly** 关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化

class Person {
      readonly name: string;
      constructor (theName: string) {
        this.name = theName;
     }
    }
    let p = new Person("iwen");
    p.name = "Man with the 3-piece suit"; // 错误! name 是只读的.

**与访问修饰符共用**

注意如果 **readonly** 和其他访问修饰符同时存在的话，需要写在其后面

class Person {
      public readonly name: string;
      constructor (theName: string) {
        this.name = theName;
     }
    }
    let p = new Person("iwen");
    p.name = "Man with the 3-piece suit"; // 错误! name 是只读的.

### 存取器 ###

![81a3404d80d54be09f2dcb6604fc0e13.png][]

TypeScript 支持通过 getters/setters 来截取对对象成员的访问。它能帮助你有效的控制对对象成员的访问。

class Animal {
      fullName:string
      getFullName(){
        console.log(this.fullName)
     }
    }
    let a = new Animal();
    a.fullName = "itxiaotong"
    a.getFullName()

>  **温馨提示**  
> 这里会出现版本问题  
> 1、TypeScript版本问题：增加 **tsconfig.json** ,并配置  
> 2、编译时版本问题： **tsc hello.ts -t es5**

**tsconfig.json**

{
      "compilerOptions": {
        "target": "es6"
     }
    }

### 实例方法与静态方法 ###

![0511fe83e2144012937eed5fc0e6b3fc.png][]

实例方法我们很熟悉了，就是在类中定义的方法并且通过实例对象调用  
使用 **static** 修饰符修饰的方法称为静态方法，它们不需要实例化，而是直接通过类来调用

**实例方法**

class Person {
      public name:string;
      constructor(name:string){
        this.name = name;
     }
     
      sayHello(){
        console.log(`${this.name}:Hello`)
     }
    }
    const p = new Person("itxiaotong")
    p.sayHello()

**静态方法**

class Person {
      public name:string;
      constructor(name:string){
        this.name = name;
     }
      sayHello(){
        console.log(`${this.name}:Hello`)
     }
      static sayHi(){
        console.log("Hi")
     }
    }
    Person.sayHi()

###  ###

### 实例属性与静态属性 ###

![ab3e337ba1654f999a094c5593f07e30.png][]

实例属性我们很熟悉，就是在类中直接定义的属性，可以通过实例对象调用  
ES7 提案中，可以使用 **static** 定义一个静态属性，在TypeScript中也同样适用,通过类名调用

**实例属性**

class Person {
      public name:string;
      constructor(name:string){
        this.name = name;
     }
    }
    const p = new Person("itxiaotong")
    p.sayHello()

### 静态属性 ###

class Person {
      public name:string;
      static age = 20
      constructor(name:string){
        this.name = name;
     }
    }
    console.log(Person.age)

###  ###

### 抽象类 ###

![8be41ee78ce5455f854b69002a0ee415.png][]

什么是抽象类？  
首先，抽象类是不允许被实例化的  
其次，抽象类中的抽象方法必须被子类实现  
**abstract** 用于定义抽象类和其中的抽象方法

abstract class Animal {
      public name:string;
      public constructor(name:string){
        this.name = name;
     }
      abstract makeSound(): void;
    }
    class Cat extends Animal{
      public constructor(name:string){
        super(name)
     }
      makeSound(): void {
       console.log(this.name + "叫了")
     }
    }
    const c = new Cat("猫")
    c.makeSound()

### 接口初探 ###

![0406a1f2518b40de91738e321e7a5f59.png][]

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做 “鸭式辨型法” 或 “结构性子类型化”。 在 TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定  
义契约

下面通过一个简单示例来观察接口是如何工作的

function printLabel(labeledObj: { label: string }) {
      console.log(labeledObj.label);
    }
    let myObj = {
      label: "Size 10 Object"
    }
    printLabel(myObj)

如果对象中是单一参数，那代码还具有可读性，可是如果参数是很多个，则大大降低了可读性  
修改为接口处理参数形式

interface LabeledValue {
      label: string;
    }
    function printLabel(labeledObj: LabeledValue) {
      console.log(labeledObj.label);
    }
    let myObj = {
      label: "Size 10 Object"
    }
    printLabel(myObj);

[95b81e7a86234bd5bf1155448239eb16.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/b68ff45f1749410cbb0812ccc472f269.png
[4dcc33b2ac354c40adbba151fadeb7bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/987f1ca51aad48beb583e79f1c45fc0b.png
[a124b11d210249318f509e16e40b09e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/118c4bf180d34a62babfc94e51ca867a.png
[9aa5eabfc8be4ec0b780a1efa3dfb8c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/b850d619f97a4ac5ab9e1f336965aa94.png
[81a3404d80d54be09f2dcb6604fc0e13.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/daf7b369b89041a28a4824c8f85f9ef2.png
[0511fe83e2144012937eed5fc0e6b3fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/b6dfa85d689e4865b009e93753fc74ab.png
[ab3e337ba1654f999a094c5593f07e30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/12ee4c73b7e74d4d814100a84f3a946d.png
[8be41ee78ce5455f854b69002a0ee415.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/2ea12838770d493e8d1e442992df019c.png
[0406a1f2518b40de91738e321e7a5f59.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/b321114cee7e4169a859dfc39b60ac62.png