TypeScript接口，属性类接口、函数类型接口、可索引接口、类类型接口、扩展接口

最新推荐文章于 2024-07-29 10:07:15 发布

zero________________

最新推荐文章于 2024-07-29 10:07:15 发布

阅读量741

点赞数 2

分类专栏： TypeScript 文章标签： TypeScript接口属性类接口函数类接口扩展接口

本文链接：https://blog.csdn.net/zero________________/article/details/85044311

版权

TypeScript 专栏收录该内容

3 篇文章

订阅专栏

接口: 行为和动作的规范，对批量方法进行约束(interface)

属性接口

interface FullName{
    firstName:string;   //注意;结束
    secondName:string;
}
function printName(name:FullName){
    // 必须传入对象  firstName  secondName
    console.log(name.firstName+'--'+name.secondName);
}
// printName('1213');  //错误

var obj={   /*传入的参数必须包含 firstName  secondName*/
    firstName:'张',
    secondName:'三'
};
printName(obj)

可选接口

interface FullName{
    firstName:string;
    secondName?:string; // 属性可选(可传可不传)
}
function getName(name:FullName){
    console.log(name)
}  
getName({               
    firstName:'firstName'
})

函数类型接口：对方法传入的参数以及返回值进行约束

// 加密的函数类型接口
interface encrypt{
    (key:string,value:string):string;
}
var md5:encrypt=function(key:string,value:string):string{
    //模拟操作
    return key+value;
}
console.log(md5('name','zhangsan'));

可索引接口: 数组、对象的约束(不常用)

可索引接口对数组约束

interface UserArr{
    [index:number]:string // 数组索引为number类型，值为string类型
}
var arr:UserArr=['aaa','bbb'];
// var arr:UserArr=[123,'bbb'];  /*错误*/

可索引接口对对象约束

interface UserObj{
    [index:string]:string // 对象key为string类型，value为string类型
}
var arr:UserObj={name:'张三'};

类类型接口:对类的约束和抽象类抽象有点相似

interface Animal{
    name:string;
    eat(str:string):void;
}
class Dog implements Animal{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    eat(){ // 参数可选，但必须实现eat方法
        console.log(this.name+'吃粮食')
    }
}
var d=new Dog('小黑');
d.eat();

接口扩展：接口可以继承接口

 interface Animal{
        eat():void;
    }
    interface Person extends Animal{
        work():void;
    }
    class Web implements Person{
        public name:string;
        constructor(name:string){
            this.name=name;
        }
        // 实例必须实现父类指定方法
        eat(){
            console.log(this.name+'喜欢吃馒头')
        }
        work(){
            console.log(this.name+'写代码');
        }
        
    }
    var w=new Web('小李');
    w.eat();