TypeScript 中的 interface 接口
-
Interface接口初步了解
现在我们要作一个简历的自动筛选程序，
const screenResume = (name: string, age: number, height: number) => {
age < 60 && height >= 160 && console.log(name + "进入面试");
};
screenResume("张三", 18, 180);
这时候老板又增加了需求，说我必须能看到这些简历。于是你又写了这样一个方法。
const getResume = (name: string, age: number, height: number) => {
console.log(name + "年龄是：" + age);
console.log(name + "身高是：" + height);
};
getResume("张三", 18, 180);
这时候问题来了，程序开发中一直强调“代码重用”，两个方法用的类型注解一样，需要作个统一的约束。上节课一个类型别名的知识可以解决代码重复的问题，这节课我们就用一个更常用的语法接口（Interface）.
我们可以把这两个重复的类型注解，定义成统一的接口。代码如下：
interface Girl {
name: string;
age: number;
height: number;
}
有了接口后，我们的程序也要作一些修改，需要写成下面的样子。这样就更像是面向对象编程了。
const screenResume = (girl: Girl) => {
girl.age < 60 && girl.height >= 160 && console.log(girl.name + "进入面试");
};
const getResume = (girl: Girl) => {
console.log(girl.name + "年龄是：" + girl.age);
console.log(girl.name + "身高是：" + girl.height);
};
const girl = {
name: "大张三",
age: 18,
height: 170,
};
screenResume(girl);
getResume(girl);
- 接口和类型别名的区别
现在我们学了接口，也学过了类型别名，这两个语法和用处好像一样，
类型别名可以直接给类型，比如
string，而接口必须代表对象。
比如我们的类型别名可以写出下面的代码：
type Girl1 = stirng;
但是接口就不能这样写，它必须代表的是一个对象，也就是说，你初始化girl的时候，必须写出下面的形式.
const girl = {
name: "张三",
age: 18,
height: 180,
};
- 接口非必选值得定义
这时候老板又有了新的要求，要求尽量能看到体重，但是不作强制要求，就是可选值吗。那接口如何定义那？其实typeScript已经为我们准备好了相应的办法，就是在:号前加一个?
interface Girl {
name: string;
age: number;
height: number;
weight?: number;
}
然后我们再修改一下getResume方法，写成这样。
const getResume = (girl: Girl) => {
console.log(girl.name + "年龄是：" + girl.age);
console.log(girl.name + "身高是：" + girl.height);
girl.weight && console.log(girl.name + "体重是：" + girl.weight);
};
- 允许加入任意值
简历一般是有自由发挥的空间的，所以这时候需要一些任意值，就是自己愿意写什么就写什么。这时候interface接口也是支持的。
interface Girl {
name: string;
age: number;
height: number;
weight?: number;
[propname: string]: any;
}
这个的意思是，属性的名字是字符串类型，属性的值可以是任何类型。
这时候我们在对象里给一个性别,代码如下：
const girl = {
name: "张三",
age: 18,
height: 170,
weight: 50,
sex: "女",
};
再修改一下代码，这首就没有错误了。
const getResume = (girl: Girl) => {
console.log(girl.name + "年龄是：" + girl.age);
console.log(girl.name + "身高是：" + girl.height);
girl.weight && console.log(girl.name + "体重是：" + girl.weight);
girl.sex && console.log(girl.name + "性别是：" + girl.sex);
};
这时候我们的程序是不报错的，但是如果我们去掉刚才的设置，就会报错。
[propname:string]:any; //去掉
- 接口里的方法
接口里不仅可以存属性，还可以存方法，比如这时候有个say()方法，返回值是string类型。这时候你就不要再想成简历了，你需要更面向对象化的编程，想象成一个人。
interface Girl {
name: string;
age: number;
height: number;
weight?: number;
[propname: string]: any;
say(): string;
}
加上这个say()方法后，程序马上就会报错，因为我们对象里没有 say方法。那我们就要给对象一个 say 方法
const girl = {
name: "张三",
age: 18,
height: 170,
weight: 50,
sex: "女",
say() {
return "hello！！";
},
};
- 接口和类的约束
我们都知道 JavaScript 从ES6里是有类这个概念的，类可以和接口很好的结合，我们先来看一个例子。下面的
class XiaoJieJie implements Girl {}
这时候类会直接报错，所以我们需要把这个类写的完全点。
class XiaoJieJie implements Girl {
name = "张三";
age = 18;
height = 170;
say() {
return "hello！！";
}
}
- 接口间的继承
接口也可以用于继承的，比如你新写一个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.height);
girl.weight && console.log(girl.name + "体重是：" + girl.weight);
girl.sex && console.log(girl.name + "性别是：" + girl.sex);
};
修改后，你就会发现下面我们调用getResume()方法的地方报错了,因为这时候传的值必须有Teach方法，修改girle对象，增加teach()方法，这时候就不会报错了。
const girl = {
name: "zhangsan",
age: 18,
height: number;
weight?: number;
sex: "女",
say() {
return "hello！！";
},
teach() {
return "hello";
},
};
网友评论