interface

Functions: Define contracts (such as type naming, attribute checking, function type definition, etc.)

1. Name the type

interface LwhValue {
    l: number,
    w: number,
    h: number,}function getLWH(lwhObj: LwhValue) {
    return 'Length width height:' + lwhObj.l + ', ' + lwhObj.w + ', ' + lwhObj.h;
}

console.log(getLWH({ l: 3.45, w: 23.12, h: 23 })); // Length, width and height: 3.45, 23.12, 23
Copy the code

2. Check properties

interface NameValue {
    readonly firstName: string, lastName? :string,}function getName(nameObj: NameValue) {
    return `Hello,${nameObj.firstName}${nameObj.lastName ? (' ' + nameObj.lastName) : ''}`;
}

// readonly Attribute check
let myName: NameValue = { firstName: 'Huang' };
myName.firstName = 'Song'; // Error message: Cannot assign to 'firstName' because it is a constant or a read-only property.

// Additional attribute checks
let hisName: NameValue = { firstName: 'Song', secondName: 'Yangyang' };
/ / error:
// Type '{ firstName: string; secondName: string; }' is not assignable to type 'NameValue'.
// Object literal may only specify known properties, and 'secondName' does not exist in type 'NameValue'.
Copy the code

3. Function type

interface DealImgUrlFn {
    (jsfUrl: string, isMain? :boolean, w? :number, h? :number) :string;
}

let dealImgUrlFn: DealImgUrlFn;
dealImgUrlFn = function (jsfUrl: string, isMain? :boolean, w? :number, h? :number) :string {
    if(! jsfUrl)return ' ';
    if (jsfUrl.indexOf('http:') > - 1 || jsfUrl.indexOf('https:') > - 1) return jsfUrl;

    const protocolStr = location.protocol;

    // If the image size is passed in, cut it according to that size, otherwise do not cut it
    let imgStr = ' ';
    if (w || h) {
        imgStr = `s${w || h}x${h || w}_ `;
    }

    if (isMain) {
        return `${protocolStr}/ / img12.360buyimg.com/n1/${imgStr}${jsfUrl}`;
    } else {
        const urlArr = jsfUrl.split('/');
        const anotherArr = urlArr.slice(1);
        return `${protocolStr}/ / img12.360buyimg.com/${urlArr[0]}/${imgStr}${anotherArr.join('/')}`; }}const imgUrl = dealImgUrlFn('/jfs/t1/29894/13/4041/12884/5c2ed0adE75ec21a9/8949817d0cc9492e.jpg'.false.200.100);
console.log(imgUrl); / / http://img12.360buyimg.com//s200x100_jfs/t1/29894/13/4041/12884/5c2ed0adE75ec21a9/8949817d0cc9492e.jpg
Copy the code

4. Implement interfaces

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) {}}const time = new Clock(24.0);
time.setTime(new Date());
alert(time.currentTime);
Copy the code

5. Interface Inherits the interface

interface Shape {
    color: string;
}

interface Cicle extends Shape {
    radius: number;
}

let cicle = <Cicle>{};
cicle.color = 'red';
cicle.radius = 2;

console.dir(cicle);
Copy the code

6. The class inherits the interface

When an interface inherits a class type, it inherits the members of the class but not its implementation.

class Shape {
    private color: string;
    constructor(c: string) {
        this.color = c; }}interface SquareInterface extends Shape {
    getColor(): string;
}

class Square extends Shape implements SquareInterface {
    private squareColor: string;
    constructor(c: string, squareColor: string) {
        super(c);
        this.squareColor = squareColor;
    }
    getColor() {
        return this.squareColor; }}const square = new Square('red'.'blue');
console.dir(square);
Copy the code

If you change the Square class to the following:

class Square implements SquareInterface {
    private squareColor: string;
    constructor(c: string, squareColor: string) {
        super(c);
        this.squareColor = squareColor;
    }
    getColor() {
        return this.squareColor; }}Class 'Square' incorrectly implements interface 'SquareInterface'.
// Property 'color' is missing in type 'Square'.
Copy the code

This means that if an interface inherits from a class that has a private member, the interface type can only be implemented by the class or its subclass (implement).