Detailed explanation of interfaces and classes in typescript (with examples)

This article brings you a detailed explanation of interfaces and classes in typescript (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

For simplicity, typescript will be abbreviated as ts in the future

InterfaceInterface

Some students may be unfamiliar with interfaces. In weakly typed languages, It is difficult to see traces of it at the language level. Unlike strongly typed languages, the language level is taken into consideration. But in the ts world, we can see its traces. To put it bluntly, it is only responsible for defining and explaining what is in your object, that is, the structure. Of course, it cannot be instantiated.

Definition

So, how to define the interface? Of course, use the keyword interface

interface IA {
    name: string
}

The interface IA is declared above, and there is an attribute name , is a string type
In this way, we can declare the IA type to a variable and assign an initial value

var a: IA = {
    name: 'hello'
}

Inheritance

The interface can also be inherited, if If you have an IB interface that also contains the structure of IA, you can simply inherit it and extend your own attributes

interface IB extends IA {
    id: number
}

Class

Class is similar to interface, but it In addition to definition, there is also implementation, such as assigning a value to a variable, which can be instantiated

Definition

The keyword defined is class. I believe that students who are familiar with es6 I have become accustomed to using it

class A {
    a: string = 'xxxxx'
}

The above defines class A, which has a string type a, and assigns it an initial value of xxxxx, so that we can use it as follows, instantiate it, and We can reference the attribute a

var a = new A()
console.log(a.a)

Of course we can also modify the attribute a

Public, private, protected and other member access modifiers

The attribute has access rights points, which members can access, who can access

public means that everyone can access

private only internal members can access, to put it bluntly, the built-in functions can access

protected is protected, except for yourself, anyone who inherits the class can access it

The above keywords are generally added in front of the attributes. If not, they are public

The so-called members, do not limit it to attributes. It also includes methods, also called functions, but they are generally called methods in classes

class A {
    public a = 'a'
    private b = 'b'
    protected c = 'c'
}

Note that the above declaration does not specify a type for the attribute, which is legal because the corresponding type can be inferred based on the initial value

Constructor

When it comes to classes, the constructor is naturally indispensable. This function is quite special. It is called when instantiating, that is, when new; strong In type languages, a function is generally named after a class name. In ts, it is defined and implemented as constructor. Of course, strictly speaking, this is the rule in js.
In fact, constructors are no different from ordinary functions. They can have parameters. The function body is the implementation. You can assign initial values ​​to properties and other operations. Rewrite the above A and assign it to a
Even if you define any constructor, there will be A default constructor, but it does nothing

class A {
    a: string
    constructor(arg: string) {
        this.a = arg
    }
}

In ts, the constructor also has a magical function, that is, defining and assigning initial values ​​​​in the constructor parameters, without repeating it in the class Statement, assign an initial value in the constructor, as follows

class A {
    constructor(public a: string)
}

Above we defined a string attribute a in A, and assigned the first parameter of the constructor to it

Inheritance

Similar to interfaces, class inheritance also uses the keyword extends

class B extends A {
    d: number = 1
}

Implementing interfaces

Classes can not only inherit existing Classes can also implement interfaces. It should be noted that the attributes in the interface must have corresponding implementations in the class.
The keyword for implementation is implements

class C implements IA {
    name = 'c'
}

Of course, you can use implementation and inheritance at the same time. No problem

class D extends A implements IA {
    name = 'd'
}

Static members

Ordinary members exist separately in each instance, while static members are shared in the class, that is, there is only one The way to declare static members is to use the keyword static

class A {
    static sa = 'nnnn'
}

Above we have declared a string attribute sa and assigned the initial value nnnn. When you need to access it, just call it like the following

A.sa

There are quite a lot about interfaces and classes. Due to limited space, let’s stop here first. More content will be discussed later

The above is the detailed content of Detailed explanation of interfaces and classes in typescript (with examples). For more information, please follow other related articles on the PHP Chinese website!