• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript接口

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

TypeScript接口

接口是一种规范的定义,它定义了行为和动作的规范;在程序设计里面,接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类里必须提供某些方法,提供这些方法的类就可以满足实际需要。

一、接口类别:

   1、属性接口对传入对象的约束

interface IPeople {
    name:string;
    age:number;
}

function printPeople(person:IPeople) {
    console.log("姓名:"+person.name);
    console.log("年龄:"+person.age);
}

printPeople({name:'张三',age:25}); //正确
printPeople("123");//错误
printPeople({name:'李四',age:26,sex:''});//错误

 

     可选接口:接口中的属性是可选的

interface IPeople {
    name:string;
    age?:number;
}

function printPeople(person:IPeople) {
    console.log("姓名:"+person.name);
    console.log("年龄:"+person.age);
}

printPeople({name:'张三',age:25}); //正确
printPeople({name:'王五'}); //不传age也可以,但是接口中age后必须带?
printPeople("123");//错误
printPeople({name:'李四',age:26,sex:''});//错误

 

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

//加密的函数类型接口
interface encrypt {
    (key:string,value:string):string;
}

var md5:encrypt = function (key:string,value:string):string {

    return key+value;
}

console.log(md5('deyun','Web前端'))

 

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

//对数组的约束
interface UserArr {
    [index:number]:string; //字符串类型数组,数组的索引为number类型
}

var arr: UserArr = ["12","李四","aaa"];//正确
var arr1: UserArr = [1,"李四",a]; //错误

//对对象的约束
interface UserObj {
    [index:string]:string;
}
var obj:UserObj = { "姓名":"张三","性别":"" }; //正确
var obj1: UserObj = []; //错误

 

  4、类类型接口:对类的约束

interface IAnimal {
    sleep(): void;
    eat(): void;
}
class Dog implements IAnimal{
    eat(): void {
        console.log("狗狗在吃肉...");
    }

    sleep(): void {
        console.log("狗狗在睡觉:呼呼...")
    }
}

 

二、接口继承:接口继承就是说接口可以通过其他接口来扩展自己。TypeScript 允许接口继承多个接口。继承使用关键字 extends。

   1、单接口继承语法格式:

     Child_interface_name extends super_interface_name

   示例:

interface Shape {

    color: string;

}

interface Square extends Shape {

    sideLength: number;

}

 

let square = <Square>{};

square.color = "blue";

square.sideLength = 10;

console.log(square)

     2、多接口继承语法格式:

Child_interface_name extends super_interface1_name

     示例:

interface Shape {

    color: string;

}

 

interface PenStroke {

    penWidth: number;

}

interface Square extends Shape, PenStroke {

    sideLength: number;

}

 

let square1 = <Square>{};

square1.color = "blue";

square1.sideLength = 10;

square1.penWidth = 5.0;

console.log(square1)

 

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
React服务端渲染之TypeScript+Next.js实战发布时间:2022-07-18
下一篇:
zf-6-redux typescript版本(30天)发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap