ts-class

作者: 恒星的背影 | 来源:发表于2020-01-11 16:45 被阅读0次

    构造函数

    构造函数出现的原因:更加方便地写出生成对象的函数。

    简单例子

    class Animal {
        name: string;
        constructor(theName: string) { 
          this.name = theName; 
        }
        move(distanceInMeters: number = 0) {
            console.log(`${this.name} moved ${distanceInMeters}m.`);
        }
    }
    
    class Horse extends Animal {
        constructor(name: string) { 
          super(name); 
        }
        move(distanceInMeters = 45) {
            console.log("Galloping...");
            super.move(distanceInMeters);
        }
    }
    
    let tom: Animal = new Horse("Tommy the Palomino");
    
    tom.move(34);
    

    public, private, protected

    默认情况下属性是 public 的,private 修饰的属性只能在 class 内使用。

    class Animal {
        private name: string;
        constructor(theName: string) { this.name = theName; }
    }
    
    new Animal("Cat").name; // Error: 'name' is private;
    

    关于类型之间是否兼容的例子:

    class Animal {
        private name: string;
        constructor(theName: string) { this.name = theName; }
    }
    
    class Rhino extends Animal {
        constructor() { super("Rhino"); }
    }
    
    class Employee {
        private name: string;
        constructor(theName: string) { this.name = theName; }
    }
    
    let animal = new Animal("Goat");
    let rhino = new Rhino();
    let employee = new Employee("Bob");
    
    animal = rhino;
    animal = employee; // Error: 'Animal' and 'Employee' are not compatible
    

    protected 可以在子类中使用。

    class Person {
        protected name: string;
        constructor(name: string) { 
          this.name = name; 
        }
    }
    
    class Employee extends Person {
        private department: string;
    
        constructor(name: string, department: string) {
            super(name);
            this.department = department;
        }
    
        public getElevatorPitch() {
            return `Hello, my name is ${this.name} and I work in ${this.department}.`;
        }
    }
    
    let howard = new Employee("Howard", "Sales");
    console.log(howard.getElevatorPitch());
    console.log(howard.name); // error
    

    readonly

    只读属性只能在声明时或构造函数中初始化。

    class Octopus {
        readonly name: string;
        readonly numberOfLegs: number = 8;
        constructor (theName: string) {
            this.name = theName;
        }
    }
    
    let dad = new Octopus("Man with the 8 strong legs");
    dad.name = "Man with the 3-piece suit";   // error! name is readonly.
    

    readonly 可以和 public, protected, private 同时使用。

    Accessor

    Accessor 指用了 get 或 set 修饰的属性。
    get 和 set 用来控制对属性的读取和修改。

    const fullNameMaxLength = 10;
    
    class Employee {
        private _fullName: string;
    
        get fullName(): string {
            return this._fullName;
        }
    
        set fullName(newName: string) {
            if (newName && newName.length > fullNameMaxLength) {
                throw new Error("fullName has a max length of " + fullNameMaxLength);
            }
            
            this._fullName = newName;
        }
    }
    
    let employee = new Employee();
    employee.fullName = "Bob Smith";
    if (employee.fullName) {
        console.log(employee.fullName);
    }
    

    static 属性

    直接挂在类上的属性,不存在于实例身上。

    class Grid {
        static origin = {x: 0, y: 0};
        calculateDistanceFromOrigin(point: {x: number; y: number;}) {
            let xDist = (point.x - Grid.origin.x);
            let yDist = (point.y - Grid.origin.y);
            return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
        }
        constructor (public scale: number) { }
    }
    
    let grid1 = new Grid(1.0);  // 1x scale
    let grid2 = new Grid(5.0);  // 5x scale
    
    console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
    console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));
    

    abstract class

    to do

    高级技巧

    to do

    小结

    继承的写法和ES6一样。
    扩展了 public, private, protected, readonly 等修饰词。
    扩展了 static 属性。

    相关文章

      网友评论

          本文标题:ts-class

          本文链接:https://www.haomeiwen.com/subject/rmufactx.html