TypeScript 类(Classes)

1.类的创建

ts:

class Person{
    name:string;
    age:number;
    constructor(name:string,age:number){//构造方法
        this.name = name;
        this.age = age;
    }
    print(){
        return this.name +";"+this.age;
    }
}

var p = new Person("m",10);//存在构造方法,需要传递参数
alert(p.print());//m;10

编译的js:

var Person = (function () {
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.print = function () {
        return this.name + ";" + this.age;
    };
    return Person;
})();
var p = new Person("m", 10); //存在构造方法,需要传递参数
alert(p.print()); //m;10

2.类的继承

class Person{
    name:string;
    age:number;
    tell(){
        return this.name + ":" + this.age;
    }
}

class Student extends Person{
    school:string;
    tell(){
        return this.name +":"+this.age+":"+this.school;
    }
}

var s = new Student();
s.name = "mm";
s.age = 15;
s.school = "hdu";
//alert(s.tell());//mm:15:hdu


class Person2{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    tell(){
        return this.name + ":" + this.age;
    }
}

class Student2 extends Person2{//继承
    school:string;
    constructor(school:string){
        this.school = school;
        super("m",15);//调用父类的方法
    }
    tell(){
        return this.name +":"+this.age+":"+this.school;
    }
}

var s2 = new Student2("HDU");
/*
s2.name = "mm";
s2.age = 15;
s2.school = "hdu";
alert(s2.tell());//mm:15:hdu*/
alert(s2.tell());//mm:15:HDU

编译的js:

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var Person = (function () {
    function Person() {
    }
    Person.prototype.tell = function () {
        return this.name + ":" + this.age;
    };
    return Person;
})();
var Student = (function (_super) {
    __extends(Student, _super);
    function Student() {
        _super.apply(this, arguments);
    }
    Student.prototype.tell = function () {
        return this.name + ":" + this.age + ":" + this.school;
    };
    return Student;
})(Person);
var s = new Student();
s.name = "mm";
s.age = 15;
s.school = "hdu";
//alert(s.tell());//mm:15:hdu
var Person2 = (function () {
    function Person2(name, age) {
        this.name = name;
        this.age = age;
    }
    Person2.prototype.tell = function () {
        return this.name + ":" + this.age;
    };
    return Person2;
})();
var Student2 = (function (_super) {
    __extends(Student2, _super);
    function Student2(school) {
        this.school = school;
        _super.call(this, "m", 15); //调用父类的方法
    }
    Student2.prototype.tell = function () {
        return this.name + ":" + this.age + ":" + this.school;
    };
    return Student2;
})(Person2);
var s2 = new Student2("HDU");
/*
s2.name = "mm";
s2.age = 15;
s2.school = "hdu";
alert(s2.tell());//mm:15:hdu*/
alert(s2.tell()); //mm:15:HDU

3.访问修饰符

ts:

/*   访问修饰符
        public(默认)
        private 私有的
        */
class People{
//    name:string;//默认是public
    public name:string;
    age:number;

    constructor(name:string,age:number) {
        this.name = name;
        this.age = age;
    }

    print(){
        return this.name + ":" + this.age;
    }
}

class Teacher extends People{
    school:string;

    constructor(school:string){
        this.school = school;
        super("m",20);
    }

    print(){
    return this.name+":"+this.age+":" +this.school;
    }
}

var t = new Teacher("HDUTX");
/*
t.name = "mm";
t.age = 19;
t.school = "jx";
alert(t.print());//mm:19:jx*/
alert(t.print());//m:20:HDUTX

编译的js:

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
/*   访问修饰符
       public(默认)
       private 私有的
       */
var People = (function () {
    function People(name, age) {
        this.name = name;
        this.age = age;
    }
    People.prototype.print = function () {
        return this.name + ":" + this.age;
    };
    return People;
})();
var Teacher = (function (_super) {
    __extends(Teacher, _super);
    function Teacher(school) {
        this.school = school;
        _super.call(this, "m", 20);
    }
    Teacher.prototype.print = function () {
        return this.name + ":" + this.age + ":" + this.school;
    };
    return Teacher;
})(People);
var t = new Teacher("HDUTX");
/*
t.name = "mm";
t.age = 19;
t.school = "jx";
alert(t.print());//mm:19:jx*/
alert(t.print()); //m:20:HDUTX

4.封装的实现

实现封装需要先配置watcher,否则编译无法通过:

找到第一行菜单:File,

选择settings,在输入框输入watcher,如图:

双击右边的内容,修改(添加 -target ES5,之间有空格)

ts:

class Hello{
    private _name:string;
    tell(){
      //  return this.name;//m
        return this._name;//m
    }
/*get set 方法的方法名不能与定义的对象名相同 这里是name和_name*/
    get name():string{
        return this._name;
    }

    set name(newname:string){
        this._name = newname;
        if(newname.length>5||newname.length<1){
            this._name = "姓名长度错误";
        }else{
            this._name = newname;
        }
    }
}

编译的js:

var Hello = (function () {
    function Hello() {
    }
    Hello.prototype.tell = function () {
        //  return this.name;//m
        return this._name; //m
    };
    Object.defineProperty(Hello.prototype, "name", {
        /*get set 方法的方法名不能与定义的对象名相同 这里是name和_name*/
        get: function () {
            return this._name;
        },
        set: function (newname) {
            this._name = newname;
            if (newname.length > 5 || newname.length < 1) {
                this._name = "姓名长度错误";
            }
            else {
                this._name = newname;
            }
        },
        enumerable: true,
        configurable: true
    });
    return Hello;
})();
var h = new Hello();
//h.name = "m";//调用 set name
//alert(h.tell());//m
h.name = "";
alert(h.tell()); //姓名长度错误

5.Static

ts:

class Person{
    static name:string;//静态,用类名调用,不用对象调用
    tell(){
    //    alert("name:"+this.name);
        alert("name:"+Person.name);
    }
}

var p = new Person();
//p.name = "m";
Person.name = "m";
p.tell();//name:m

编译的js:

var Person = (function () {
    function Person() {
    }
    Person.prototype.tell = function () {
        //    alert("name:"+this.name);
        alert("name:" + Person.name);
    };
    return Person;
})();
var p = new Person();
//p.name = "m";
Person.name = "m";
p.tell(); //name:m

6.使用技巧

ts:

class Greater{
    greeting:string;
    constructor(message:string){
        this.greeting = message;
    }

    greet(){
        return "HELLO " +this.greeting;
    }
}

var green:Greater;//引用数据类型
green = new Greater("m");
alert(green.greet());//HELLO m

编译的js:

var Greater = (function () {
    function Greater(message) {
        this.greeting = message;
    }
    Greater.prototype.greet = function () {
        return "HELLO " + this.greeting;
    };
    return Greater;
})();
var green; //引用数据类型
green = new Greater("m");
alert(green.greet()); //HELLO m