从ECMAScript 6开始,JS就支持类了.但是如果使用TypeScript也能使用类,并且生成的JS任然可以使用.

来一个例子:

/** * Created by CV-PC153 on 2017/8/9. *///创建一个类class Greeter{    private greeting : string;    constructor(message : string){        this.greeting = message;    }    public greet():string{        return `Hello, ${this.greeting}`;    }}//实例化Greeter类let my_greeter : Greeter = new Greeter("World");document.body.innerHTML = my_greeter.greet();

用此生成的JS:

/** * Created by CV-PC153 on 2017/8/9. *///锟斤拷锟斤拷一锟斤拷锟斤拷var Greeter = (function () {    function Greeter(message) {        this.greeting = message;    }    Greeter.prototype.greet = function () {        return "Hello, " + this.greeting;    };    return Greeter;}());//实锟斤拷锟斤拷Greeter锟斤拷var my_greeter = new Greeter("World");document.body.innerHTML = my_greeter.greet();

运行得到的结果:

继承:::

/** * Created by CV-PC153 on 2017/8/9. */class Monster{    protected name : string;    constructor( name : string ){        this.name = name;    }    public attack() : string{        return `${this.name} attack`;    }}//哥斯拉class Godzilla extends Monster{    constructor(){        super("gesila");    }    public attack():string{        console.log(`${this.name} launched an attack use fire`);        return super.attack();    }}//美杜莎class Medusa extends Monster{    constructor(){        super("meidusha");    }    public attack():string{        console.log(`${this.name} launched an attack use eyes`);        return super.attack();    }}let gsl : Monster = new Godzilla();document.body.innerHTML = gsl.attack();

值得注意的是,重写基类方法,没有override关键字.

生成的JS比较复杂,如下:

var __extends = (this && this.__extends) || (function () {    var extendStatics = Object.setPrototypeOf ||        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };    return function (d, b) {        extendStatics(d, b);        function __() { this.constructor = d; }        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());    };})();/** * Created by CV-PC153 on 2017/8/9. */var Monster = (function () {    function Monster(name) {        this.name = name;    }    Monster.prototype.attack = function () {        return this.name + " attack";    };    return Monster;}());//锟斤拷斯锟斤拷var Godzilla = (function (_super) {    __extends(Godzilla, _super);    function Godzilla() {        return _super.call(this, "gesila") || this;    }    Godzilla.prototype.attack = function () {        console.log(this.name + " launched an attack use fire");        return _super.prototype.attack.call(this);    };    return Godzilla;}(Monster));//锟斤拷锟斤拷莎var Medusa = (function (_super) {    __extends(Medusa, _super);    function Medusa() {        return _super.call(this, "meidusha") || this;    }    Medusa.prototype.attack = function () {        console.log(this.name + " launched an attack use eyes");        return _super.prototype.attack.call(this);    };    return Medusa;}(Monster));var gsl = new Godzilla();document.body.innerHTML = gsl.attack();

结果如下:

关于 , 参数属性 (可以与定义参数融为一体)

代码如下:

constructor( protected name : string) {}

存储器: getter / setter

get _name():string{    return this.name;}set _name( value : string ){    this.name = value;}

和AS3很像

但是编译的时候一定要注意

不然就会如下编译错误:

抽象类:

/** * Created by CV-PC153 on 2017/8/9. */abstract class Monster{    constructor( protected name : string) {}    public abstract attack() : string;    get _name():string{        return this.name;    }    set _name( value : string ){        this.name = value;    }}//哥斯拉class Godzilla extends Monster{    constructor(){        super("gesila");    }    public attack():string{        return `${this.name} launched an attack use fire`;    }}//美杜莎class Medusa extends Monster{    constructor(){        super("meidusha");    }    public attack():string{        return `${this.name} launched an attack use eyes`;    }}let gsl : Monster = new Godzilla();document.body.innerHTML = gsl.attack();

得到结果: