1 什么是接口
接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽 象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法
接口也是一种数据类型
格式:
interface interface_nane {}
2 接口的基本使用
:void（不返回值）
interface IFullName{ firstName:string, lastName:string } let goddassName:IFullName={ firstName:"杨", lastName:"超越" } console.log(goddassName.firstName); console.log(goddassName.lastName); function say({firstName,lastName}:IFullName):void{ console.log(`精灵古怪:${firstName}${lastName}`); } say(goddassName)
3 可选属性与只读属性
可选属性使用: ?
只读属性使用: readonly
readonly与const的区别:做为变量使用的话用const，若做为属性则使用readonly
// 可选属性 使用?来进行修饰 interface IFullName{ firstName:string, lastName:string, age?:number } let goddassName:IFullName={ firstName:"杨", lastName:"超越" } console.log(goddassName.firstName); console.log(goddassName.lastName); // 只读属性 readonly interface IInfo{ readonly uanme:string; readonly uage:number; } let beauty:IInfo={ uanme:"汉库克", uage:18 }
总结:readyonly 与const 区别:
最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。做为变量使用的话用const。若做为属性则使用readonly
4 索引签名
定义:索引签名用于描述那些“通过索引得到”的类型 格式:如 [props: string] :any 应用场景:解决参数问题
interface IFullName{ firstName:string lastName:string age?:number singName?:string [props:string]:any }
注意点:如果使用接口来限定了变量或者形参，那么在给变量或者形参赋值的时候，多一个或者少一个都不行实际开发中往往会出现多或者少的情况，怎么解决?
// 少一个或者多多个属性 // 解决方案：可选属性 let goddass1:IFullName ={firstName:"欧阳",lastName:"娜娜"}; let goddass2:IFullName ={firstName:"欧阳",lastName:"娜娜",age:22}; // 多一个或者多多个属性 // 方案一：使用变量 let info = {firstName:"欧阳",lastName:"娜娜",age:22,singName:"美女",dance:"跳舞"} let doddass3:IFullName = info // 方案二：适用类型断言 let goddass4:IFullName = ({firstName:"古力",lastName:"娜扎",age:18,singName:"美女",dance:"跳舞"})as IFullName // 索引签名? // 索引签名用于描述那些“通过索引得到”的类型 // 注意点:对象中的键,会被转化为字符串 interface Ibeauty{ [props:string]:string; } let name:Ibeauty = {name:"迪丽热巴",name2:"古力娜扎",name3:"欧阳娜娜"}; interface Iage{ [props:string]:number } let afe:Iage = {age1:18,age2:20,age3:20}; // 方案三：索引签名 let goddass5:IFullName = {firstName:"杨紫",lastName:"杨幂",age:20,singName:"女明星",dance:"演员"}
5 函数接口
为了使用接口表示函数类型，我们需要给接口定义一个调用签名。
它就像是一个只有参数列表和返回值类型的函数定义
interface ImakeMoney{ (salary:number,reward:number):number } let sum:ImakeMoney=function(x:number,y:number):number{ return x+y; } let res = sum(10,20) console.log(res);
6 接口的继承
接口继承就是说接口可以通过其他接口来扩展自己。
Typescript允许接口继承多个接口。
继承使用关键字extends
// 单继承 interface IPerson{ age:number } interface IName extends IPerson{ name:string } let lady:IName={ name:"杨超越", age:20 } // 多继承 interface IFatherMoney{ m1:number } interface IMotherMoney{ m2:number } interface ISon extends IFatherMoney,IMotherMoney{ s:number } let money:ISon={ m1:100, m2:100, s:100 } console.log(`子代一共有${money.m1+money.m2+money.s}万元`);
7 接口与类型别名的异同
- 相同点:
都可以描述属性或方法 都允许拓展
不同点:
type可以声明基本数据类型，联合类型，数组等; interface只能声明变量 当出现使用type和interface声明同名的数据时; type会直接报错; interface会进行组合 type不会自动合并;interface会
// 相同点： type wonenStar ={ name:string age:number perform():any } interface IWSar{ name:string age:number perform():any } let star1={ name:"杨紫", age:20, perform(){ return "家有儿女" } } let star2 = { name:"李一桐", age:18, perform(){ return "射雕英雄传" } } // 2.都允许扩展 type money1={ x1:number } type money2=money1&{ x2:number } let money:money2={ x1:10, x2:20 } interface IStar1{ name:string } interface IStar2 extends IStar1{ age:number } let star:IStar2={ name:"范冰冰", age:26 } // 不同点： // 1.type可以声明基本数据类型，联合类型，数组等 // interface只能声明变量 type age = number; type info = string | number | boolean; type beautyList = [string | number]; // interface Iage = number; //报错 // 2.当出现使用type和interface声明同名的数据时 // type会直接报错 // interface会进行组合 // type mygoddassName = { // name:string // } // type mygoddassName = { // name:number // } interface mygoddassName{ name:string } interface mygoddassName{ name:string age:number } let goddass:mygoddassName = { name:"赵丽颖", age:20
