【TS】接口和接口继承

接口

接口也相当于语法规范，在使用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

巴特西

【TS】接口和接口继承

接口

接口继承

最新文章

热门文章