接口----Ts

接口是一种自定义类型, 也就是类型了, 所以不但可以声明变量的类型，也可以声明函数参数(也是变量类型)，函数返回值的类型

一、接口定义函数变量类型

 

二、接口与对象

(1)对象是字面量对象, 对象中成员必须与接口中声明的成员完全相同，不可多，也不可少

interface mytype{

    n1:number

    n2?:string

    fn(n:number):number

}

let p:mytype;

// 必须与接口一一对应

p={

    n1:11,

    n2:"hello",

    fn(n:number):number{

        return n*2

    }

}

 

 

interface mytype{

    n1:number

    n2?:string

    fn(n:number):number

    [props:string]:any //可以添加任意的属性，只要符合类型

}

let p:mytype;

p={

    n1:11,

    n2:"hello",

    fn(n:number):number{

        return n*2

    },

    "n":"hello",

    "n3":[1,2,3,]

}

 

(2)对象是通过new 出的对象, 对象中成员必须包含接口中声明的成员不可少，但是可以增加接口中未声明的成员

interface mytype{

    n1:number

    n2?:string

    fn(n:number):number

}

class Person{

    n1:number=20

    n2:string="jack"

    fn(n:number):number{

        return n*2

    }

    age:number=30 //没有接口，但是不会报错

    constructor(n:string,n2:number){

        this.n2=n

        this.n1=n2

    }

}

let p2:mytype;

p2=new Person("jack",30)

 

(3)类型断言情况下。对象中成员只能是接口中声明过的成员，但是可少

        // 第一种：

        let p3:mytype;

        let obj={}

        p3=(obj as mytype)

        p3.n1=100

        // 第二种：

        let p4:mytype=<mytype>{}

        p4.n1=400

 

 

三、接口与数组

接口可以规定数组中元素的索引类型和元素类型,先看一个与默认情况相同的示例

也可以使用非number类型为元素索引

 

四、接口继承接口

接口继承接口后，子接口就除了自身接口声明之外还包含了父接口声明

// 接口继承接口

interface mytype1{

    n:string

}

// 继承单个接口

interface mytype2 extends mytype1{

    n2:number

    m3:any

}

interface mytype3{

    n4:Array<number>

}

// 继承多个接口

interface mytype4 extends mytype2,mytype3{

    n5:any[]

}

let m2:mytype2={

    n:"hello",

    n2:200,

    m3:[10,20,30]

}

let m3:mytype4={

    n:"karen",

    n2:520,

    m3:{name:"jack",age:30},

    n4:[10,20,30],

    n5:["hello","hi","sorry"]

}

五、类实现接口

类可以实现接口，并可以多实现

类实现接口后，类体中必须实现接口所有字段和方法，当然类可以扩展自己本质的成员

// 类实现接口

        interface IShape {

            draw():void;

            size:number;

        }

        interface IName {

            name: string;

        }

        class Circle implements IShape, IName {

            public size:number = 30;

            public name:string = "圆";

            public draw():void {

            console.log("会绘制一个"+this.name);

            }

            public show() {

                console.log("本来是Circle");

            }

        }

        let c:Circle = new Circle();

        c.draw();

        c.size = 31;

        c.name = "四边型";

        c.show();

// 类可以继承父类的同时实现接口

        interface IShape {

            draw():void;

            size:number;

        }

        interface IName {

            name: string;

        }

        class Shape {

            public showArea():void {

                console.log("面积是?平方")

            }

        }

        class Circle1 extends Shape implements IShape, IName {

            public size:number = 30;

            public name:string = "圆";

            public draw():void {

            console.log("会绘制一个"+this.name);

            }

            public show() {

                console.log("本来是Circle");

            }

        }

        let c1:Circle1 = new Circle1();

        c1.draw();

        c1.size = 31;

        c1.name = "四边型";

        c1.showArea();

        c1.show();

 

八、接口变量指向实现类对象

接口变量可以引用接口实现类对象, 但是只能访问接口中声明过的成员, 接口变量也可赋值为null或undefined,

如果想使用此接口变量访问所有对象成员，那么可以对接口变量进行"类型断言"为对象所属类的类型。

// 接口变量指向实现类对象

        interface IShape {

            draw():void;

            size:number;

        }

        interface IName {

            name: string;

        }

        class Circle2 extends Shape implements IShape, IName {

            public size:number = 30;

            public name:string = "圆";

            public draw():void {

            console.log("会绘制一个"+this.name);

            }

            public show() {

                console.log("本来是Circle");

            }

        }

        let c2:Circle2 = new Circle2();

        c2.draw();

        c2.showArea();

        c2.show();

        let c3:IName|IShape=new Circle2()

        c3.name="hello" //报错，因为c3虽然是IName或者IShape的类型，

                        // 但是c3所能使用的只能是IName或者IShape的公共属性

        // 想要C3使用可以使用任意属性就要用类型断言

        let c4=<Circle>c3

        c4.name="hello"