Typescript 学习 - 类

class

class 并不是一种新的数据结构，只是在函数原型基础上的语法糖

class People {
    hand: number;
    constructor(hand: number) {
        this.hand = hand;
    }
    getHandNum(): void {
        console.log(this.hand)
    }
}

转为 js

var People = /** @class */ (function () {
    function People(hand) {
        this.hand = hand;
    }
    People.prototype.getHandNum = function () {
        console.log(this.hand);
    };
    return People;
}());

extends 派生类

派生类包含了一个构造函数，它 必须调用 super()，它会执行基类的构造函数。 而且，在构造函数里访问 this 的属性之前，我们 一定要调用 super()。 这个是TypeScript强制执行的一条重要规则。

public、private、protected 区别

• public 是默认值，公有的
• private 是私有的，继承或者实例化都不能访问
• protected 是保护类型的，继承可以访问，实例化不行

class Animal {
    private hand: string;
    constructor(hand) {
        this.hand = hand;
    }
}

let dog = new Animal('abc');
// 会报错 Property 'hand' is private and only accessible within class 'Animal'.
dog.hand;

存取器

自定义原型上方法的 get 和 set ，如果只定义 get 的话，会被 ts 推断为 readonly

let passcode = "secret passcode";

class Employee {
    private _fullName: string;

    get fullName(): string {
        return this._fullName;
    }

    set fullName(newName: string) {
        if (passcode && passcode == "secret passcode") {
            this._fullName = newName;
        }
        else {
            console.log("Error: Unauthorized update of employee!");
        }
    }
}

let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    alert(employee.fullName);
}

转为js

var passcode = "secret passcode";
var Employee = /** @class */ (function () {
    function Employee() {
    }
    // 重写函数原型上的 get 和 set

    Object.defineProperty(Employee.prototype, "fullName", {
        get: function () {
            return this._fullName;
        },
        set: function (newName) {
            if (passcode && passcode == "secret passcode") {
                this._fullName = newName;
            }
            else {
                console.log("Error: Unauthorized update of employee!");
            }
        },
        enumerable: true,  // 属性是否可枚举
        configurable: true  // 属性是否可配置
    });
    return Employee;
}());
var employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    alert(employee.fullName);
}

属性描述符 MDN

静态属性 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) { }
}

转为 js

var Grid = function(){
    this.origin = {x: 0, y: 0};
}
Grid.prototype.calculateDistanceFromOrigin = () => {
    let xDist = (point.x - Grid.origin.x);
    let yDist = (point.y - Grid.origin.y);
    return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
}
Grid.origin = {x: 0, y: 0};

抽象类 abstract

abstract class ParentClass {
    // 抽象类中定义的抽象方法，必须在子类中实现
    abstract ParentFun(): void;
}

实例的类型

class Greeter {
    greeting: string;
    constructor(greeting: string) {
        this.greeting = greeting
    }
    onGreet() {
        console.log(this.greeting);
    }
}
// 实例的类型是 Greeter 类
let greet: Greeter;
greet = new Greeter('hello');
greet.onGreet();

把类当作接口使用

class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = { x: 1, y: 2, z: 3 };

类可以创造出类型，所以可以在接口中使用类

什么情况用类或接口表示类型？？？

类ts转换代码是会转为function...

接口只是在编译的时候做的类型约定，不会转成任何代码

interface Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = { x: 1, y: 2, z: 3 };

转为 js

var point3d = { x: 1, y: 2, z: 3 };

参考文档

https://www.tslang.cn/docs/handbook/classes.html

https://www.tslang.cn/play/index.html