This is the fourth day of my participation in Gwen Challenge

Interfaces are key words used to manipulate interfaces in object-oriented programming languages. Interfaces are used to bind a set of functions by combining desired interfaces. What role does it play in TS? What is its use?

📚 interfaces is what

Interfaces are simply conventions that define a set of methods and properties to be implemented. In other words, interface is a description of an object or function. It is a form of constraint, such as what properties an object needs to have, what parameters a function needs or what values it returns, what an array should look like, what description a class and its descendants should conform to, and so on.

Now that we know what an interface is, how can we use interfaces in different situations?

How do you use the 📚 interfaces

Object Interface

  1. Define the attributes required by the object
  2. Set optional properties
  3. Setting read-only Properties
  4. The data type of an object attribute can be defined by as or [propName: String]: any

Example:

interface  people {
    Name : String.age:number, height? :number.// Set optional properties, can be hateful ✅
    readonly gender:String.// Set the read-only attribute ✅
}
const zhangSan:people = {
    Name: "Zhang".age:1.gender:'male'
}
zhangSan.gender = "Female"// Error, read-only attribute cannot be modified ❌

Copy the code

The function Interface

  1. Defining a function interface
  2. Defines the type of the function’s input parameter
  3. Using function expressions
  4. Call the function and write out the parameter

Example:

interface Fun {(
    x:string.// The first mandatory argument accepted by the definition function is of type string ✅
    y:number.// Define the second mandatory argument accepted by the function as number type ✅z? :boolean.// The third optional argument that the function accepts is of Boolean type ✅
)}

const add: Fun = function (x:string, y:number, z = false){
    console.log(x, y, z)
}

add('Joe'.12)
Copy the code

Indexable type

We can also describe types that can be “indexed,” such as ARr [0]. Indexable types have an index signature that describes the type of the object index and the corresponding index return value type.

  1. Define an indexable type
  2. Setting the index Type
  3. Define array calls to the specification

Example:

interface StringArray {
    readonly [index: number] :string.//❗ Note that index can only be number or string
    length: number // Specify the attribute 👀
}

let arr1: StringArray = ["1"."2"."3"] 

arr1[1] = "4" // ❌ Arr1 [1] cannot be assigned because the index is set to read-only

let arr: StringSet = [23.12.3.21] // the ❌ array should be of type string
Copy the code

The class Interface

Implements is an important concept in object orientation. A class can only inherit from another class. Features that are common to different classes can be extracted as interfaces, which are implemented using the implements keyword.

Interfaces can also be used to define the specification of a class. Note that the Interface class only checks instance properties. Static properties require an additional Interface; Such as:

/ /? PersonConstructor is used to check static parts
interface PersonConstructor {
    new (name: string.age: number) // ✔️ this is used to check constructor
    typename: string // ✔️ this is used to check the static property typename
    logname(): void // ✔️ this is used to check static method logname
}
/ /? PersonInterface is used to check the instance part
interface PersonInterface {
    // new (name: string, age: number) // ❌ static method checks cannot be written here
    log(): void // the instance method log is defined here
}

// class Person implements PersonInterface, PersonInterface {❌
const Person: PersonConstructor = class Person implements PersonInterface {
    name: string
    age: number
    static typename = 'Person type' // A static property named typename is defined
    static logname() { // A static method named logName is defined here
        console.log(this.typename)
    }
    constructor(name: string, age: number) { // Constructor is a static method
        this.name = name
        this.age = age
    }
    log() { Log is the instance method
        console.log(this.name, this.age)
    }
}
Copy the code

Inheritance between interfaces

  • Interfaces can extend themselves through other interfaces.
  • Typescript allows interfaces to inherit from multiple interfaces.
  • Inheritance uses the extends keyword.
1. Single-interface inheritance

The extends keyword followed by an inherited interface

interface Person {
  name: string.age: number
}
interface Students extends Person {
  gender: string
}
const foo: Students = {
  name: 'why'.age: 18.gender: 'female'
}
Copy the code
2. Multiple interface inheritance

Multiple interfaces are separated by commas

interface Sing {
  sing(): void
}
interface Jump {
  jump(): void
}
interface Rap extends Sing, Jump {
  rap(): void
}
const foo: Rap = {
  sing(){},
  jump(){},
  rap(){}}Copy the code
3. Interface inheritance classes

In common object-oriented languages, interfaces cannot inherit from classes, but in TypeScript it is possible to inherit from classes using the extends keyword

class Person {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  run(): void{}}interface User extends Person {
  gender: string
}
const foo: User = {
  name: 'foo'.age: 18.gender: 'male',
  run():void{}}Copy the code

Es6 class static methods; static properties; instance properties; implements

Resources for www.jianshu.com/p/099c5683f… Zhongsp. Gitbooks. IO/typescript -… Cloud.tencent.com/developer/a…