The interface defines the type of the object

A format that defines complex types. For example, if we store an article in object format, we can use an interface to define the type of the article:

interface Article {
    title: stirng;
    count: number;
    content:string;
    fromSite: string;
}

const article: Article = {
    title: 'Learn typescript(2), type for vue3',
    count: 9999,
    content: 'xxx... ',
    fromSite: 'baidu.com'
}

Copy the code

In this case, when we assign a value to article, ts will tell us if any of the fields are not assigned or if the fields correspond to the wrong data type, so that we can write code without the above minor errors.

Not required (?)

FromSite means that the article is from that website. If the article is original, the field will not have a value, but if we do not upload it, we will get an error. Mark the fromSite field as non-mandatory with “?” Tags:

interface Article { title: stirng; count: number; content:string; fromSite? : string; Const article: article = {title: const article = {title:'Learn typescript(2), type for vue3',
    count: 9999,
    content: 'xxx... ',}Copy the code

Define functions with interfaces

Interfaces can define functions as well as objects:

// interface Core {(n:number, s:string):[number,string]} const Core :Core = (a,b)=>{return [a,b];
}

Copy the code

Class implementation interface

Implements is an important concept in object orientation. In general, a class can only inherit from another class. In some cases, features that are common to different classes can be extracted as interfaces, which are implemented using the implements keyword. This feature greatly improves object-oriented flexibility.

Let’s take a quick look at how to define interfaces for classes:

// Define interface Animate {head:number; body:number; foot:number; eat(food:string):void; say(word:string):string; } // implements class Dog implements Animate{ head=1; body=1; foot=1; eat(food:string){ console.log(food); } say(word:string){returnword; }}Copy the code

A class can implement multiple interfaces:

interface Alarm {
    alert();
}

interface Light {
    lightOn();
    lightOff();
}

class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off'); }}Copy the code

In the above example, the Car implements the Alarm and Light interfaces, which can both Alarm and turn on and off the headlights.

Interface Inheritance interface

Interfaces can be inherited from one another:

interface Alarm {
	alert();
}

interface LightableAlarm extends Alarm {    
	lightOn();    
	lightOff();
}
Copy the code

In the example above, we use extends to make LightableAlarm inherit from Alarm.

Interface inheritance class

Interfaces can also inherit from classes:

class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};
Copy the code

Mixed type

We can use interfaces to define the shape a function should conform to:

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    returnsource.search(subString) ! = = 1; }Copy the code

Sometimes a function can also have its own attributes and methods:

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function() {};return counter;
}

letc = getCounter(); c(10); c.reset(); C.i nterval = 5.0;Copy the code