Preface: Record the classes in typeScript. There is still a big difference between the classes in TS and the classes in ECMAScript! ES6 began to introduce the concept of classes, define classes through the class keyword, and define instance attributes in the constructor. Compared with the classes in ES6, in TS, there are more type definitions and keywords such as private and public. In TypeScript, we can use common object-oriented patterns. One of the most fundamental patterns in class-based programming is to allow the use of inheritance to extend existing classes.
1. Class definition
In order to realize the main business of traditional classes, abstract classes are somewhat similar to interface
Mainly for abstraction, then the abstract method must be reimplemented by the inherited class
* 1. Abstract classes can be implemented concretely or define abstract methods
* 2. Method modifier
* Public shared can be accessed anywhere
* private private can no longer be used outside of the class and subclasses can not be used, that is to say, used internally
* protected can be used in protected subclasses
// 传统的类为了实现 主业务，抽象类有点类似于 interface
// 主要是为了抽象，那么其中的抽象方法必须被 继承的类 重新实现
abstract class Animal {
abstract makeSound(): void;
public move(): void {
console.log('dog wang---');
}
private run(): void {
console.log('run--');
}
protected say(): void {
console.log('say--');
}
}
// 继承的子类
class Dog extends Animal {
constructor() {
// 需用通过 super 关键字 进行调度
super();
}
makeSound() {
console.log('cat miao---');
}
}
const dog = new Dog();
dog.makeSound();
dog.move();2. Abstract class can be used as an entity class or as a type, but it is not allowed to create instance objects
Tips: The abstract class is not allowed to be called by new, that is, it is not allowed to create an instance object, and it is only used as a parent class that can be inherited.
abstract class Animal {
// 定义一个抽象方法
// 抽象方法使用 abstract 开头，没有方法体
// 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
abstract makeSound(): void;
move(): void {
console.log('dog wang---');
}
}
// 继承的子类
class Dog extends Animal {
constructor() {
// 需用通过 super 关键字 进行调度
super();
}
makeSound() {
console.log('cat miao---');
}
}
const dog = new Dog();
dog.makeSound();
dog.move();
// 类，即可作为一个 实体类 使用，也可以当做一个类型使用
const cat: Dog = new Dog()
cat.makeSound();
cat.move();
const m: Animal = new Dog()
m.move();
m.makeSound();3. The difference between generating private variables private and # (mainly the difference between generating js after build packaging)
1. Private variables declared with private
class Demo {
private num: number;
constructor() {
this.num = 20;
}
}
const n = new Demo();
console.log(n.num) // 属性“num”为私有属性，只能在类“Demo”中访问。private build generates js
2. Private variables declared with # (mainly managed by WeakMap)
class Demo {
#num: number;
constructor() {
this.#num = 20
}
}
const s = new Demo();
console.log(s.num);# build generates js
