Use of Interface in TypeScript

Use of Interface

1. The basic application of the interface

For the simple application of the interface, let's take an example directly. For example, let's take a student as an example.

// 创建接口
interface Student {
    name: string;
    age: number;
    exam?: number;  //非必须属性在“:”前加上“?”即可
    [propname: string]: any;    //此接口允许添加新的属性
}
// 接口应用实例
const getStudent = (student: Student) => {
    console.log("名字:" + student.name)
    console.log("年龄:" + student.age)
    // 做一个小判断，如果有成绩则输出成绩，没有成绩则输出提示
    student.exam ? console.log("成绩" + student.exam) : console.log("此人无成绩")
}
// 数据
const xiaobai = {name: "小白", age: 21, exam: 90}
const xiaohei = {name: "小黑", age: 18}
// 以传值的形式调用方法
getStudent(xiaobai)
getStudent(xiaohei)

2. Methods in the interface

Based on the above example, if we want to store a method work() in the Student interface , then we can directly declare the method in the interface and constrain its return value type.

interface Student {
    name: string;
    age: number;
    exam?: number;  //非必须属性在“:”前加上“?”即可
    [propname: string]: any;    //此接口允许添加新的属性
    work(): string;     //声明方法的返回值类型为string
}

After declaring the method in the interface, we then perfect the method in the actual object for later use.

const xiaobai = {
    name: "小白", age: 21, exam: 90,
    work() {
        return "学习就是我的工作"
    }
}
const getStudent = (student: Student) => {
    console.log("名字:" + student.name)
    console.log("年龄:" + student.age)
    // 做一个小判断，如果有成绩则输出成绩，没有成绩则输出提示
    student.exam ? console.log("成绩" + student.exam) : console.log("此人无成绩")
    console.log(student.work())
}

3. The realization of the class to the interface in the interface

When we implement the class, remember to write all of the class, otherwise an error will be reported

class xinsheng implements Student {
    name = "小白";
    age = 21;
    work() {
        return "学习就是我的工作"
    }
}

4. Inheritance between interfaces

The Student interface can be used as a basis. If we need a new method based on the Student interface, such as the monitor interface, in which there is a special method in the Monitor to collect the job shouzuoye, then we can implement it like this:

interface Monitor extends Student {
    shouzuoye(): string;
}

Specific examples:

interface Student {
    name: string;
    age: number;
    exam?: number;  //非必须属性在“:”前加上“?”即可
    [propname: string]: any;    //此接口允许添加新的属性
    work(): string;     //声明方法的返回值类型为string
}
// 接口的继承
interface Monitor extends Student {
    shouzuoye(): string;
}
// 接口应用实例
const monitor = (teacher: Monitor) => {
    console.log("名字:" + teacher.name)
    console.log("年龄:" + teacher.age)
    // 做一个小判断，如果有成绩则输出成绩，没有成绩则输出提示
    teacher.exam ? console.log("成绩" + teacher.exam) : console.log("此人无成绩")
    console.log(teacher.work())
    console.log(teacher.shouzuoye())
}
const xiaohei = {
    name: "小黑", age: 18,
    work() {
        return "学习就是我的工作"
    },
    shouzuoye(){
        return "大家把作业交给我"
    }
}
// 以传值的形式调用方法
monitor(xiaohei)