TypeScript 中【class类】与【接口 Interfaces】的联合搭配使用解读-Toy模板网

这篇具有很好参考价值的文章主要介绍了TypeScript 中【class类】与【接口 Interfaces】的联合搭配使用解读。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

TypeScript 中【class类】与【接口 Interfaces】的联合搭配使用解读,TypeScript,typescript,javascript,前端

导读：

前面章节，我们讲到过 接口（Interface）可以用于对「对象的形状（Shape）」进行描述。 本章节主要介绍接口的另一个用途，对类的一部分行为进行抽象。

类配合实现接口

实现（implements）是面向对象中的一个重要概念。一般来讲，一个类只能继承自另一个类，但有时候不同类之间还会存在有一些共有的特性，这时候就可以把共有的特性提取整合为接口（interfaces），用 【implements】关键字 来实现。这个特性大大提高了面向对象的灵活性。

案例描述：

假设，苹果手机是一个类，安卓手机也是一个类，这时候，苹果手机身上有两个，功能是可以打电话和照相，而安卓手机类身上同样具有这两个功能，这时候，我们就可以考虑，把共有的方法属性给抽离出来，形成一个单独的接口，而后，安卓手机和苹果手机都可以去实现它。

代码演示：

interface phone {  //共有的打电话功能方法，抽离成一个接口
    How_to_make_a_phone_call()
}
interface photograph {  //共有的照相方法，抽离成一个接口
    Camera()
}

class ios implements phone, photograph {  //苹果手机的类
    How_to_make_a_phone_call() {
        console.log("苹果手机打电话的方式");
    }

    Camera(){
        console.log("苹果手机的照相功能");
        
    }
}
class Android implements phone, photograph {  //安卓手机的类
    How_to_make_a_phone_call() {
        console.log("安卓手机打电话的方式");
    }
    Camera(){
        console.log("安卓手机的照相功能");
    }
}

let i = new ios()
let A = new Android()
console.log(i.How_to_make_a_phone_call()); //苹果手机打电话的方式
console.log(A.How_to_make_a_phone_call());  //安卓手机打电话的方式
console.log(i.Camera()); //苹果手机的照相功能
console.log(A.Camera());  //安卓手机的照相功能

在 implements 后边可以跟随多个接口，以此来关联多个接口规范。

接口继承接口：

上面提到了，implements 后面可以关联多个接口，但是当接口很多的时候，很不利于我们的编码风格。这时候，就可以利用 接口继承接口，来实现二次封装。

注意：区别和上面两套代码对比后的不同。

interface phone {  //共有的打电话功能方法，抽离成一个接口
    How_to_make_a_phone_call()
}
interface photograph {  //共有的照相方法，抽离成一个接口
    Camera()
}

interface functionality extends phone,photograph{   //接口继承接口
    addfn() //继承接口后还可以添加新的功能
}

class ios implements functionality {  类上面就可以简化，跟随继承后的接口
    How_to_make_a_phone_call() {
        console.log("苹果手机打电话的方式");
    }
    Camera(){
        console.log("苹果手机的照相功能"); 
    }
    addfn(){
        console.log("苹果手机的新功能");
    }
}
class Android implements functionality {  //类上面就可以简化，跟随继承后的接口
    How_to_make_a_phone_call() {
        console.log("安卓手机打电话的方式");
    }
    Camera(){
        console.log("安卓手机的照相功能");
    }
    addfn(){
        console.log("安卓手机的新功能");
    }
}

let i = new ios()
let A = new Android()
console.log(i.How_to_make_a_phone_call()); //苹果手机打电话的方式
console.log(A.How_to_make_a_phone_call());  //安卓手机打电话的方式
console.log(i.Camera()); //苹果手机的照相功能
console.log(A.Camera());  //安卓手机的照相功能
console.log(i.addfn()); //苹果手机的照相功能
console.log(A.addfn());  //安卓手机的照相功能

接口继承类：

前面章节提到过，当我们在声明 class Point 时，除了会创建一个名为 Point 的类之外，同时也创建了一个名为 Point 的类型（实例的类型）

如下案例：

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
    click()
}

interface Point3d extends Point {  //接口通过  extends 继承了 类
    z: number;
}

//而此时 接口的约束规范里包含了，Point 类类型的校验规则
//所以当我们把这个规则用作于对一个对象的判断约束时，如果不包含 Point 中的属性方法就会报错


let point3d: Point3d = {};  //会报错 类型“{}”缺少类型“Point3d”中的以下属性: z, x, yts(2739

let point3d: Point3d = {  //不会报错，满足了 接口校验规范
    x: 123,
    y: 456,
    click() {
        console.log("实现");
    },
    z: 789
};

总结

本章节主要讲述了，在 TypeScript 中，class类与接口【Interfaces】，搭配一起使用的时候，会有怎样的表现形式，以及实用的点是什么。这在一定程度上，更加提高的我们的编码灵活性，所以这一知识点也值得我们掌握。

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————文章来源地址https://www.toymoban.com/news/detail-632981.html

到了这里，关于TypeScript 中【class类】与【接口 Interfaces】的联合搭配使用解读的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！