TypeScript进阶（类）

2019-03-31 本文已影响0人 nomooo

类

传统方法中，JavaScript 通过构造函数实现类的概念，通过原型链实现继承。而在 ES6 中，我们终于迎来了 class。

TypeScript 除了实现了所有 ES6 中的类的功能以外，还添加了一些新的用法。

ES6中类的用法

属性和方法
使用class定义类，使用constructor定义构造函数
通过new生成新实例的时候，会自动调用构造函数

class Animal {
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        return `My name is ${this.name}`
    }
}
let cat = new Animal('tom');
console.log(cat.sayHi()); //My name is tom

类的继承
使用extends关键字实现继承，

    class Animal {
        constructor(name) {
            this.name = name;
        }
        sayHi() {
            return `My name is ${this.name}`
        }
    }
    let cat = new Animal('tom');
    console.log(cat.sayHi()); //My name is tom
    class Cat extends Animal {
        constructor(name) {
            super(name); //调用父类的constructor(name);
            console.log(this.name);
        }
        sayHi() {
            return 'Meow,' + super.sayHi(); //调用父类的sayHi()
        }
    }
    let c = new Cat('Tom'); //Tom
    console.log(c.sayHi());//Meow,My name is Tom

存取器
使用getter和setter可以改变属性的赋值和读取行为：

    class Animal {
        constructor(name) {
            this.name = name;
        }
        get name() {
            return 'Jack';
        }
        set name(value) {
            console.log('setter:' + value)
        }
    }

    let a = new Animal('Tom');//setter:Tom
    a.name = 'tom';//setter:tom
    console.log(a.name);//Jack

静态方法
使用static修饰符定义的方法称为静态方法，不需实例化，直接通过类调用：

    class Animal {
        static isAnimal(a) {
            return a instanceof Animal;
        }
    }
    let a = new Animal('Tom');
    Animal.isAnimal(a) //true
    // a.isAnimal(a);//Uncaught TypeError: a.isAnimal is not a function

TypeScript中类的用法
TypeScript可以使用三种访问修饰符：public、private、protected

public修饰的属性或者方法是公用的，可以在任何地方访问到，默认所有属性和方法都是public
private修饰的属性或方法时私有的，不能在声明它的类外部访问
protected修饰的属性或方法是受保护的，它和private类似，区别是它在子类中也是允许被访问的

当属性被设置为public时，直接访问实例属性是允许的

class Animal {
    public name;
    public constructor(name) {
        this.name = name;
    }
}

let a = new Animal('Tom');
console.log(a.name);//Tom
a.name = 'NewTom';
console.log(a.name);//NewTom

当属性被设置为private时，属性是无法直接存取的：

class Animal {
    private name;
    public constructor(name) {
        this.name = name;
    }
}
let a = new Animal('Tom');
console.log(a.name);//Tom(Property 'name' is private and only accessible within class 'Animal'.)
a.name = 'NewTom';//Property 'name' is private and only accessible within class 'Animal'.

需要注意的是，TypeScript编译之后的代码中并没有限制private属性在外部的可访问性，上例代码编译后为：

var Animal = /** @class */ (function () {
    function Animal(name) {
        this.name = name;
    }
    return Animal;
}());
var a = new Animal('Tom');
console.log(a.name);
a.name = 'NewTom';

使用private修饰的属性和方法，在子类中也不允许访问：

class Animal {
    private name;
    public constructor(name) {
        this.name = name;
    }
}

class Cat extends Animal{
    constructor(name) {
        super(name);
        console.log(this.name);//Property 'name' is private and only accessible within class 'Animal'.
    }
}

但是如果使用protected修饰，则允许在子类中访问：

class Animal {
    protected name;
    public constructor(name) {
        this.name = name;
    }
}

class Cat extends Animal{
    constructor(name) {
        super(name);
        console.log(this.name);
    }
}

抽象类
abstract用于定义抽象类和其中的抽象方法。
注意：抽象类不允许被实例化，其次，抽象类中的抽象方法必须被子类发现：

abstract class Animal{
    public name;
    public constructor(name) {
        this.name = name;
    }
    public abstract sayHi();
}

class Cat extends Animal{
    public sayHi() {
        console.log(`My name is ${this.name}`)
    }
}
let cat = new Cat('Tom');
cat.sayHi();// My name is Tom

类的类型
给类加上TypeScript的类型很简单，与接口类似：

class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    sayHi(): string{
        return `My name is ${this.name}`
    }
}
let a: Animal = new Animal('Tom');
console.log(a.sayHi());//VM95:11 My name is Tom

TypeScript进阶（类）

类

猜你喜欢

热点阅读