• 周三. 6月 29th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

TypeScript学习: 五、TypeScript的类

admin

11月 28, 2021

Class 关键字

  TypeScript定义类需要用到class关键字

class Person{
    name:string;  // 定义属性, 前面省略了public 关键字(默认为public)
    age:number;

    // 构造函数, 实例化类时触发的方法
    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }
    // 定义方法
    run():void {
        console.log(this.name);
    }
}
// 实例化
let p:Person = new Person("张三", 20);

p.run(); // 输出: 张三

 定义 get和set方法,获取属性值,和修改属性值

class Person{
    name:string;  // 定义属性, 前面省略了public 关键字(默认为public)
    age:number;

    // 构造函数, 实例化类时触发的方法
    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }
    // 定义方法
    run():void {
        console.log(this.name);
    }

    // 类属性的get,set方法
    getName():string{
        return this.name;
    }
    setName(name:string):void{
        this.name = name;
    }

    getAge():number{
        return this.age;
    }
    setAge(age:number):void{
        this.age = age;
    }


}
// 实例化
let p:Person = new Person("张三", 20);

p.run(); // 输出: 张三

// 通过get和set 获取属性值和修改类的属性值
console.log(p.getName()); // 输出张三
// 修改name
p.setName("李四");
console.log(p.getName()); // 输出 李四

TS中类实现继承

  使用关键字 extends 、super 实现继承

  如果单独使用extends,会出现实例化的错误

class Person{
    name:string;  // 定义属性, 前面省略了public 关键字(默认为public)
    age:number;

    // 构造函数, 实例化类时触发的方法
    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }
    // 定义方法
    run():void {
        console.log(this.name + "在运动");
    }

    // 类属性的get,set方法
    getName():string{
        return this.name;
    }
    setName(name:string):void{
        this.name = name;
    }

    getAge():number{
        return this.age;
    }
    setAge(age:number):void{
        this.age = age;
    }
}

var p:Person = new Person("王五", 20);
p.run(); // 输出 王五在运动

// 定义Web类继承Person
class Web extends Person {

}
var w:Web = new Web();

所以还要使用super方法实现继承

class Person{
    name:string;  // 定义属性, 前面省略了public 关键字(默认为public)
    age:number;

    // 构造函数, 实例化类时触发的方法
    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }
    // 定义方法
    run():void {
        console.log(this.name + "在运动");
    }

    // 类属性的get,set方法
    getName():string{
        return this.name;
    }
    setName(name:string):void{
        this.name = name;
    }

    getAge():number{
        return this.age;
    }
    setAge(age:number):void{
        this.age = age;
    }
}

var p:Person = new Person("王五", 20);
p.run(); // 输出 王五在运动

// 定义Web类继承Person
class Web extends Person {
    constructor(name:string,age:number) {
        super(name, age);
    }
}
var w:Web = new Web("张三", 30);
w.run(); // 调用父类的方法, 输出: 张三在运动

super 表示调用了父类的构造函数,初始化父类的构造函数

TS中继承的探讨

子类不仅可以继承父类的方法和属性,还可以扩展自己的属性和方法

// typeScript 类
class Person{
    name:string;  // 定义属性, 前面省略了public 关键字(默认为public)
    age:number;

    // 构造函数, 实例化类时触发的方法
    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }
    // 定义方法
    run():void {
        console.log(this.name + "在运动");
    }

    // 类属性的get,set方法
    getName():string{
        return this.name;
    }
    setName(name:string):void{
        this.name = name;
    }

    getAge():number{
        return this.age;
    }
    setAge(age:number):void{
        this.age = age;
    }
}

// 定义Web类继承Person
class Web extends Person {
    constructor(name:string,age:number) {
        super(name, age);
    }
    // 扩展自己的方法
    work():void{
        console.log(this.name+"在工作");
    }
}
var w:Web = new Web("张三", 30);
w.run(); // 调用父类的方法, 输出: 张三在运动
w.work(); // 使用父类的属性,输出: 张三在工作

子类扩展了和父类一样的方法,会覆盖掉父类的方法,使用自己扩展的

class Person{
    name:string;  // 定义属性, 前面省略了public 关键字(默认为public)
    age:number;

    // 构造函数, 实例化类时触发的方法
    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }
    // 定义方法
    run():void {
        console.log(this.name + "在运动");
    }

    // 类属性的get,set方法
    getName():string{
        return this.name;
    }
    setName(name:string):void{
        this.name = name;
    }

    getAge():number{
        return this.age;
    }
    setAge(age:number):void{
        this.age = age;
    }
}

// 定义Web类继承Person
class Web extends Person {
    constructor(name:string,age:number) {
        super(name, age);
    }
    // 扩展自己的方法
    work():void{
        console.log(this.name+"在工作");
    }
    // 扩展和父类一样的方法
    run():void {
        console.log(this.age+"岁的"+this.name + "在运动");
    }
}
var w:Web = new Web("张三", 30);
w.run(); // 调用父类的方法, 输出: 30岁的张三在运动
w.work(); // 使用父类的属性,输出: 张三在工作

但是扩展的方法名和父类的一样,传参不一样的时候,就会出现错误

 类里面的修饰符

// typeScript定义属性的时候给我们提供了三种修饰符
// public  公共的,在类里面还有字类,类外部,都可以访问
// private 私有的 只有自己可以访问,子类,类外部都不可以访问
// protected 保护类型 类里面,子类里面可以访问,类外部无法访问

类属性如果不加属性默认是public 公有的

class Person{
    public name:string;
    public age:number;

    // 构造函数, 实例化类时触发的方法
    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }
    // 定义方法
    run():void {
        console.log(this.name + "在运动");
    }

    // 类属性的get,set方法
    getName():string{
        return this.name;
    }
    setName(name:string):void{
        this.name = name;
    }

    getAge():number{
        return this.age;
    }
    setAge(age:number):void{
        this.age = age;
    }
}

// 定义Web类继承Person
class Web extends Person {
    constructor(name:string,age:number) {
        super(name, age);
    }
    // 扩展自己的方法
    work():void{
        console.log(this.name+"在工作");
    }
}
var w:Web = new Web("张三", 30);
w.work(); // 代码正常,输出: 张三在工作
// 类外部访问属性
var p = new Person("王五", 10);
console.log(p.name); // 类外部访问, 输出 王五
protected 保护类型
class Person{
    protected name:string; 
    protected age:number;

    // 构造函数, 实例化类时触发的方法
    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }
    // 定义方法
    run():void {
        console.log(this.name + "在运动");
    }

    // 类属性的get,set方法
    getName():string{
        return this.name;
    }
    setName(name:string):void{
        this.name = name;
    }

    getAge():number{
        return this.age;
    }
    setAge(age:number):void{
        this.age = age;
    }
}

// 定义Web类继承Person
class Web extends Person {
    constructor(name:string,age:number) {
        super(name, age);
    }
    // 扩展自己的方法
    work():void{
        console.log(this.name+"在工作");
    }
}

var w:Web = new Web("张三", 30);
w.work(); // 子类可以访问,输出: 张三在工作
// 类外部访问属性
var p = new Person("王五", 10);
console.log(p.name); // 属性“name”受保护,只能在类“Person”及其子类中访问

 private 私有类型

class Person{
    private name:string; 
    private age:number;

    // 构造函数, 实例化类时触发的方法
    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }
    // 定义方法
    run():void {
        console.log(this.name + "在运动");
    }

    // 类属性的get,set方法
    getName():string{
        return this.name;
    }
    setName(name:string):void{
        this.name = name;
    }

    getAge():number{
        return this.age;
    }
    setAge(age:number):void{
        this.age = age;
    }
}

// 定义Web类继承Person
class Web extends Person {
    constructor(name:string,age:number) {
        super(name, age);
    }
    // 扩展自己的方法
    work():void{
        console.log(this.name+"在工作"); // 属性“name”为私有属性,只能在类“Person”中访问。
    }
}

var w:Web = new Web("张三", 30);
w.work(); // 子类可以访问,输出: 张三在工作
// 类外部访问属性
var p = new Person("王五", 10);
console.log(p.name); // 属性“name”为私有属性,只能在类“Person”中访问。

 只有在自己类中才能使用

发表评论

您的电子邮箱地址不会被公开。