typescript 实现内部类 typescript的类

转载

索姆拉 2024-05-29 22:43:06

文章标签 typescript 实现内部类 TypeScript set方法 github Java 文章分类 TypeScript 前端开发

简介:

TypeScript是面向对象的，TypeScript中类的写法其实和我们写Java,C#等等面向对象语言的语法基本一致。它是JavaScript的一个超集，本质上向JavaScript添加了可选的静态类型和面向对象编程。

本文内容介绍:

1.了解TypeScript中的类的概念以及使用。

2.了解TypeScript中继承的使用以及文件的引用。

3.为了方便我们可以更加直观的区分TypeScript中在类中的成员属性，方法每个写法的不同，所以我在每个类中都使用了不同的写法，以便区分每种写法的不同点，优缺点。也是为了让我们可以清楚的知道那种写法更适合当前项目，更适合自己。

4.了解TypeScript中类的方法重载以及使用父类的属性和方法。

5.本文所用到的类: people (人) -> student (学生) -> school (学校)

一、人 People Classes

人可以有姓名，年龄，性别，爱好等多个共同点，在编程中我们可以称为属性。

class People {
    
    // 姓名, 默认小明
    private name: string = '小明';
    // 年龄, 默认18
    private age: number = 18;
    // 性别, true = 男， false = 女
    private sex: boolean = true;
    // 爱好, 默认 吃，玩
    private hobby: Array<string> = ['吃', '玩'];
    
    getName(): string{
        return this.name;
    }
    
    getAge(): number {
        return this.age;
    }
    
    getSex(): boolean {
        return this.sex;
    }
    
    getHobby(): Array<string> {
        return this.hobby;
    }
    
    setSex(value: boolean) {
        this.sex = value;
    }
    
    setName(value: string){
        this.name = value;
    }
    
    setAge(value: number){
        this.age = value;
    }
    
    setHobby(value: Array<string>){
        this.hobby = value;
    }
    
    toString (): string{
        let printString = `name:${this.name} , age:${this.age} , sex:${this.sex} , hobby:${this.hobby}`;
        return printString;
    }
    
    printInfo(): void {
        console.log(
            `name:${this.name} ,
            age:${this.age} ,
            sex:${this.sex} ,
            hobby:${this.hobby}`
        );
    }
    
};

let p: People  = new People();
// name:小明 , age:18 , sex:true , hobby:吃,玩
console.log(p.toString());
p.setAge(30);
p.getHobby().push('学习');
p.setSex(false);
p.setName('大明');
// name:大明 , age:30 , sex:false , hobby:吃,玩,学习
p.printInfo();

二、学生 Student

学生是人,所以是包含人所含有的共同点，并且学生也会有自己的延伸点。所以每个学生多了一个年级，意义是这个学生是几年级的。

import People from "./People";

class Student extends People{
    
    // 年级, 默认1
    private _grade: number = 1;
    
    get grade(): number {
        return this._grade;
    }
    
    set grade(value: number) {
        this._grade = value;
    }
    
    toString(): string {
        return super.toString() + `, grade:${this.grade}`;
    }
    
    printInfo(): void {
        super.printInfo();
        console.log(`grade:${this.grade}`);
    }
}

let student: Student = new Student();
// 打印: name:小明 , age:18 , sex:true , hobby:吃,玩, grade:1
console.log(student.toString());
student.grade = 2;
student.setName('小刚');
student.setAge(22);
// 打印: name:小刚, age:22, sex:true, hobby:吃,玩
// grade:2
student.printInfo();
export {};

三、学校 School

学校里面会有学生，学校也会有自己的学校名称。

import {Student} from "./Student";

class School {
    // 学校名称，默认希望小学
    name: string = '希望小学';
    // 学校里的学生，默认空
    studentList: Array<Student> = [];
    
    // any方法声明，没有限制方法的返回值。
    printInfo(){
        console.log(`name:${this.name}, studentList:${this.studentList.toString()}`);
    }
}


let school: School = new School();
//name:希望小学, studentList:
school.printInfo();

school.name = '上海市复旦大学附属实验小学';

let student1: Student = new Student();
student1.grade = 3;
student1.setName('LSH');
student1.setAge(8);

let student2: Student = new Student();
student2.grade = 4;
student2.setName('LX');
student2.setAge(9);

school.studentList.push(student1,student2);

//name:上海市复旦大学附属实验小学, studentList:name:LSH , age:8 , sex:true , hobby:吃,玩, grade:3,name:LX , age:9 , sex:true , hobby:吃,玩, grade:4
school.printInfo();