TypeScript-封装Person类

使用TypeScript语法类封装一个Person类。这个案例可以学到访问修饰符和静态变量的用法。

TypeScript语法:

/**
 * 访问修饰符:
 * public :所有类都可以访问的元素
 * protect:继承的类可以访问以及和private一样的权限
 * private:只能在自己类的内部进行访问的元素
 */
class Person{
    //定义两个私有变量,能在自己类的内部进行访问(如果没有写访问修饰符默认是public)
    private _name:string;
    private _age:number;

    //给类一个id( 这个是静态变量 )
    static serialization_id='22341212344354';

    //定义一个构造器
    constructor(_name:string,_age:number){
        this._name=_name;
        this._age=_age
    }

    /**
     * 定义一个 get 方法
     * @returns {string}
     */
    get fullName():string{
        // 这里可以扩展 ...
        return this._name;
    }

    /**
     * 定义一个 set方法
     * @param string
     */
    set fullName(name:string){
        // 这里可以扩展 ...
        this._name=name;
    }

}

let person:Person=new Person('jack',12);
//调用get方法
console.log(person.fullName);
//调用set方法
person.fullName='rose';
console.log(person.fullName);

//查看类的id
console.log(Person.serialization_id);

在定义成员变量的时候,还可以直接在构造器中的参数里面定义。
上面的Person类还可以这样简写:

class Person{
    //给类一个id( 这个是静态变量 )
    static serialization_id='22341212344354';
    /**
     * 定义一个构造器,接收两个参数
     * @param _name  声明了一个私有的全局变量
     * @param _age   声明了一个私有的全局变量
     */
    constructor(private _name:string,private _age:number){

    }
    /**
     * get 方法
     * @returns {number}
     */
    get fullName():string{
        // 这里可以扩展 ...
        return this._name;
    }
    /**
     * set方法
     * @param age
     */
    set fullName(name:string){
        // 这里可以扩展 ...
        this._name=name;
    }
}

let person:Person=new Person('jack',12);
//调用get方法
console.log(person.fullName);
//调用set方法
person.fullName='rose';
console.log(person.fullName);

//查看类的id
console.log(Person.serialization_id);

编译成ES5语法:

/**
 * 访问修饰符:
 * public :所有类都可以访问的元素
 * protect:继承的类可以访问以及和private一样的权限
 * private:只能在自己类的内部进行访问的元素
 */
var Person = (function () {
    //定义一个构造器
    function Person(_name, _age) {
        this._name = _name;
        this._age = _age;
    }
    Object.defineProperty(Person.prototype, "fullName", {
        /**
         * get 方法
         * @returns {number}
         */
        get: function () {
            // 这里可以扩展 ...
            return this._name;
        },
        /**
         * set方法
         * @param age
         */
        set: function (name) {
            // 这里可以扩展 ...
            this._name = name;
        },
        enumerable: true,
        configurable: true
    });
    //给类一个id( 这个是静态变量 )
    Person.serialization_id = '22341212344354';
    return Person;
}());


var person = new Person('jack', 12);
//调用get方法
console.log(person.fullName);
//调用set方法
person.fullName = 'rose';
console.log(person.fullName);
//查看类的id
console.log(Person.serialization_id);

你可能感兴趣的:(TypeScript)