TypeScript学习: 五、TypeScript的类

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”中访问。

 

 只有在自己类中才能使用