typescript(三) - 类

[YIngChenIt]

typescript(三) - 类

如何定义类

我们先来看下最简单的定义类的方法吧

class Person {
    name:string
    getName():void{
        console.log(this.name)
    }
}
let p1 = new Person()
p1.name = 'chenying'
p1.getName()

存取器

我们知道类中有getter 和 setter

class People {
    myLike:string
    constructor(myLike:string) {
        this.myLike = myLike
    }
    get like() {
        return this.myLike
    }
    set like(newLike) {
        this.myLike = newLike
    }
}

let p2 = new People('react')
console.log(p2.like) // react
p2.like = 'vue'
console.log(p2.like) // vue

我们看一下这段代码会给编译之后什么样子的

var People = /** @class */ (function () {
    function People(myLike) {
        this.myLike = myLike;
    }
    Object.defineProperty(People.prototype, "like", {
        get: function () {
            return this.myLike;
        },
        set: function (newLike) {
            this.myLike = newLike;
        },
        enumerable: true,
        configurable: true
    });
    return People;
}());

实际上是通过Object.defineProperty来监听People原型上的like属性, 这里要注意是People原型上的like属性

参数属性

其实上面存取器的例子我们可以使用另外一种写法

class People1 {
    constructor(public myLike:string) {}
    get like() {
        return this.myLike
    }
    set like(newLike) {
        this.myLike = newLike 
    }
}

let p3 = new People1('react')
console.log(p3.like)
p3.like = 'vue'
console.log(p3.like)

编译之后得到的结果也是一样的

readonly

readonly修饰的变量只能在构造函数中初始化, 表示只读不可以修改

class People2{
    public readonly mylike: string
    constructor(mylike:string){
        this.mylike = mylike
    }
}
let p4 = new People2('react')
// p4.mylike = 'vue' // Cannot assign to 'mylike' because it is a read-only property

如果给 mylike赋值的话会报错

修饰符

类里面的修饰符有三种, 分别是public、protected、private

// public
class People {
    public name:string
    constructor(name:string) {
        this.name = name
    }
    getName() {
        return this.getName
    }
}

class ChenYing extends People {
    constructor(name:string){
        super(name)
    }
    getFatherName() {
        console.log(this.name) // 属性“name”为私有属性，只能在类“People”中访问
    }
}
let p1 = new People('chenying')
console.log(p1.name)
let p2 = new ChenYing('son')
console.log(p2.name)

public申明的变量在类里面、子类或者其他地方都可以使用

class People {
    protected name:string
    constructor(name:string) {
        this.name = name
    }
    getName() {
        return this.getName
    }
}

class ChenYing extends People {
    constructor(name:string){
        super(name)
    }
    getFatherName() {
        console.log(this.name)
    }
}
let p1 = new People('chenying')
console.log(p1.name) // 属性“name”受保护，只能在类“People”及其子类中访问
let p2 = new ChenYing('son')
console.log(p2.name) // 属性“name”受保护，只能在类“People”及其子类中访问

protected类里面 子类 都可以访问,其它任何地方不能访问, 我们可以发现在其他地方使用会报错

class People {
    private name:string
    constructor(name:string) {
        this.name = name
    }
    getName() {
        return this.getName
    }
}

class ChenYing extends People {
    constructor(name:string){
        super(name)
    }
    getFatherName() {
        console.log(this.name) // 属性“name”为私有属性，只能在类“People”中访问
    }
}
let p1 = new People('chenying')
console.log(p1.name) // 属性“name”为私有属性，只能在类“People”中访问
let p2 = new ChenYing('son')
console.log(p2.name) // 属性“name”为私有属性，只能在类“People”中访问

protected类里面可以访问, 子类和其它任何地方都不可以访问, 会报错

静态属性 静态方法

class People {
    // 这是类的静态属性，需要通过这个类去调用
    static myName:string = 'chenying'
    // 这是类的静态方法，需要通过这个类去调用
    static sayHello():void {
        console.log('hello ts')
    }
}
let p3 = new People()
console.log(p3.myName) // Property 'myName' is a static member of type 'People'
console.log(p3.sayHello()) // Property 'sayHello' is a static member of type 'People'ts
console.log(People.myName)
console.log(People.sayHello())

抽象类

抽象描述一种抽象的概念，无法被实例化，只能被继承,而且抽象方法不能在抽象类中实现，只能在抽象类的具体子类中实现，而且必须实现

abstract class People {
    name: string
    abstract speak():void
}
class Man extends People { 
    //speak() { // 如果子类中没有按照规则申明抽象类中定义的抽象方法speak, 会报错 - 非抽象类“Man”不会实现继承自“People”类的抽象成员“speak”
    //   console.log('hello ts')
    //}
}
let p1 = new People() // 报错 无法创建抽象类的实例。

抽象类一般用于定义一些公用的工具类