Typescript接口

一、接口的基本使用

• 什么是接口？

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

接口也是一种数据类型

• 格式

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);
    // say({name:"杨幂"})

二、可选属性与只读属性

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

export default {}

// 可选属性
interface IFullName{
firstName : string
lastName: string
age? : number
}
let goddass :IFullName={
firstName :"杨",
lastName:"超越",
// age:18
}


//只读属性
interface IInfo{
readonly name : string
readonly age: number
}

let info:IInfo={
name: "赵丽颖",
age:18
}

三、索引签名

解决参数可多可少的问题

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

// 方案一:使用可选参数
interface IFullName{
firstName:string
lastName: string
age ? : number
}

let goddass1:IFullName={firstName:"刘",lastName:"亦菲",age:18}
let goddass2:IFullName={firstName:"刘",lastName:"亦菲"}


//方案二:使用变量
let info={firstName:"杨",lastName:"幂", age:18,song:"爱的供养"};
let goddass3:IFullName=info;

//方案三:使用类型断言
let godass4:IFullName=({firstName:"杨",lastName:"幂" ,age:18,song:"爱的供养" ,tv:"仙剑奇侠传三"}) as IFullName;


//索引签名
interface IBeauty{
    [ props:string]: string
    }
    let goddass5={name1:"刘亦菲", name2: "刘诗诗" , name3: "赵丽颖"};


    interface IAge{
        [ props:string] : number
        }
    let ages={age1: 10,age2: 20,age3: 30}



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

四、函数接口

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

五、接口的继承

• 接继承就是说接口可以通过其他接口来扩展自己。
• 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: 1000,
    m2: 10000,
    s1: 1
}
console.log(`儿子共有${sonMoney.m1 + sonMoney.m2 + sonMoney.s1}`)

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

export default {}
//相同点:
// 1.都可以描述属性或方法
type womanStar = {
    name: string
    age: number
    show(): void
}
interface IwomanStar {
    name: string
    age: number
    show(): void
}

let star1: womanStar = {
    name: "刘亦菲",
    age: 18,
    show() {
        console.log("仙剑奇侠传一")
    }
}
let star2: IwomanStar = {
    name: "杨幂",
    age: 18,
    show() {
        console.log("古剑奇谭")
    }
}

//2.都允许拓展
type money = {
    y1: number
}
type money2 = money & {
    y2: number
}
let salary: money2 = {
    y1: 10,
    y2: 20
}


interface IStar1 {
    name: string
}
interface IStar2 extends IStar1 {
    age: number
}
let star: IStar2 = {
    name: "范冰冰",
    age: 18
}

//不同点:
// 1.type可以声明基本数据类型，联合类型，数组等
//interface只能声明变量

type t1 = number;
type t2 = number | string;
type t3 = [number | boolean]

// interface ITest=number

// 2.当出现使用type和interface声明同名的数据时
//type会直接报错


// type myName = {
//     name: string
// }
// type myName = {
//     name: string
// }
interface IMayName {
    name: string
}
interface IMayName {
    name: string,
    age: number
}
let myName: IMayName = {
    name: "库里",
    age: 30
}