08. TypeScript 中的 interface 接口
现在我们餐饮公司要开始招聘美女服务员了,这时候你需要一些美女服务员的简历投递和自动筛选功能,就是不符合简历要求的会直接被筛选掉,符合的才可以进入下一轮的面试。那最好的解决方法就是写一个接口。TypeScript 中的接口,就是用来规范类型的。
Interface 接口初步了解
现在我们要做一个简历的自动筛选程序,很简单。年龄小于 25 岁,胸围大于 90 公分的,可以进入面试环节。我们最开始的写法是这样的。(新建一个文件 Demo8.ts,然后编写如下代码)
const screenResume = (name: string, age: number, bust: number) => { age < 24 && bust >= 90 && console.log(name + "进入面试"); age > 24 || (bust < 90 && console.log(name + "你被淘汰")); }; screenResume("小芳", 18, 94);
写好后,好像我们的程序写的不错,可以在终端中使用ts-node demo8.ts
进行查看。这时候老板又增加了需求,说我必须能看到这些女孩的简历。于是你又写了这样一个方法。
const getResume = (name: string, age: number, bust: number) => { console.log(name + "年龄是:" + age); console.log(name + "胸围是:" + bust); }; getResume("小芳", 18, 94);
这时候问题来了,程序开发中一直强调“代码重用”,两个方法用的类型注解一样,需要作个统一的约束。在之前的教程中我们学了一个类型别名
的知识可以解决代码重复的问题,本文我们就学习一个更常用的语法接口
(Interface).
我们可以把这两个重复的类型注解,定义成统一的接口。代码如下:
interface Girl { name: string; age: number; bust: number; }
有了接口后,我们的程序也要作一些修改,需要写成下面的样子。这样就更像是面向对象编程了。
const screenResume = (girl: Girl) => { girl.age < 24 && girl.bust >= 90 && console.log(girl.name + "进入面试"); girl.age > 24 || (girl.bust < 90 && console.log(girl.name + "你被淘汰")); }; const getResume = (girl: Girl) => { console.log(girl.name + "年龄是:" + girl.age); console.log(girl.name + "胸围是:" + girl.bust); }; const girl = { name: "小芳", age: 18, bust: 94, }; screenResume(girl); getResume(girl);
这时候我们代码就显得专业了很多,以后再用到同样的接口也不怕了,直接使用girl
就可以了。
接口和类型别名的区别
现在我们学了接口
,也学过了类型别名
,这两个语法和用处好像一样,我先表个态,确实用起来基本一样,但是也有少许的不同。
类型别名可以直接给类型,比如
string
,而接口必须代表对象。
比如我们的类型别名
可以写出下面的代码:
type Girl1 = stirng;
但是接口就不能这样写,它必须代表的是一个对象,也就是说,你初始化girl
的时候,必须写出下面的形式.
const girl = { name: "小芳", age: 18, bust: 94, };
接口非必选值得定义
比如这时候老板又有了新的要求,要求尽量能看到小姐姐的腰围,但是不作强制要求,就是可选值吗。那接口该如何定义呢?其实typeScript
已经为我们准备好了相应的办法,就是在:
号前加一个?
比如把Girl
的接口写成这样。
interface Girl { name: string; age: number; bust: number; waistline?: number; }
然后我们再修改一下getResume
方法,写成这样。
const getResume = (girl: Girl) => { console.log(girl.name + "年龄是:" + girl.age); console.log(girl.name + "胸围是:" + girl.bust); girl.waistline && console.log(girl.name + "腰围是:" + girl.waistline); };
这时候在定义girl
对象的时候,就可以写saistline
(腰围),也可以不写了。
允许加入任意值
简历一般是有自由发挥的空间的,所以这时候需要一些任意值,就是自己愿意写什么就写什么。这时候interface
接口也是支持的。方法如下:
interface Girl { name: string; age: number; bust: number; waistline?: number; [propname: string]: any; }
这个的意思是,属性的名字是字符串类型,属性的值可以是任何类型。
这时候我们在对象里给一个性别,代码如下:
const girl = { name: "小芳", age: 18, bust: 94, waistline: 21, sex: "女", };
再修改一下代码,这时就没有错误了。
const getResume = (girl: Girl) => { console.log(girl.name + "年龄是:" + girl.age); console.log(girl.name + "胸围是:" + girl.bust); girl.waistline && console.log(girl.name + "腰围是:" + girl.waistline); girl.sex && console.log(girl.name + "性别是:" + girl.sex); };
这时候我们的程序是不报错的,但是如果我们去掉刚才的设置,就会报错。
[propname:string]:any; //去掉
接口里的方法
接口里不仅可以存属性,还可以存方法,比如这时候有个say()
方法,返回值是string
类型。这时候你就不要再想成简历了,你需要更面向对象化的编程,想象成一个人。
interface Girl { name: string; age: number; bust: number; waistline?: number; [propname: string]: any; say(): string; }
加上这个say()
方法后,程序马上就会报错,因为我们对象里没有 say 方法。那我们就要给对象一个 say 方法:
const girl = { name: "大脚", age: 18, bust: 94, waistline: 21, sex: "女", say() { return "欢迎加入我们团队!!"; }, };
接口和类的约束
我们都知道 JavaScript 从ES6
里是有类这个概念的,类可以和接口很好的结合,我们先来看一个例子。下面的:
class XiaoJieJie implements Girl {}
这时候类会直接报错,所以我们需要把这个类写的完全点。
class XiaoJieJie implements Girl { name = "小红"; age = 18; bust = 90; say() { return "欢迎加入我们团队!!"; } }
接口间的继承
接口也可以用于继承的,比如你新写一个Teacher
接口,继承于Person
接口。
interface Teacher extends Girl { teach(): string; }
比如这时候老板说了,只看 Teacher 级别的简历,那我们需要修改getResume()
方法。
const getResume = (girl: Teacher) => { console.log(girl.name + "年龄是:" + girl.age); console.log(girl.name + "胸围是:" + girl.bust); girl.waistline && console.log(girl.name + "腰围是:" + girl.waistline); girl.sex && console.log(girl.name + "性别是:" + girl.sex); };
修改后,你就会发现下面我们调用getResume()
方法的地方报错了,因为这时候传的值必须有Teach
方法:
getResume(girl);
修改girl
对象,增加teach()
方法,这时候就不会报错了。
const girl = { name: "小丽", age: 18, bust: 94, waistline: 21, sex: "女", say() { return "欢迎加入我们团队!!"; }, teach() { return "我是一个老师"; }, };
关于接口的知识就讲到这里吧,这基本包含了接口 80%的知识,还有些基本不用的语法,我就不讲了。如果课程中遇到,我们再讲。学会了接口,你还需要明白一件事,就是接口只是对我们开发的约束,在生产环境中并没有体现。也可以说接口只是在 TypeScript 里帮我们作语法校验的工具,编译成正式的js
代码,就不会有任何用处了。
码云笔记 » 08. TypeScript 中的 interface 接口