一、Interface 初步了解
其实Interface与昨天学习到的类型别名相似，都有规范类型的作用。
以完成一个筛选功能为例,如下：
const test = (name: string, age: number, height: number) => {
age < 24 && height >= 170 && console.log(name + "符合要求");
age > 24 || height < 170 && console.log(name + "不符合要求");
};
const more = (name: string, age: number, height: number) => {
console.log(name + "年龄是：" + age);
console.log(name + "身高是：" + height);
};
test("小明", 18, 180);
more("小明", 18, 180);
1、可选值
从代码可以看出，两个方法中，参数和类型注解都是相同的，当然，使用类型别名的知识可以解决代码重复的问题，如何使用Interface解决代码重复的问题，如下：
interface student {
name: string;
age: number;
height: number;
sex?:string; // ?:表示不作强制要求，就是可选值,可有可无
}
const test = (xiaoming:student) => {
const {name,age,height} = xiaoming
age < 24 && height >= 170 && console.log(name + "符合要求");
age > 24 || height < 170 && console.log(name + "不符合要求");
};
const more = (xiaoming:student) => {
const {name,age,height,sex} = xiaoming
console.log(name + "年龄是：" + age);
console.log(name + "身高是：" + height);
sex && console.log(name + "性别是：" + sex);//当参数有sex时才打印
};
const xiaoming = {
name: "小明",
age: 18,
height: 180,
sex:'男'
};
test(xiaoming);
more(xiaoming);
虽然感觉代码量还更多了，但是当使用多个方法调用相同参数和类型注解相同的时候就非常方便了。
注：实现不作强制要求，可选值，typeScript也为我们准备好了相应的方法，就是在:号前加一个?。
2、任意值
接着上面的功能，如果想在xiaoming这个对象中添加任意的参数，如何操作，当然typeScript也为我们准备好了相应的方法。[propname: string]: any;如下：
interface student {
name: string;
age: number;
height: number;
sex?:string; // ?:表示不作强制要求，就是可选值,可有可无
[propname: string]: any; //属性的名字是字符串类型，属性的值可以是任何类型
}
//可以添加任意多个参数
const xiaoming = {
name: "小明",
age: 18,
height: 180,
sex:'男',
year:'2001/1/1',
address:'成都'
};
3、存方法
接口里不仅可以存属性，还可以存方法，比如这时候有个say()方法，返回值是string类型。
interface student {
name: string;
age: number;
height: number;
sex?:string; // ?:表示不作强制要求，就是可选值,可有可无
[propname: string]: any; //属性的名字是字符串类型，属性的值可以是任何类型
say(): string;//方法
}
const xiaoming = {
name: "小明",
age: 18,
height: 180,
sex:'男',
year:'2001/1/1',
address:'成都',
say() {
console.log('Hello呀！！');
return 'Hello呀！！'
},
};
4、约束类
Interface通过implements同样可以对类进行约束。
interface student {
name: string;
age: number;
height: number;
sex?:string; // ?:表示不作强制要求，就是可选值,可有可无
[propname: string]: any; //属性的名字是字符串类型，属性的值可以是任何类型
say(): string;//方法
}
class xiaohong implements student {
name: "小红";
age: 18;
height: 170;
sex:'女';
year:'2001/2/1';
address:'成都';
say() {
console.log('Hello呀！！');
return 'Hello呀！！'
};
}
5、继承
Interface接口也可以用于继承的，比如你新写一个eacher接口，继承于student接口。如下:
// 继承
interface teacher extends student {
teach: string;//除了继承于student外，另外还增加teach
}
const teach = (teachs:teacher) => {
const {name,age,height,sex,year,address,say,teach} = teachs
console.log(name + "年龄是：" + age);
console.log(name + "身高是：" + height);
sex && console.log(name + "性别是：" + sex);//当参数有sex时才打印
year && console.log(name + "生日是：" + year);
teach && console.log(name + "教" + teach);
address && console.log(name + "来自" + address);
say()
};
const teachs = {
name: "张老师",
age: 28,
height: 180,
sex:'男',
year:'1991/1/1',
address:'北京',
teach:'语文',
say() {
console.log('Hello呀同学们！！');
return 'Hello呀同学们！！'
},
};
teach(teachs)
学习日期：2021/12/29
视频参考：www.bilibili.com/video/BV1qV…
仅供个人学习和记录
