文章目录
在面向对象中,接口是一种规范的定义,它定义了行为和动作的规范。
在程序设计中,接口起到了一种限制和规范的作用,就是批量对方法、属性进行约束。
接口声明后,直接使用接口名称作为变量的类型即可。
注意:多个同名的接口会自动合并。
属性接口
对对象的属性进行约束
// 属性接口
interface NickUser {
userName: string,
userAge?: number, // ?可选属性
}
function PrintUser(user: NickUser): void {
console.log(user);
}
// 使用
let obj = {
userName: '小七',
userAge: 18
}
PrintUser(obj); // {userName: '小七', userAge: 18}
案例:封装ajax
// 定义接口
interface Config{
method:string,
url:string,
data?:string,
dataType:string
}
// 封装ajax案例
function ajax(config:Config){
// 创建ajax对象
let xhr = new XMLHttpRequest();
xhr.open(config.method,config.url,true);
xhr.send();
xhr.onreadystatechange = ()=>{
if(xhr.readyState === 4 && xhr.status === 200){
if(config.dataType === 'json'){
console.log(xhr.responseText);
}
}
}
}
// 使用
ajax({
method:'get',
url:'http://jsonplaceholder.typicode.com/posts',
dataType:'json'
})
函数接口
对方法传入的参数以及返回值进行约束
// 函数接口
interface Person {
(name: string, age: number): string;
}
// 使用
let student: Person = function (name: string, age: number): string {
return name + ',' + age
}
console.log(student("小七", 18)); // 小七,18
索引接口
对数组、对象进行约束
// 索引接口 --数组
interface UserArr {
[index: number]: string
}
let arr: UserArr = ['a', 'b', 'c', 'd'];
console.log(arr); // ['a', 'b', 'c', 'd']
// 索引接口 --对象
interface UserObj {
[index: string]: string
}
let obj: UserObj = { name: '张三', age: '20' }
console.log(obj); // {name: '张三', age: '20'}
类接口
对类的约束,在使用 implements 继承的普通类中都需要实现
// 类接口
interface Animal {
name: string;
eat: (str: string, num: number) => void;
}
// 使用
class Dog implements Animal {
// 必须包含name
name: string;
constructor(name: string) {
this.name = name;
}
// 必须包含eat方法
eat(sex: string, age: number): void {
console.log(this.name + ',' + sex + ',' + age + '岁,爱吃骨头');
}
}
let xiaoqi = new Dog('小七');
xiaoqi.eat('公', 3); // 小七,公,3岁,爱吃骨头
接口继承
接口也是可以继承的
【interface 继承 interface】
下面示例中,子接口继承父接口之后,类继承自子接口,则子接口和父接口中的约束都需要遵守。
// 父接口
interface Person {
eat: () => void;
}
// 子接口继承自父接口
interface Son extends Person {
hobby(): void;
}
// 父类
class User {
name: string = "李四";
constructor(name: string) {
this.name = name;
}
sport() {
console.log(this.name + "爱运动");
}
}
// 子类继承父类和子接口
class Student extends User implements Son {
constructor(name: string) {
super(name); // 继承父类的属性
}
// 由于继承关系,这个类必须同时包含父接口和子接口的方法
eat() { // 父接口的约束
console.log(this.name + "吃薯条");
}
hobby() { // 子接口的约束
super.sport(); // 继承父类的方法
console.log(this.name + "爱学习");
}
}
let zs = new Student('张三');
zs.sport(); // 张三爱运动
zs.eat(); // 张三吃薯条
zs.hobby(); // 张三爱运动 // 张三爱学习
interface 允许多重继承,下面示例中,接口 C 作为对象 obj 的约束,同时继承自接口 A 和 B 。
interface A {
aa: string;
}
interface B {
bb: string;
}
// 同时继承A,B
interface C extends A, B {
cc: string;
}
let obj: C = {
aa: 'aa',
bb: 'bb',
cc: 'cc'
}
【interface 继承 type】
interface 可以继承 type 命令定义的对象类型
type Obj = {
name: string;
age: number;
}
// 继承tpye定义的对象
interface A extends Obj {
aa: string;
}
let obj: A = {
name: '小九',
age: 18,
aa: 'aa'
}
【interface 继承 class】
interface 还可以继承 class,即继承该类的所有成员。
class A {
name: string = 'A';
foo(): void {
console.log(this.name);
}
}
// 接口继承类
interface B extends A {
bb: string;
}
let obj: B = {
name: '',
foo(): void {
console.log(123);
},
bb: 'bb'
}