TypeScript - (六) 了解TypeScript的接口以及模拟后台的写法

一. 初步观察TypeScript中的接口

    1. 创建一个StudentManagement接口，里面包含学生对象和学生大小两个属性 

 

import Student from "../classes/Student";

// 学生管理的一个接口，接口包含一个可选的学生对象，只读必须的学生大小
interface StudentManagement {
    student?: Student;
    readonly studentSize: number;
}

    2.尝试下实例化TS的接口试试

let s: StudentManagement = {student:new Student(),studentSize:5};
// Student { name: '小明', age: 18, sex: true, hobby: [ '吃', '玩' ], _grade: 1 }
console.log(s.student);
// 5
console.log(s.studentSize);
// Error:(12, 3) TS2540: Cannot assign to 'studentSize' because it is a read-only property.
// 因为学生的大小是只读的，所以只能在初始化的时候赋值。
// s.studentSize = 6;

 

    3.看下编译后的JS文件是什么样的

var Student_1 = require("../classes/Student");
var s = { student: new Student_1.default(), studentSize: 5 };
console.log(s.student);
console.log(s.studentSize);

    4.声明一个方法，方法的参数就是刚才定义的接口。

//  一个创建学生的函数
function createStudent(studentManagement: StudentManagement): Student {
    // 如果没有传来学生的话，我们将创建一个默认的学生。
    let student = studentManagement.student;
    if(null == student){
        return new Student();
    }
    // 如果传来了一个学生的话，我们就返回这个学生
    return  studentManagement.student;
}

    5. 调用这个函数并且仔细观察传入的参数是什么样的。

let student:Student = createStudent({studentSize:1});
 // name:小明 , age:18 , sex:true , hobby:吃,玩, grade:1
console.log(student.toString());
let student2:Student = createStudent({student: new Student(),studentSize:1});
// name:小明 , age:18 , sex:true , hobby:吃,玩, grade:1
console.log(student2.toString());

let student3: StudentManagement = {student: new Student(),studentSize:1};
// Student { name: '小明', age: 18, sex: true, hobby: [ '吃', '玩' ], _grade: 1 }
console.log(student3.student);

// Error:(30, 10) TS2540: Cannot assign to 'studentSize' because it is a read-only property.  这是一个只读的属性
// student3.studentSize = 2;
// 1
console.log(student3.studentSize);

      提示:  调用的时候要确保接口指定必须的属性传入，否则会报错。

 

二. 模拟下后端的接口以及实现类模式

    1. 创建一个接口，用于学生的服务，提供一个查询所有学生的泛型方法。

import Student from "../classes/Student";

interface StudentService {
    queryAll(): Array<Student>;
}

    2.创建一个实现类并且实现这个接口，注意的是如果这个实现类没有实现接口的方法的话，会报错。

class StudentServiceImpl implements StudentService {
 
 }
 // Error:(8, 7) TS2420: Class 'StudentServiceImpl' incorrectly implements interface 'StudentService'.
 // Property 'queryAll' is missing in type 'StudentServiceImpl' but required in type 'StudentService'.

    3. 实现类实现方法

 class StudentServiceImpl implements StudentService {
    
    private static studentService: StudentService;
    
    private constructor() {};
    
     static  createService(): StudentService {
         if  (null == this.studentService) {
            this.studentService = new StudentServiceImpl();
        }
        return this.studentService;
    }
    
    queryAll() {
        let data: Array<Student> = [new Student(), new Student(), new Student()];
        return data;
    }
    
}

     4. 创建一个学校的接口，并且提供一个查询所有学生的方法

import Student from "../classes/Student";

interface SchoolService {
    queryAllStudent(): Array<Student>;
}

    5. 创建学校的实现类并且引入学生服务，通过调用学生实现类获取所有的学生。

 

import Student from "../classes/Student";

import StudentServiceImpl from "./StudentService";

class SchoolServiceImpl implements SchoolService{
    
    private studentService = StudentServiceImpl.createService();
    
    queryAllStudent(){
        let data: Array<Student> = this.studentService.queryAll();
        return data;
    }
    
}
/**
 * [ Student { name: '小明', age: 18, sex: true, hobby: [ '吃', '玩' ], _grade: 1 },
 Student { name: '小明', age: 18, sex: true, hobby: [ '吃', '玩' ], _grade: 1 },
 Student { name: '小明', age: 18, sex: true, hobby: [ '吃', '玩' ], _grade: 1 } ]
 * */
console.log(new SchoolServiceImpl().queryAllStudent());

总结:

    1.TypeScript中的接口和后端有一定的差异。

    2.TypeScript中接口的可以使用后端的写法。

附:

    系列链接: https://blog.youkuaiyun.com/qq_36255237/article/category/9168635

    GitHub的Demo地址: https://github.com/chenrui123456/TypeScript-Demo