TypeScript 接口

1、接口的基本使用

什么是接口?

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现.然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法

接口也是一种数据类型

格式：interface interface_name {}

export default {}
interface IFullName{
    firstName:string
    lastName:string
}
let goddassName:IFullName={
    firstName:'张',
    lastName:'婧'
}
console.log(goddassName.firstName,goddassName.lastName);

function say({firstName,lastName}:IFullName):void{
    console.log(`我的姓名是：${firstName}${lastName}`);
}
say(goddassName)

2、可选属性与只读属性

• 可选属性使用：?
• 只读属性使用：readonly
• readonly与 const 的区别：做为变量使用的话用 const，若做为属性则使用 readonly

export default {}

// 可选属性 使用?来进行修饰
interface IFullName{
    firstName:string
    lastName:string
    age?:number
}

let goddadd:IFullName={
    firstName:"王",
    lastName:"仔越",
    // age:18//因为上面有? 所以这儿可写也可不写
}

// 只读属性  readonly

interface IInfo{
    readonly name:string
    readonly age:number
}
let info:IInfo={
    name:"赵六",
    age:16
}
// info.name='张三'//此处会报错，因为上面设置了只读属性

3、索引签名

• 定义：索引签名用干描述那些"通过索引得到"的类型
• 格式：如 [props : string] : any
• 应用场景：解决参数问题

export default {}

// 解决参数可多可少的问题
// 方案一:使用可选属性 ?
interface IFullName{
    firstName:string
    lastName:string
    age?:number
}
let goddass1:IFullName={firstName:"张",lastName:"菲",age:19}
let goddass2:IFullName={firstName:"王",lastName:"五"}

// 方案二:使用变量
let info={firstName:"张",lastName:"三",age:19,song:"爱的供养"}
let goddass3:IFullName=info
// 方案三:使用类型断言
let goddass4:IFullName=({firstName:"李",lastName:"秋萍",age:19,song:"爱的供养",tv:"古剑奇谭"}) as IFullName

// 索引签名
// 注意点:对象中的键,会被转化为字符串
interface IBeauty{
    [props:string]:string
}
let goddadd5={name1:'赵颖',name2:"赵六",name3:'张坤'}

interface IAge{
    [props:string]:number
}
let goddadd6={age1:15,age2:18,age3:20}

interface IFName{
    firstName:string
    lastName:string
    [props:string]:string
}
let goddass6:IFName={firstName:"刘",lastName:"博",sex:"女",mobile:"15936984852"}
let goddass7:IFName={firstName:"刘",lastName:"菲",tv:"甄嬛传"}

4、函数接口

• 为了使用接口表示函数类型，我们需要给接口定义一个调用签名。

 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

export default {}
// 定义函数接口
interface ImakeMoney{
    (salary:number,reward:number):number
}
let sum:ImakeMoney=function(x:number,y:number):number{
    return x+y
}
let result=sum(100,625)
console.log(result);//725

5、接口的继承

• 接口继承就是说接口可以通过其他接口来扩展白己。
• TypeScript 允许接口继承多个接口。
• 继承使用关键字 extends。

export default {}
// 单继承
interface IPerson{
    age:number
}
interface IName extends IPerson{
    name:string
}
let person:IName={
    name:"孟坤",
    age:18
}
// 多继承
interface IFatherMoney{
    m1:number
}
interface IMontherMoney{
    m2:number
}
interface ISonMoney extends IFatherMoney,IMontherMoney{
    s1:number
}
let sonMoney:ISonMoney={
    m1:100,
    m2:200,
    s1:500
}
console.log(`一共有${sonMoney.m1+sonMoney.m2+sonMoney.s1}元`);

6、接口与类型别名的异同

①相同点:

• 都可以描述属性或方法
• 都允许拓展

②不同点:

• type 可以声明基本数据类型，联合类型，数组等; interface 只能声明变量
• 当出现使用 type 和 interface 声明同名的数据时; type 会直接报错; interface 会进行组合
• type 不会自动合并; interface 会

export default {}
// 相同点:
// 1.都可以描述属性或方法
type WomenStar={
    name:string
    age:number
    show():void
}
interface IWomenStar{
    name:string
    age:number
    show():void
}
let star1:WomenStar={
    name:"张三",
    age:18,
    show(){
        console.log('我唱的歌曲:Home');
    }
}
let star2:IWomenStar={
    name:'赵六',
    age:18,
    show(){
        console.log('我唱的歌曲:情人');
        
    }
}
// 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:20
}
// 不同点:
// 1.type可以声明基本数据类型，联合类型，数组等
type t1=number;
type t2=number|string;
type t3=[number|boolean]
// interface只能声明变量
// interface ITest=number//报错

// 2.当出现使用type和interface声明同名的数据时
// type会直接报错
// type myName={
//     name:string
// }
// type myName={
//     name:string
// }

// interface会进行组合
interface IMyName{
    name:string
}
interface IMyName{
    name:string,
    age:number
}
let myName:IMyName={
    name:'千玺',
    age:21
}