TypeScript——初步认识

JavaScript的痛点

众所周知，前端开发“三剑客”分别是HTML、CSS以及JS，其中JS因为其灵活简单等特色得到了你们的青睐，可是成也萧何败萧何，因为JS设计初衷是浏览器的嵌入式脚本语言，做为脚本语言自己就不像Java等工程语言同样适合大项目开发。以前用JS写过前端程序，因为JS没有命名空间且变量类型为弱类型，当代码写到几千行以上时随着JS文件及变量的增多，程序运行逻辑将会乱成一团，后续开发及维护举步维艰。这些问题是JS自己特色带来的，由于JS在设计初始并无想到后面的前端开发逻辑会这么复杂，虽然JS号称基于对象的语言，可是却很难模块化。为解决该问题，一些JS模块化框架应运而生，例如Require.js、sea.js等，但这只是权宜之计，并没从根本上解决JS自己语言特性。

解决JS语言自己的问题，看起来只有两种方法，要么JS实现一次重大升级，要么从新设计一种语言来代替JS。可是听起来很美好，实际却不可行。首先JS发展至今，语言自己相对成熟，最多会小修小补，颠覆性的升级不大可能。其次，JS已经拥有了大批的用户及获得了各大浏览器的全面支持，能够当作网页的一种规范标准了，设计一种全新的语言取代JS基本无望。因而，微软采用曲线救国，设计了一种TypeScript，定义为JavaScript的超集。意思就是JavaScript能够作的，我能够作，JavaScript不能作的，我还能够作。同时熟悉JS的迁移到TypeScript上面基本无成本，由于TypeScript全面兼容JavaScript，语法定义等基本相似。

TypeScript方案

TypeScript针对JavaScript弱类型、没有命名空间、难以模块化等缺点对症下药，规定了变量必须是强类型，同时添加any类型兼容JS的弱类型。同时带来了严格的面向对象定义，每个ts文件须要定义成一个或多个类，同时向外面暴露接口。我把TypeScript比做Java版的JavaScript，不少对象的定义及使用跟Java像极了。这样从语言上解决了JS的问题，编程过程当中我只需考虑对象之间的关系而不是JS文件、变量之间的关系，大大提升了前端生产力且提升了程序健壮性及可维护性。

目前三大主流前端框架（谷歌的Angular、Facebook的React.js以及Vue.js）都已经支持TypeScript语言，其中Angular更是如此。它自己就是用TypeScript写出且规定TypeScript为默认编程语言。Angular提供了不少功能强大的库函数，经过引入模版便可快速使用。

TypeScript为何全面兼容JavaScript及全部浏览器呢？由于它是“始于JavaScript，归于JavaScript”。TypeScript有一个编译器，全部TypeScript程序均可以编译成不一样规范标准的JavaScript程序，所以并不改变目前的JS生态。下面是一个用TS写的一个类及编译成JS的例子：

TS定义一个对象：

class BankAccount {
    balance = 0;
    deposit(credit: number) {
        this.balance += credit;
        return this.balance;
    }
}  

通过编译器转换成的JS代码：

var BankAccount = (function () {
    function BankAccount() {
        this.balance = 0;
    }
    BankAccount.prototype.deposit = function(credit) {
        this.balance += credit;
        return this.balance;
    };
    return BankAccount;
})();