TypeScript接口
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