Interfaces in Typescript

Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

interface

Js interface refers to the API of a method

Ts The interface here refers to a data structure, which is used to describe the data structure

I’m going to define it by interface,

Interfaces are used only to define structures, not to implement them,

When encountering a kind of complex data, we can describe its structure through interfaces

We will introduce three types of interfaces: functional interfaces, object interfaces, and class interfaces

The function interface

Functions come in three forms: definition, expression, and constructor

In the expression of a function, a variable is used to refer to the function. Before the program runs, to create space, we define an interface to describe its structure

Interface function name {

(arg:type, arg2? :type2):type

}

In a function, the parameters of the function and the return value of the function will have data, so we need to define their type structure, we need to define the parameters and the return value of the type, not the function body, because the function body is the implementation of the function.

If the parameter is optional, add?

If the function has a return value, define the return value type

If the function returns no value, void.

Object interface

An object is also a complex piece of data, and to illustrate its interface, we define the object interface

In an object, its property names and method names belong to the structure

In an object, its property values, the method body belong to the implementation

In the object interface, we define only the interface: only the property name and the method interface interface name {

The attribute name

Method parameters and return values

}

If the attribute name or method is optional, add?

The class interface

Sometimes, to illustrate the structure of a class, we also define the interface of the class, just as we define the interface of an object

Define only the structure of properties and methods. Are properties or methods optional?

Interface Interface name {

The attribute name

Method parameters and return values

}

Class interfaces usually start with a uppercase letter, and when you use a class interface, make it implement the interface using the implements keyword.

When instantiated, the type of the variable can be the type of the class or interface

Properties and methods are bound by the interface if the interface type is used (non-existent methods cannot be used)

For example:

// // function interface
interface add {
    // The second parameter is optional.
    (num1:number, num2? :number) :number
}
// Define the type of the function expression variable
let addTow:add = function(num1:number, num2:number) :number {
    return num1 + num2;
}
console.log(addTow(10.20))
// Only one parameter is accepted
let addOne:add = function(num1:number) :number {
    return num1 + 10
}
console.log(addOne(2))
// Object interface
interface Star {
    name:string;
    getName():string;
    // OptionalgetGirlFriend? () :string;
}
// Define the name
let zss:Star = {
    name: 'Nicholas Zhao 4',
    getName():string {
        return this.name
    },
    // Optional methods can be defined
    getGirlFriend():string {
        return 'Zhao Liying'}}console.log(zss)
console.log(zss.getName())
console.log(zss.getGirlFriend())
// Define the interface of the class
interface Star {
    name:string;
    getName():string; getGirlFriend? () :string;
}
// Use the class interface
class MoveStar implements Star {
    name:string;
    constructor(name:string) {
    this.name = name;
    }
    // The method to get the name
    getName():string {
        return this.name;
    }
    getGirlFriend():string {
        return 'Yang'
    }
    // Get the age method
    getAge():number {
        return 50; }}/ / instantiate
var zss:MoveStar = new MoveStar('Handsome Chow')
// var ZSS :Star = new MoveStar(' ZSS ');
console.log(zss)
console.log(zss.getAge())
Copy the code