TypeScript 第五讲 ———— TypeScript 接口

最新推荐文章于 2024-07-17 19:35:38 发布

weixin_30414155

最新推荐文章于 2024-07-17 19:35:38 发布

阅读量201

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/mqflive81/p/11489195.html

版权

前言：

接口的作用在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所要遵守的规范 ,接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法提供这些方法的类就可以满足实际需要。typescrip中的接口类似于java, 同时还增加了更灵活的接口类型，包括算性、函故、可索引和类等.

1、属性类接口

2、函数类型接口

3、可索引接口

4、类类型接口

5、接口拓展

属性类接口

//ts中定义方法传入参数
function printLabel(label: string):void {

    console.log('printLabel');

}
printLabel('haha');

这里的  label: string 就是一种约束，虽然不是接口，但是表达了接口的定义，那就是一种规定的约束

//ts中定义方法传入参数
function printLabel(labelInfo:{label: string}):void {

    console.log('printLabel');

}
printLabel( label: ' 张三 ');//这里必须和传入的参数类型对应，这里传入的是对象

接口：行为和动作的规范，对批量方法进行约束

//传入对象的约束  属性接口
interface FullName{
    firstName: string;
    secondName: string;
}


function printName(name: FunllName){

    console.log(name.firstName+'....'+name.secondName)

}
var obj = {
   firstName: '张';
   secondName: '三';

};
printName(obj)

函数类型接口

对方法传入的参数以及返回值进行约束

interface encrypt{

   (key:string, value:string):string;

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

    return key+value;

}
console.log(md5('name', '张三'));

可索引接口

数组、对象的约束（不常用）

var arr: number[] = [12123,1243124]

var arr1:Array<string> = ['3342' , '324']

对数组：

interface UserArr{

  [index: number ]:string;

}
var arr:UserArr = ['aaaa', 'bbbb'];

console.log(arr[0]);

对对象的约束：

interface UserObj{

  [index: string]: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(){
    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.work();

复杂类型：

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)
    }

}
//web类
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.work();
w.coding('写ts代码');