preface

As a front-end language, TypeScript is more similar to the back-end Java language in form. Compared with JavaScript, TypeScript embodies object-oriented programming. The parameter validation, interfaces, generics, etc., provided by TypeScript enable TS to perform well when developing large front-end projects. As a front-end developer, it’s important to have a good grasp of the TS language. Here, I share some of my notes on the basics of learning TypeScript. This chapter covers the basics of TypeScript classes, polymorphisms, abstract methods, and abstract classes

Class

The basic usage of classes in TypeScript is somewhat similar to that of ES6 classes in JavaScript, and is covered here first

  1. The definition of a class
// Classes are defined by the class keyword
class Father{
    name:string// Instance properties
    // The constructor
    constructor(name:string){
    	this.name = name
    }
    // Instance method
    run():string{
    	return ` fatherThe ${this,name}In running `}}// Instantiate a parent object
const father1 = new Father("Zhang")
father1.run() // Father Zhang SAN is running
Copy the code
  1. Class inheritance

By inheriting, a subclass can inherit the properties and methods of its parent class that are allowed to be accessed by inheritance, inheriting the constructor of its parent class

    // Inheritance requires the extends keyword
    class Son extends Father{
        // Unless the subclass does not write the constructor, the constructor must have the super keyword inside
    	constructor(name:string){
        	// Super borrows the constructor of the superclass
        	super(name)
        }
        // Subclasses can also override the constructor of their parent class
        run():string{
        	return Son `The ${this.name}In running `}}const son1 = new Son("Xiao Ming")
    son1.run() // My son Xiao Ming is running
Copy the code

Class modifier

  1. Public Shared

Methods and properties identified with public are accessible inside, outside, and in subclasses

  1. The protection of protected

Protected methods and properties are accessible inside the class and in subclasses, but not outside the class

  1. Private private

Methods and properties identified with private are accessible only inside the class, not outside the class or in subclasses

	class Message{
    	public name:string Note that the default unwritten modifier is also public
        protected date:string / / protection
        private content:string = "I am a private piece of content" / / private
        constructor(name:string,date:string) {
   			this.name = name
            this.date = date
  		}
        getContent(){
        	return this.content // Successful "I am a private content" is accessible inside the class with the private modifier}}const message1 = new Message("News"."12.12")
    message1.name // Success news
    message.date // The date is protected and can be accessed from within the class and subclasses
    message.content // Error because content is private to Message and neither external nor subclasses can access it directly
    class Note extends Message{
    	constructor(name:string,date:string) {
			super(name,date)
  		}
        getContent(){
        	return this.content // Error because content is a private subclass of Message
        }
        getDate(){
        	return this.date // The successful date is protected and can be accessed from within the class and subclasses
        }
        getName(){
        	return this.name // Successful name is accessible to subclasses of the public decorator}}Copy the code

Static properties and static methods

	class Message {
    	constructor(){}static status:string = "I am a static property"// Static properties
        name:string// Instance method
        static changeStatus():void{
        	console.log(this.name)Static methods can only access static properties
            console.log(this.status)// Success "I am static"
        }
        call():void{
            console.log(this.status)// Successful "I am a static property" instance method can access static properties}}const message1 = new Message()
    Static properties and methods can only be called by class name. In the form of
    message1.status / / fail
    Message.changeStatus() / / success
Copy the code

polymorphism

The parent class defines the method, but does not implement, let its subclass to implement, each subclass has a different performance polymorphism belongs to inheritance

	class Animal{
    	name:string
        constructor(name:string){
        	this.name = name} eat() :void{}}class Cat extends Animal{
    	name:string
        constructor(name:string){
        	super(name)
        }
        eat():void{
        	console.log("How a kitten eats.")}}class Pig extends Animal{
    	name:string
        constructor(name:string){
        	super(name)
        }
        eat():void{
        	console.log("How a pig eats.")}}Copy the code

Abstract methods and abstract classes

Abstract classes and methods are defined using the abstract keyword. Abstract methods in abstract classes do not contain concrete implementations

  1. Abstract classes and methods are generally used to define a standard that can be used to implement polymorphism
  2. An abstract class can have instance methods, but it must include an abstract method, otherwise it doesn’t make sense
  3. Abstract methods can only exist in abstract classes
  4. A subclass that inherits an abstract class must implement the abstract methods defined in the abstract class
  5. The abstract class cannot be instantiated

Let’s use the animal case again

	/ / abstract classes
	abstract classs Animal{
    	public name:string
        constructor(name:string){
        	this.name = name
        }
        abstract eat():any // Abstract method
    }
    const animal = new Animal("Animal") The abstract class cannot be instantiated
    // The derived class implements the abstract class
    class Cat extends Animal{
    	constructor(name:string){
        	this.name = name
        }
        // Subclasses must implement abstract methods that inherit abstract classes or report an error
        eat():any{
        	console.log("How a kitten eats.")}abstract fn():void{}// Error reporting abstract methods can only be defined in abstract classes
    }
    
Copy the code