乐趣区

关于前端:TS接口和接口继承

jiezi

接口

接口也相当于语法标准，在应用 ts 编写的时候，须要重视的就是数据类型以及语法标准，恰好这里提供了一个接口，在进行传值的时候，传值的类型以及字段必须合乎咱们预期的类型标准才能够，上面是代码演示
语法：interface 接口名 {参数名 : 数据类型}，例如：interface IPerson {username : string}

    // 接口：是一种能力，一种束缚而已
    // 定义一个接口 此处定义标准
    interface IPerson{
        firstName : string // 姓氏
        lastName : string // 名字
    }

    // 输入姓名   在调用此办法的时候，须要传值，传的值必须合乎 IPerson 内定义的标准
    function showName (person : IPerson) {return `${person.firstName},${person.lastName}`
    }
     
    const person = {
        firstName : '孙',
        lastName : '悟空'
    }
   // 此处调用 showName 的时候 传入 person 合乎下面定义的接口标准
   console.log(showName(person));    // 打印 孙，悟空

如果传值 少一项 ，或者传入的 类型谬误 ，则会 编译报错，ts 会给予提醒，例如

const person = {
        firstName : '孙',
       // lastName : '悟空'
    }
  console.log(showName(person));
  // 此处传入的 person 外部少一个字段，编译报错

接口继承

接口能够继承，子接口继承父接口，子接口就领有父接口定义的数据类型束缚，例如在此处定义了两个接口

// 接口 1
interface ICart {name : string}
// 接口 2
interface IColor {color : string}

这两个接口曾经写好了，有时候须要对不同的数据进行束缚，繁多的接口可能不太适合，或者不太够用，那么就能够将多个接口组合，这就是继承。比方，这里定义了 A 接口 name ,B接口 color, 当初有一条数据：名字是 东风 ，色彩为 红色 ，价格999, 此时能够将多个接口组合起来，B 接口继承 A 接口，让 B 接口领有 A 接口的数据类型束缚，或者是定义一个新接口继承 AB 两个接口。

// 定义一个接口，继承 ICart 和 IColor
interface ICartInfo extends ICart,IColor{price : number    // 本身也能够定义数据类型}

此时 ICartInfo 的接口实际上束缚的数据类型为：

interface ICartInfo extends ICart,IColor{ 
    name : string
    color : string
    price : number 
 }

应用接口

const cartInfo : ICartInfo = {
    name : '东风',
    color : "红色",
    price : 999
}
console.log(cartInfo);  // 输入 {name : '东风' , color : "红色" , price : 999}

案例源码：https://gitee.com/wang_fan_w/ts-seminar

如果感觉这篇文章对你有帮忙，欢送点亮一下 star 哟

退出移动版