TS 接口 interface 的用法

接口

接口就相当于是一个规范,凡是使用这个接口,就必须遵循这个接口的规范,这样便于类型的统一

接口并不会影响、操作内部的值,他只是检查值是否符合规范

语法

interface

声明一个接口

interface userPort { //声明一个接口userPort
    id:number;
    names:string;
    age?:number;
    getAge():void;
}

注意接口的每个属性要用 ; 来分开

应用

函数参数的限制

类似于自定义类型

interface userPort { //声明了一个接口
    name:string;
    age:number;
}

function fn (option:userPort):void {
    console.log(option.name);
}

fn({name:"hao",age:12});

将参数option设置为接口类型,这样规定参数必须符合接口的规范

类的限制

当这个类实现接口规范后,类的内部必须有这个接口规定的属性方法

interface userPort { //声明接口
    name:string;
    age:number;
    phone:number;
    getStu():string;
}

class Stu implements userPort{ //类实现接口规范,它的内部必须有这个接口所规定的属性与方法
    public name!:string;
    public age!:number;
    public phone!:number;
    constructor (name:string,age:number,phone:number) { //参数传入符合接口规范
        this.name=name;
        this.age=age;
        this.phone=phone;
    }
    getStu():string {
        return this.name
    }
}
let stu1=new Stu("hao",12,1204392022);
let stu2=new Stu("zzz",20,1204323022);

两个实例化对象都是通过一个接口实例化出来的,所以他们都有接口所规范的方法属性

同样,两个不同的类实现同一接口,他们实例化出来的对象也都有接口规范的方法属性

函数与类的结合使用

上面通过接口实例化的对象,他们可用于函数的参数传递

function fn(a:userPort):void {
    console.log(a.names+"你好");
}

fn(stu1); 

这里的参数规定传入的必须是这个接口的所规范的,通过这个接口来实例化的对象都可以当做参数传入

函数fn的参数并不是一个固定的对象而是所有通过这个接口实例化出来的任意对象

这样不管类的功能如何,实例化对象怎么变化,只要他们通过userPort这个接口规范实例化出来,就可以传参到这个函数中

你可能感兴趣的:(接口,js)