5、typeScript中的接口

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›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();