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;

})();