web前端之TypeScript的类class 中各类属性、方法，抽象类、多态

目录

 

一、TypeScript 中的类

二、TypeScript 中类的继承

三、TypeScript 中公共，私有与受保护的修饰符

四、TypeScript 中 静态方法

五、TypeScript 中 继承与多态

---

一、TypeScript 中的类

class Persons {
  name: any;
  age: number | undefined;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  getName(): void {
    console.log(`${this.name}今年已经${this.age}岁了`);
  }
}
 
let p11 = new Persons("za", 123);
console.log(p11.getName()); // za今年已经123岁了

转换成 ES5 的代码后：

var Persons = /** @class */ (function() {
  function Persons(name, age) {
    this.name = name;
    this.age = age;
  }
  Persons.prototype.getName = function() {
    console.log(
      this.name + "\u4ECA\u5E74\u5DF2\u7ECF" + this.age + "\u5C81\u4E86"
    );
  };
  return Persons;
})();
var p11 = new Persons("za", 123);
console.log(p11.getName()); //  za今年已经123岁了

2、这里和我们使用 Es6 中的 class 有一些差别

// javascript 中 class 的定义
class An {
  constructor(name) {
    this.name = name;
  }
  getName() {
    console.log(this.name);
  }
}
var a = new An("zz");
a.getName(); // zz

3、差异在于，我们需要去定义 constructor 构造函数中传入的数据参数的类型

二、TypeScript 中类的继承

class Animal {
  name: string | undefined;
  food: string;
  constructor(name: string, food: string) {
    this.name = name;
    this.food = food;
  }
  eat() {
    console.log(`${this.name}吃${this.food}`);
  }
}
 
class Cat extends Animal {
  constructor(name: string, food: string) {
    super(name, food);
  }
  jump() {
    console.log(`${this.name}正在跳`);
  }
}
 
let xiaohhua = new Cat("xiaohua", "猫粮");
console.log(xiaohhua.eat()); // xiaohua吃猫粮
console.log(xiaohhua.jump()); // xiaohua正在跳

这里和 ES6 中的 class 继承内容基本上没什么出入

三、TypeScript 中公共，私有与受保护的修饰符

这里的修饰符是对类中对 属性和方法的类型的定义

 

3-1、属性的 public

不定义的类心的话，默认就是 public 类型

class Animals {
  public name: string | undefined;
  constructor(name: string) {
    this.name = name;
  }
  eat() {
    console.log(`${this.name}哇`);
  }
}

转换成 es5 代码</