TypeScript学习笔记——TypeScript的接口

Ts的接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。

在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

拓展：UI——User Interface

1、为什么要有接口？

function Fun(currObj:{a:String}):String{
		console.log(currObj.a)
		return 'abc'
}

let f1 = Fun({a:'zxc'})

上面定义的函数Fun在Ts中为了进行类型的约束，我们需要为他们的参数，参数对象内的值，返回值等都设置类型约束，对于不同的函数我们都需要重复的设置这些，这似乎很麻烦，

所以我们能不能有一种方便的写法呢（复用的思想），Ts为我们提供了：

2、 interface初始

interface关键字用来定义接口,可以进行一次定义多次使用，也可以进行接口继承使用，

不会去在于接口定义的数学的顺序，只要对应属性存在并且类型正确即可。

• 创建接口

  interface nameCheck {
   	a: string,
      b:number
  }
  

• 接口使用体验

  //这里的接口nameCheck代表了一个包含属性a类型为字符串、b类型位数字的对象
  function Fun(currObj:nameCheck):String{
  		console.log(currObj.a,currObj.b)
  		return 'abc'
  }
  

3、 interface的特性

• 可选属性

  1. 可以对可能出现的属性预定义
  2. 可以捕获引用不存在时出现的错误

  interface myInterface {
  
   label: string,
  
   age?: Number, //可选属性，
   
   }
  

• 只读属性

  和js当中的const类似，但是const只能定义变量只读，readonly是可以定义对象的属性是只读的

interface myInterface {

 label: string,
 
 readonly tips: string, //只读属性,一旦定义了之后就不能再次的修改

}

• 属性检查

  是一种范围性的属性类型约束（某一类），弥补了可选属性严格要求属性值必须存在才能够使用的情况

  interface myInterface {
  
   [property: string]: number, //属性名为字符串，属性值为number，避开类型检查
       
  }
  

  注：属性检查可以用来筛选似的定义某一类的约束，但对于其他的筛选,一定不能违反之前的规则所定义的一些约束规则。

  interface myInterface {
  
   label: string,  //属性名为字符串，属性值为字符串
  
   [property: string]: number, //属性名为字符串，属性值为number，和上面的label冲突
       
   //[propName: string]: any,//为了防止属性检查的要求和其他的属性要求之间产生冲突，使用any
  
  }
  

4、接口定义返回值类型

interface myInterfaceFun {

  //定义了函数参数的类型和数量及函数返回值的类型
 (a: number, b: string): boolean, //函数描述
}

 //使用
let myFun: myInterfaceFun = function (f: number, s: string) {

 let result: any = f

 return typeof result == typeof s

}

myFun(22, "jj")

5、 接口定义索引类型

Ts和js相同都支持number/strling两种索引类型

1. 索引类型尽量在最前面定义，后面出现的索引类型必须是开头所定义的类型的子类型

interface myInterfaceIndex {

 [index: number]: string, //定义索引为数字，值为字符串的接口，这里的number类型的索引后面会自动转换转换为字符串

 readonly [index: string]: string,//设置只读属性

 //age:number,这里不能是数字会和上面一条冲突而报错

}

let myArray:myInterfaceIndex = ["A",'B','C']

let myObj: myInterfaceIndex = { 1: "A", 2: 'B', 'C': 'D' }

6、类Class类型

使用关键字 implements(使生效、执行)

interface myInterfaceClock {
    //不能定义进行限制constructor,类接口设计知识规范一个标准类最基本的一些属性和方法（不包含构造函数本=身
	//constructor(h: number, m: number) { }
    
 	currentTime: Date,

 	setTime(d: Date)

}

// 可以推断出这个类最基本所含有的属性、方法
class myClock implements myInterfaceClock {

 currentTime: Date;

 setTime(d: Date) {

  this.currentTime = d;

 }

 constructor(h: number, m: number) { }

}

7、接口的继承

​ 接口的继承可以是一个或者多个，合成新的接口进行使用

interface myInterface1{
    color:String
}
interface myInterface2{
    age:number
}
//一个调用这个myAllInterface的接口，必须要有color,age,newProp等这些属性
interface myAllInterface extends myInterface1,myInterface2{
 	newProp:boolean  //自己的属性
}

8、接口实现混合类型

​ 函数也是对象! 所以我们可以给一个函数制定一个接口, 定义函数的传参和自定义的额外属性

interface userInfoCheck {
    (name:String,age:number):String,//函数的参数类型和数量以及返回值的类型
        
    msg:String;//属性
	
	getName():void	
        
}
function getUserInfo():userInfoCheck{
    let userInfo = <userInfoCheck>function(name:String,age:nunber){
        return 'zxc'
    }
    userInfo.msg = 'hello'
    userInfo.getName(){
        return userInfo()
    }
    return userInfo
}

9、接口继承类

class A {
  private  a :any
}
interface setA extends A {
	select() : void
	//创建了一个新的接口，这个接口的要求是得有一个私有属性a和一个select的方法
}
//正确，a属性通过A类型继承了过来
class B extends A implement setA{
    select(){
        consile.log(a)  
    }
    
}
//报错，c类型缺少state属性
//class C implement setA{
//    select(){
//       consile.log(a)  
//    }
//}