This is the ninth day of my participation in the Gengwen Challenge. For more details, see “Gengwen Challenge”
In both ES and TS, class members are instance properties, and class member methods are instance methods
I. Features of class in TS
class Dog {
constructor(name: string) {
this.name = name;
}
name: string;
run(){}}Copy the codeconsole.log(Dog.prototype);
// {run: logon, constructor: logon}
/* Print the class prototype. The result is run(), constructor() */, with no members of the class
Copy the code1.1 Member attributes are only on instances, not on stereotypes
let dog = new Dog("Rhubarb");
console.log(dog);
// Dog {name: "rhubarb "}
/* We can see that the name attribute is only on the instance, not on the stereotype */
Copy the codeThe properties of the instance must have initial values or be initialized in the constructor
class Dog1 {
constructor(name: string) {
// this.name = name;
}
// Error: property 'name' has no initialized expression and is not explicitly assigned in the constructor. ts(2564)
name: string;
run(){}}Copy the codeTo solve
class Dog1 {
constructor(name: string) {
// this.name = name;
}
name: string = "dog";
run(){}}/ / or
class Dog2 {
constructor(name: string) {
this.name = name;
}
name: string;
run(){}}Copy the codeIi. Class inheritance
class Cat0 extends Dog {
// Error: the constructor of a derived class must contain a call to "super". ts(2377)
constructor(){}}Copy the codeResolve instances where super represents the parent class
class Cat extends Dog {
constructor(name: string, color: string) {
super(name);
this.color = color;
}
color: string;
}
Copy the codeMember modifiers for classes
1. Common member -public
All properties of a class are public by default, or you can declare them directly
class Dog1 {
constructor(name: string) {
// this.name = name;
}
public name: string = "dog";
run(){}}Copy the code2. Private member -private
A private member can only be called by the class itself, not by an instance of the class, or by a subclass
class Dog {
constructor(name: string) {
this.name = name;
}
public name: string;
run() {}
private walk(){}}let dog = new Dog("Rhubarb");
// Error message: property 'walk' is private and can only be accessed from class 'Dog'. ts(2341)
dog.walk();
class Cat extends Dog {
constructor(name: string, color: string) {
super(name);
this.color = color;
// Error message: property 'walk' is private and can only be accessed from class 'Dog'. ts(2341)
this.walk = () = > {};
}
color: string;
}
Copy the codeYou can add a private member attribute to the constructor to indicate that the class can neither be instantiated nor inherited
class Dog {
private constructor(name: string) {
this.name = name;
}
public name: string;
run() {}
private walk(){}}// Error: the constructor of class "Dog" is private and can only be accessed in the class declaration. ts(2673)
let dog = new Dog("Rhubarb");
// Error: unable to extend class "Dog". The class constructor is marked private. ts(2675)
class Cat extends Dog {
constructor(name: string, color: string) {
super(name);
this.color = color;
}
color: string;
}
Copy the code3. Protected member – Protect
A protected member can only be accessed in a class and its subclasses, not in an instance of the class
class Dog {
constructor(name: string) {
this.name = name;
}
public name: string;
protected shout(){}}let dog = new Dog("Rhubarb");
// Error: property "shout" is protected and can only be accessed in class "Dog" and its subclasses. ts(2445)
dog.shout();
class Cat extends Dog {
constructor(name: string, color: string) {
super(name);
this.color = color;
// Can be accessed and executed normally
this.shout();
}
color: string;
}
Copy the codeYou can add a protected member attribute to the constructor to indicate that the class cannot be instantiated, only inherited, and thus declare a base class
4. Read-only property
The read-only property indicates that it cannot be changed and must be initialized
class Dog {
constructor(name: string) {
this.name = name;
}
public name: string;
readonly foots: number = 4;
}
Copy the code5. Static member -static
Static members of a class can only be called by the class name, not by subclasses
class Dog {
constructor(name: string) {
this.name = name;
}
public name: string;
static food = "bones";
}
let dog = new Dog("Rhubarb");
// bones
console.log(Dog.food);
// Error: property "food" is not a static member ts(2576) of type "Dog"
console.log(dog.food);
Copy the codeStatic members of a class can also be inherited
class Dog {
constructor(name: string) {
this.name = name;
}
public name: string;
static food = "bones";
}
class Cat extends Dog {
constructor(name: string, color: string) {
super(name);
this.color = color;
}
color: string;
}
// bones
console.log("Cat.food :", Cat.food);
Copy the codeThere is no concept of abstract classes in ES, which TS extends
An abstract class
Abstract class: a class that can only be inherited but cannot be instantiated
abstract class Animal {
constructor(){}}// Cannot create an instance of the abstract class. ts(2511)
let animal = new Animal();
Copy the codeYou can define a concrete method in an abstract class and have an implementation so that subclasses can use it directly without having to repeat the implementation — enabling method reuse
abstract class Animal {
constructor() {}
eat() {
console.log("eat"); }}class Pig extends Animal {
constructor(name: string) {
super(a);this.name = name;
}
public name: string;
static food = "bones";
}
let pig = new Pig("Page");
pig.eat();
Copy the codepolymorphism
You can define a method in an abstract class but not implement it, forming an abstract method ** The advantage of abstract methods is that they can be implemented in a variety of ways in subclasses, **
abstract class Animal {
constructor() {}
abstract sleep(): void;
}
class Pig extends Animal {
constructor(name: string) {
super(a);this.name = name;
}
public name: string;
sleep() {
console.log("Sleeping standing up."); }}let pig = new Pig("Page");
pig.sleep();
class Cat extends Animal {
sleep() {
console.log("Sleep on your stomach."); }}let cat = new Cat();
cat.sleep();
Copy the codeSpecial TS types: type this
A member method of a class can simply return a this, making it easy to implement chained calls
class WorkFlow {
step1() {
return this;
}
step2() {
return this; }}let workFlow = new WorkFlow();
workFlow.step1().step2();
Copy the codeThis can also be polymorphic when inherited (this can be either a parent or a child type)
class WorkFlow {
step1() {
return this;
}
step2() {
return this; }}let workFlow = new WorkFlow();
workFlow.step1().step2();
class MyFlow extends WorkFlow {
next() {
return this; }}let myflow = new MyFlow();
// myflow.next(): MyFlow {}
console.log("myflow.next(): ", myflow.next());
// myflow.next().step1(): MyFlow {}
console.log("myflow.next().step1(): ", myflow.next().step1().next().step2());
Copy the code