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

5、typeScript中的接口

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
/*
1、属性接口
2、函数类型接口
3、可索引接口
4、类类型接口
5、接口扩展
*/ 
接口的作用:在面向对象变成过程当中,接口是一种规范的定义,它定义了行为和规范,在程序设计里面,接口起到了限制和规范的作用。接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现,它规定这批类里面必须提供某些方法,提供这些方法的类就可以满足实际需要,typesript中的接口类是于java,同时还增加了更加灵活的接口类型,包含属性、函数、可索引、和类等。
定义标准。
1、属性接口   对json的约束  
interface
ts中定义方法
function PrintLabel():void {
    console.log('PrintLabel');
}
PrintLabel();

ts中定义方法传入参数

function PrintLabel(label:string):void {
    console.log(label);
}
PrintLabel('hahah')
ts中定义方法传入参数对json进行约束
function PrintLabel(lableInfo:{label:string}):void {
    console.log(lableInfo.label);
}
PrintLabel('hahah');//错误写法
PrintLabel({name:'hahah'});//错误写法
PrintLabel({label:'hahah'});//正确写法
// 对批量方法进行约束
// 就是对传入属性的约束-属性接口
interface Fullname{
    firstName:string;
    secondName:string;
}
function printName(name:Fullname) {
    console.log(name.firstName+'---'+name.secondName);
}

printName('123456');//错误写法
printName({
    firstName:'张',
    secondName:"三",
    age:20
});//报错

// 只能有要传入的属性
printName({
    firstName:'张',
    secondName:"三",
});
// 定义传入 传入参数必须包含firstName secondName
let obj ={
    firstName:'张',
    secondName:"三",
    age:20
}
printName(obj); 
// 对批量方法进行约束
interface Fullname{
    firstName:string;
    secondName:string;
}
function printName(name:Fullname) {
    // 必须传入对象 firstName、secondName
    console.log(name.firstName+'---'+name.secondName);
}

function printInfo(info:Fullname) {
    // 必须传入对象 firstName、secondName
    console.log(info.firstName+'---'+info.secondName);
}
let obj ={
    firstName:'张',
    secondName:"三",
    age:20
}
printName(obj);

let info ={
    firstName:'李',
    secondName:"四",
    age:22
}
printName(info); 
可选参数
interface Fullname{
    firstName:string;
    secondName?:string;//可选属性
}

function getName(name:Fullname) {
    console.log(name);
}
getName({
    firstName:"firstName"
})
ajax的例子
/*
$.ajax({
    type:"get",
    url:"test.json",
    data:{username:$("#userName").val(),content:$("#content").val()},
    dataType:"json"
});
*/ 
interface Config{
    type:string,
    url:string,
    data?:string,
    dataType:string
}
// 原生js封装ajax请求
function ajax(config:Config) {
    var xhr = new XMLHttpRequest();
    xhr.open(config.type,config.url,true);
    xhr.send(config.data);
    xhr.onreadystatechange = function() {
        if(xhr.readyState===4&& xhr.status===200){
            console.log('成功');
            if(config.dataType === 'json'){
                console.log(JSON.parse(xhr.responseText));
            }else{
                console.log(xhr.responseText);
            }
        }
    }
}
ajax({
    type:'get',
    url:'http://a.itying.com/api/productlist',
    dataType:'json'
})

2、函数类型接口

// 对方法传入的参数以及返回值进行约束 批量约束
// 加密的函数类型接口
interface encrypy{
    (key:string,value:string):string;
}
var md5:encrypy=function(key:string,value:string):string {
    return key+value;
}
console.log(md5('name','zhangsan'));//namezhangsan

var sha1:encrypy=function(key:string,value:string):string {
    return key+'----'+value;
}
console.log(sha1('name','lisi'));//name----lisi

3、可索引接口

ts定义数组的方式

var arr:number[]=[1,2,3];
var arr1:Array<string>=['1','2','3'];

对数组的约束

interface UserArr{
  [index:number]:string      
}
var arr:UserArr=['aaa','bbb'];
console.log(arr[0]);//'aaa'

对对象的约束

interface UserObj{
  [index:string]:string
}
var arr:UserObj = {name:'张三'};

4、类类型接口 

对类的约束和抽象方法类似

interface Animal{
  names:string;
  eat(str:string):void;
}
class Dog implements Animal{
  name:string;
  constructor(name:string){
    this.name = name;
  }
  eat(){
    console.log(this.name+'吃粮食');
  }
}
var d=new Dog('小黑');
d.eat();//小黑吃粮食

class Cat implements Animal{
  name:string;
  constructor(name:string){
    this.name = name;
  }
  eat(food:string){
    console.log(this.name+'吃'+food);
  }
}
var c=new Cat('小花');
c.eat('老鼠');//小花吃老鼠

5、接口扩展

interface Animal{
  eat():void;  
}
interface Person extends Animal{
  work():void;
}
class Programmer{
  public name:string;
  constructor(name:string){
    this.name=name;            
  }
  coding(code:string){
    console.log(this.name+code);
  }  
}
class Web extends Programmer implements Person{
  constructor(name:string){
    super(name);
  }
  eat(){
    console.log(this.name+'喜欢吃馒头');
  }  
  work(){
    console.log(this.name+'写代码');
  }  
}
var w=new Web('小李');
w.eat();
w.work();

  


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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