Uso de interfaz en TypeScript

Uso de interfaz

1. La aplicación básica de la interfaz

Para la aplicación simple de la interfaz, tomemos un ejemplo directamente, por ejemplo, tomemos a un estudiante como ejemplo.

// 创建接口
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. Métodos en la interfaz

Con base en el ejemplo anterior, si queremos almacenar un método work () en la interfaz del Estudiante , entonces podemos declarar directamente el método en la interfaz y restringir su tipo de valor de retorno.

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

Después de declarar el método en la interfaz, perfeccionamos el método en el objeto real para su uso posterior.

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. La realización de la clase a la interfaz en la interfaz.

Cuando implementemos la clase, recuerde escribir toda la clase, de lo contrario se informará un error

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

4. Herencia entre interfaces

La interfaz del estudiante se puede utilizar como base. Si necesitamos un nuevo método basado en la interfaz del estudiante, como la interfaz del monitor, en el que hay un método especial en el monitor para recopilar el trabajo shouzuoye, entonces podemos implementarlo como esta:

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

Ejemplos específicos:

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)