typescript-接口的基本使用(一)

什么是接口

接口是一种"规范" 。看清了啊,这里和java、php中的接口是有点区别 的啊。这里是"规范"。表示某一些参数需要符合某一种"规范"。

接口的声明:

Interface 接口名称 {

属性名:属性类型

}

场景:

记不记得我们以前考试的时候,都有一个"准考证号"。没有准考证号的人是不能进入考场的,监考老师在我们入场的时候,需要检查我们的准考证号,没有准考证号的人是不能进入考场的。

TypeScript 复制代码
// 考生的接口,考生必须有stuId的属性
interface IStu {
    stuId: string;
}
class Teacher {
    public checkStuId(stu: IStu): void {
        console.log("我的准考证是:", stu.stuId);
    }
}
class BoyStu {
    public name: string = "男生";
    public stuId: string = "123"; // 准考证号
}
class GirlStu {
    public name: string = "女生";
    public stuId: string = "456"; // 准考证号
}
class Other {
    public name: string = "其他人";
}

let boy: BoyStu = new BoyStu();
let girl: GirlStu = new GirlStu();
let other: Other = new Other();

let teacher: Teacher = new Teacher();

teacher.checkStuId(boy);
teacher.checkStuId(girl);
// teacher.checkStuId(other);

查看以上,可以看到other不能传递到"老师"的checkStuId的参数里,因为这个other没有stuId的属性。而boy和girl都有stuId属性,所以,他们可以传递到"老师"的checkStuId的方法中。

相关推荐
徐小夕@趣谈前端2 小时前
NO-CRM 2.0正式上线,Vue3+Echarts+NestJS实现的全栈CRM系统,用AI重新定义和实现客户管理系统
前端·javascript·人工智能·开源·编辑器·echarts
Mr Xu_2 小时前
Vue3 + Element Plus 实现点击导航平滑滚动到页面指定位置
前端·javascript·vue.js
pas1363 小时前
35-mini-vue 实现组件更新功能
前端·javascript·vue.js
前端达人3 小时前
为什么聪明的工程师都在用TypeScript写AI辅助代码?
前端·javascript·人工智能·typescript·ecmascript
2501_915918413 小时前
如何在iPad上找到并打开文件夹的完整指南
android·ios·小程序·uni-app·iphone·webview·ipad
EndingCoder3 小时前
属性和参数装饰器
java·linux·前端·ubuntu·typescript
TTGGGFF4 小时前
控制系统建模仿真(十):实战篇——从工具掌握到工程化落地
前端·javascript·ajax
郝学胜-神的一滴4 小时前
深入解析C/S架构与B/S架构:技术选型与应用实践
c语言·开发语言·前端·javascript·程序人生·架构
s19134838482d4 小时前
javascript练习题
开发语言·javascript·ecmascript