TypeScriptでのインターフェイスの使用

インターフェースの使用

1.インターフェースの基本的なアプリケーション

インターフェースの簡単なアプリケーションとして、直接例を見てみましょう。たとえば、学生を例として取り上げましょう。

// 创建接口
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.インターフェースのメソッド

上記の例に基づいて、Studentインターフェイスにメソッドwork（）を格納する場合は、インターフェイスでメソッドを直接宣言し、その戻り値の型を制約できます。

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

インターフェイスでメソッドを宣言した後、後で使用できるように実際のオブジェクトでメソッドを完成させます。

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.インターフェース内のインターフェースへのクラスの実現

クラスを実装するときは、すべてのクラスを記述することを忘れないでください。そうしないと、エラーが報告されます。

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

4.インターフェース間の継承

Studentインターフェースをベースとして使用できます。モニターインターフェースなど、Studentインターフェースに基づく新しいメソッドが必要な場合は、モニターにジョブshouzuoyeを収集するための特別なメソッドがあり、次のように実装できます。この：

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

具体例：

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)