TypeScript接口
TypeScript对值所具有的结构进行类型检查, 用的“鸭式辨型法”。接口的作用就是为你的代码和第三方代码提供契约。
一,对象类型接口
1,正常后端返回的接口
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
interface List{ id:number, name:string } interface Result{ data:List[] } function render(result:Result){ result.data.forEach((value)=>{ console.log(value.id,value.name); }) } let result={ data:[ {id:1,name:"A"}, {id:2,name:"B"} ] } render(result)
2,后端返回约定之外的字段,绕过类型检查
如果是通过对象字面量会类型检查报错,
绕过类型检查的方法有三种,
方法一,定义了一个变量,不会报错
let result={ data:[ {id:1,name:"A",sex:'male'}, //加了接口之外的sex不会报错 {id:2,name:"B"} ] }
方法二,使用类型断言
//推荐as Result render({data:[ {id:1,name:"A",sex:'male'}, {id:2,name:"B"} ]} as Result) //as Result 明确告诉编译器返回值就是Result //加<>在react中会产生歧义 render(<Result>{data:[ {id:1,name:"A",sex:'male'}, {id:2,name:"B"} ]})
方法三,使用字符串索引类型签名
interface List{ id:number, name:string, [x:string] :any //用任意的字符串去索引List可以得到任意的结果 } render({data:[ {id:1,name:"A",sex:'male'}, {id:2,name:"B"} ]})
3,可选属性?
4,只读属性readonly
interface List{ readonly id:number, // value.id++ //Cannot assign to 'id' because it is a read-only property. name:string, [x:string] :any //用任意的字符串去索引List可以得到任意的结果 age?:number }
5,可索引类型的接口
以上接口属性的个数都是确定 ,当你不确定一个接口中有多少个属性的时候,可以使用可索引类型的接口。可索引类型的接口可以使用数字去索引,也可以使用字符串去索引
// 可索引类型 // 与使用接口描述函数类型差不多,我们也可以描述那些能够“通过索引得到”的类型,比如 a[10] 或 ageMap['daniel']。 // 可索引类型具有一个索引签名,它描述了对象索引的类型,还有相应的索引返回值类型。 //用数字索引的接口 interface StringArray{ [index: number]: string; //签名:用任意的数字索引StringArray都会得到一个string,相当于定义了一个string类型的数字 } let myArray: StringArray; myArray =['A','B','C','D'] console.log(myArray[2]); // C //用字符串索引的接口 interface Names{ [index:string]:string //用任意字符串去索引Names得到的类型都是string // y:number//类型“number”的属性“y”不能赋给字符串索引类型“string”。 [z:number]:string //数字索引签名的返回值一定要是字符串索引签名返回类型的子类型 //因为javascript会进行类型转换,把number转换成string }
二,函数类型接口
1,使用3钟方法定义函数类型
//用一个变量定义一个函数类型 let add1: (x:number,y:number)=>number //用一个接口来定义函数类型 interface Add2{ (x:number,y:number):number //不需要指定函数名称,直接定义类型 } //使用类型别名type关键字 type Add3 = (x:number,y:number)=>number //实现 add1=(a,b)=>a+b let addfunction2: Add2= (a,b) =>a+b let addfunction3: Add3= (a,b) =>a+b
2,混合接口
既可以定义函数,也可以定义属性和方法
interface Lib{ ():void; version:string; doSomething():void; } function getLib(){ let lib:Lib =(()=>{}) as Lib; //用断言 lib.version = '1.0'; lib.doSomething=()=>{}; return lib; } let lib1 = getLib(); lib1(); lib1.doSomething(); let lib2 = getLib();
如果觉得本文对您有帮助~可以
微信支持一下:![微信打赏](http://files.cnblogs.com/files/starof/starof_wx.bmp)