Preface

The content of TypeScript fragrance series will be referenced Chinese Documents However, the examples in this paper will not duplicate those in the document, and will be studied in some places.In addition, the results of some of the examples in this article are compiled into JavaScript without errors in the code.If you want to actually see the code that TypeScript compiles into JavaScript, you can access TypeScript's Compile Addresses Online And you'll be more impressed with what you do.

concept

One of the core principles of TypeScript is to type check the structure of values.It is sometimes called "duck identification" or "structural subtyping".In TypeScript, the purpose of an interface is to name these types and define contracts for your code or for third-party code.It can be said that the emergence of interfaces can allow us to find and avoid many problems in the development, and improve our development efficiency.

Interface Base

In object-oriented programming, an interface is a specification definition that defines the specifications for behavior and actions.Examples include the following:

interface IDo {
    work:string;
    time:number;
}
interface IMan {
    age:number;
    name:string;
    do:Do;
}

let james: IMan = {
    name: 'james',
    age: 35,
    do: {
        work: 'player',
        time: 2020
    }
}
james.name; //"james"
james.do.work; //"player"

If we write the name type in james as number 12, which is the number type, or no age.Then an error message will appear.

optional attribute

In our development, attributes in interfaces are sometimes not all necessary, exist under some conditions, and do not exist under some conditions.

interface IMan {
    age?:number;
    name:string;
}
let james: IMan = {
    name:"james"
}

Read-only Properties

Some object properties can only modify the value of an object when it has just been created.

interface IMan {
    age:number;
    readonly name:string;
}
let james: IMan = {
    name:"james",
    age:35
}
james.name = "mike"; // error: Cannot assign to 'name' because it is a read-only property.

Additional Property Checks

When we can determine that an object may have some additional attributes for special purposes, the best way is to be able to add a string index signature.

interface IMan {
    age:number;
    readonly name:string;
    [propName: string]: any;
}
let james: IMan = {
    name:"james",
    age: 35,
    work:"player"
}

Function type

Functions are also objects. Similarly, we can use interfaces to represent the type of function.

interface IFunc {
    (x: string, y: string): string;
}
let func: IFunc = function(x: string, y: string){
    return x + y;
}
func("1", "!"); // "1!"

For type checking of function types, the parameter names of the functions do not need to match the names defined in the interfaces.

interface IFunc {
    (x: string, y: string): string;
}
let func: IFunc = function(a: string, b: string){
    return a + b;
}
func("1", "!"); // "1!"

Indexable Type

Constraints available for arrays and objects.

interface IMan {
    [index:number]:string
}
//array
let man1: IMan;
man1 = ["james", "wade", "bosh"];
//object
let man2: Man;
man2 = {1:"haha", 2:"666"};
console.log(man1); //["james", "wade", "bosh"]
console.log(man2); //{1: "haha", 2: "666"}

Class type

TypeScript can also explicitly enforce a class to conform to a specification using an interface, which can be implemented using implements.

interface IMan {
    name:string;
    play(val:string):void;
}

class IFootballer implements IMan {
    name:string
    constructor(name:string){
        this.name = name
    }
    play(val:string){
        console.log(this.name + 'kick'+ val)
    }
}

class IBasketballer implements IMan {
    name: string
    constructor(name:string){
        this.name = name
    }
    play(val:string){
        console.log(this.name + 'hit'+ val)
    }
}
var a = new Footballer('Wu Lei')
a.play("Football") //Wu Lei plays football

var b = new Basketballer ('Yao Ming')
b.play("Basketball") //Yao Ming plays basketball

Inheritance interface

Like our classes, interfaces can inherit from one another.
i

nterface IMan {
    name: string;
}
interface IPlayer extends IMan {
    types:string
}

class IFootballer implements IPlayer {
    name: string;
    types: string;
    constructor(name:string, types:string){
        this.name = name;
        this.types = types
    }
    play(){
        console.log(this.name+ "yes" + this.types)
    }
}

let a = new Footballer("c Ro", "Football Player");
a.play(); //Ronaldo is a football player

An interface can also inherit multiple interfaces, separated by commas.

interface IMan {
    name: string;
}
interface ICity {
    city:string;
}
interface IPlayer extends IMan,ICity {
    types:string
}

Mixed Type
We can have multiple types of objects at the same time.

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

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

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

Interface Inheritance Class

When an interface inherits a class type, it inherits members of the class but does not include its implementation.It's like an interface declares members that exist in all classes but does not provide a concrete implementation.The interface also inherits the privates and protected members of the class.This means that when you create an interface that inherits a class with a private or protected member, the interface type can only be implemented by that class or its subclasses.
This is useful when we have a large inheritance structure, but it's important to note that our code only works when subclasses have specific properties.This subclass has nothing to do with the base class except inherit to it.

class Control {
    private state: any;
}

interface ISelectableControl extends IControl {
    select(): void;
}

class Button extends Control implements ISelectableControl {
    select() { }
}

class TextBox extends Control {
    select() { }
}

// Error:'Image'type is missing the'state' attribute.
class Image implements ISelectableControl {
    select() { }
}
//error
class Location {

}

Reference resources

https://github.com/zhongsp/TypeScript

Last

Some parts of the text may include some of your own understanding. If there are inaccuracies or errors, you are welcome to point out that ~
Happy New Year to you and your family!
Hope the front-line medical staff are healthy and healthy, and beat the virus as soon as possible!
Hope everyone is healthy!