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

巴特西

Typescript 学习 - 类

class

extends 派生类

public、private、protected 区别

存取器

静态属性 static 关键字

抽象类 abstract

实例的类型

把类当作接口使用

最新文章

热门文章