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
}

        总结:readyon1y 与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
}