初识(typescript)--ts //接口

接口:可用作约束多个对象,数组,函数

关键字:
声明接口 interface
实现接口 implements

//可选参数,对象的约束
	interface peopleName{   
    fristName? : string,
    lastName? : string,
}

	

// 定义多个方法

function teacher(name:peopleName) : void{
    console.log(`语文老师叫: ${name.fristName} ${name.lastName}`);
}

function son(name:peopleName) : void{
    console.log(`我的儿子叫: ${name.fristName} ${name.lastName}`);
}

// 在外部定义参数,参数体内只要含有接口定义的的即可,若在调用方法体内定义,则必须且只有接口内定义的函数

let obj ={
    fristName : '李',
    lastName : '白',
    age: 18 ,
    sex : 'man'
}

teacher(obj);

son({fristName:'小' , lastName : '龙人'})  //正确写法

// son({fristName :'小'})   //错误写法  若不是可选参数,及错误

接口继承接口

interface car {
    name : string;
    color : string;
    way(name:string , color : string) :string
}

interface BBA extends car {
    type():void;
}

class people implements BBA{
    name :string;
    color: string; 
    constructor(name :string , color : string){
        this.name = name;
        this.color = color
    }

    way(name: string, color: string): string {
         return    ` ${name} 可以爬山涉水`
    }

    type(): void {
        console.log(this.name)
    }
}

let woman =  new people('女人','蓝色')

woman.type()

接口结合继承使用

// 实现接口

interface car {
    name : string;
    color : string;
    way(name:string , color : string) :string
}

class BMW implements  car{
    name: string;
    color: string;
    constructor(name:string,color:string){
        this.name = name;
        this.color = color
    }
    way(name: string, color: string): string {
        return `${color} ${name} 进入工厂`
    }
}

class BMW_X1 extends BMW {
    constructor(name:string , color:string ){
        super(name,color)
    }
    way(name: string, color: string): string {
        return `宝马类型: ${name} 颜色: ${color}`
    }

}

let a = new BMW_X1 ('宝马X1','红色')

console.log(a)
上一篇:关于TypeScript的声明文件的总结


下一篇:vue3+typescript 使用 pinia 作为状态管理