四、接口

官网文档地址 http://www.typescriptlang.org/docs/index.html

接口

使用readonly还是const，最简单的方法是询问您是对变量还是属性使用它。变量使用const，而属性使用readonly，有些属性只有在首次创建对象时才可以修改。您可以通过将readonly放在属性名之前来指定这一点

interface Point {
    readonly x: number;
    readonly y: number;
}

属性类接口

对json对象的约束,属性及类型约束

interface LabeledValue {
    label: string;// 必须属性
    name?:string;// 可选属性
}
function printLabel(labeledObj: LabeledValue) {
    console.log(labeledObj.label);
}
let myObj = {size: 10, label: "Size 10 Object"};//该json 属性应包含接口中的全部属性。
printLabel(myObj);//该json写法 属性应包含接口中的全部属性并且多于接口中的属性。
printLabel({size: 10, label: "Size 10 Object"});//该json写法属性应包含接口中的全部属性，与接口一致。

函数类型接口

对方法传入的参数以及返回值进行约束、

This is like a function declaration with only the parameter list and return type given

interface funcinter{
    (name:string,sex:string):string;// 此种接口只能定义一个匿名方法，只给出参数列表及返回值类型
}

var mm:funcinter = function(name1:string,sex2:string):string{// 类型属性与接口中对应位置类型相同
    return "s";
}

可索引接口

针对数组、对象的约束

支持两种类型的索引签名:字符串和数字。可以支持这两种类型的索引器，但是数字索引器返回的类型必须是字符串索引器返回的类型的子类型。这是因为当使用数字进行索引时，JavaScript实际上会在将其转换为对象之前将其转换为字符串。这意味着使用100(一个数字)的索引与使用“100”(一个字符串)的索引是一样的，因此两者需要保持一致

数组的约束
定义数组
let arr:number[] = [1,2,3]
let arr:Array<number> = [1,2,3]
=============
数组
interface userArr{
	[index:number]:string;
}
let uArr:userArr = ['1','2','3'];// 数组值为string
console.log(uArr[0])// 数组索引下标 为number
=============
json对象的约束
interface userObj{
    [name:string]:string;
}

let userobj:userObj = {"name":"string","name1":"string1"}

类类型接口

对类的约束和抽象类相似

interface entryType{
    name:string;
    pers(name:string,age:number):void;
    perso(sex:string):string;
}

class person implements entryType{
    name:string;
    constructor(name:string){
       this.name=name 
    }
    pers(name: string, age: number): void {// 实现的接口参数也可不传
        throw new Error("Method not implemented.");
    }   
    perso(sex: string): string {
        throw new Error("Method not implemented.");
    }    
}
==========
interface ClockInterface {
    currentTime: Date;
    setTime(d: Date): void;
}

class Clock implements ClockInterface {
    currentTime: Date = new Date();
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

扩展接口

接口继承接口，接口继承类的话在接口中的实现类中也会将接口继承的类的属性和方法当作接口要求在实现类中实现。

interface Shape {
    color: string;
}

interface Square extends Shape {// 接口继承接口
    sideLength: number;
}

let square = {} as Square;
square.color = "blue";
square.sideLength = 10;
=====
interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {// 接口多继承，类中没有多继承
    sideLength: number;
}

let square = {} as Square;
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;
=====
class eat {
    eatName!:string;
    action():void{
        console.log('123')
    }
}
interface person extends eat{ // 混合类型
    age:number;
}

class p implements person { // 混合类型，接口继承类，接口被类实现，实现类中必须实现接口中所有属性及方法
    action(): void {
        throw new Error("Method not implemented.");
    }
  
    age: number;   
    eatName: string;
    constructor(age: number,eatName: string){
        this.age=age;
        this.eatName=eatName;
    }
}