为什么使用Typescript

Posted 2021-04-25 Angular完全开发手册

typescript 是javascript 的超集，在ts中可以使用js中的所有语法，也就是说js代码是完全合法的ts代码，这也导致了好多前端同学习惯了js，而不愿意按ts的规则进行开发。但是angular从2版本开始官方推荐的编程语言就是typescript，node重构项目 deno 也采用ts作为官方开发语言，那究竟为什么要使用typescript？

排行榜

这是权威编程语言排行网站 TIOBE最近首页上的一段话：

Last month we announced that TypeScript entered the TIOBE index top 100 for the first time. TypeScript appears to keep growing in popularity. This month it entered the top 50. TypeScript is slowly becoming the new and improved JavaScript. One of the trends that was not mentioned in my last post is the rising popularity of Angular. Angular is the successor of AngularJS. The latter platform was based on JavaScript, but the new Angular is completely focusing on TypeScript. The other large JavaScript platform, React, didn't adopt TypeScript yet, but this seems to be a matter of time.

6月份首次进100，7月份到50。如它所说，react采用typescript也许只是时间问题。目前看来ts正成为一种趋势，也许未来的某一天浏览器可以直接运行ts代码也说不定。

理性看待

使用typescript 时编译器会在coding时就检查一些可能出错的地方并进行提示，这样我们可以在代码未运行时就发现一些错误，但是这并不代表使用ts 编写的代码就一定没有bug，或者一定可以按照你的预期运行，我想没有任何一种语言可以做到如此地步，否则程序员也不会每天都在处理bug了。如下：

 
   
   
 

  
    
    
  
interface Person {
  
    
    
  
    id: string;
  
    
    
  
    name: string;
  
    
    
  
}
  
    
    
  

  
    
    
  
function sayHello(person: Person) {
  
    
    
  
    console.log(person.name);
  
    
    
  
}
  
    
    
  

  
    
    
  
sayHello({} as any); // 注意这行；
 
   
   
 

虽然函数的参数上加入的类型，但在传入参数时显式的使用any，这将导致编译通过，但等到真正运行的时候结果似乎并非所愿。在ts中尽量避免使用any类型，因为它违背使用ts的初忠。

尽管如此，它还是可以帮助我们减少bug的发生，有人研究过，具说可以减少15%左右，传送门在这里有兴趣的同学可以看下。代码量上，使用ts开发的项目在代码量上可能要比js开发的大出大约30%。

还有非常重要的一点，ts的本质还是js，所以'我用的是ts所以不必学习js'这种观点极不可取，尤其对于掌握了 c#, java之类的开发者来说，如果想使用ts进行开发，js仍然是绕不过去的，即使它们很像。

开粉

ts可以帮助开始者更好的协同作战

这对于一个大型项目来说尤其重要。当项目变的越来越大时，不论是维护还是扩展，我们都不希望再重复阅读之前的代码以弄明白它们是在做什么，尤其是当有新的成员加入进来时。typescript允许开发者聚焦于api上，而不必要去弄明白每一行代码究竟在做什么。试想下，如果一个项目有多个人在协同开发，每一个开发者关心的只是其它开发者给它暴出的接口，假如接口发生了变更，在声明良好的ts文件中，无论开发人员的水平处于哪一阶段，都很容易发现需要修改的地方以及可能出现的问题。另一方面，ts还可以帮助减少一些因为注意力不集中引起的一些低级错误，比如 "can't read property 'xxx' of undefined"，相信只要是js开发者，一定遇到过这个错误信息。

活跃的社区

目前ts社区的开发者为ts的发展贡献了大量的代码，并且微软也在积极的推动ts的发展，相比coffeeScript来说这也许就是有一个好爹的优势。微软在ts上使用了开放语言服务协议，在github找到各种关于ts的工具都是开源的，同时微软了大力推动ts工具的标准化，这使得为ts开发的工具可以在多种编辑器或IDE中使用。这种推广策略使得社区的开发者积极的贡献自己的力量，开发出很多非常好用的工具，如tsLint等。同时对于流行的js库，几乎都有开发者为它们完成了ts的类型声明工作。说起开发工具，vscode也是微软开源的编辑器，它支持所有的ts语言特性，可以帮助开发者更愉快的书写和重构ts代码，相信用的人都有感受。

TypeScript 使得抽象清晰可见

一个好的设计就是定义良好的接口。而且，用支持它们的语言来表达接口的想法要容易得多。

例如，假设有一个图书销售应用程序，可以通过一个注册用户通过UI或通过某种API通过外部系统进行购买。

正如您所看到的，这两个类都扮演着购买者的角色。尽管对于应用程序非常重要，但购买者的概念在代码中并没有明确表达出来。没有名为购买者.js的文件。因此，修改代码的人可能会忽略这个角色的存在。

 
   
   
 

  
    
    
  
function processPurchase() { }
  
    
    
  

  
    
    
  
class User { }
  
    
    
  

  
    
    
  
class ExternalSystem { }
 
   
   
 

仅仅通过查看代码来判断哪些对象可以扮演购买者的角色，以及该角色的方法是困难的。 我们不确定，也不会从我们的工具中得到很多帮助。我们必须手动推断这些信息，这是缓慢且容易出错的。

现在，将它与我们明确定义了 Purchaser 接口 的版本进行比较。

 
   
   
 

  
    
    
  
interface Purchase { }
  
    
    
  

  
    
    
  
class User implements Purchase { }
  
    
    
  

  
    
    
  
class ExternalSystem implements Purchase { }
 
   
   
 

类型化的版本清楚地说明了我们有 Purchaser 接口，而User和ExternalSystem类实现了它。所以TypeScript接口允许我们定义抽象/协议/角色。

重要的是要认识到TypeScript并没有强迫我们引入额外的抽象。Purchaser 抽象在代码的JavaScript版本中，但是没有明确定义。 在静态类型语言中，子系统之间的边界是使用接口定义的。由于JavaScript缺乏接口，所以在普通JavaScript中边界不能很好地表达。由于不能清楚地看到边界，开发人员开始依赖于具体类型而不是抽象接口，从而导致紧密耦合。

TypeScript 使代码更容易阅读和理解

 
   
   
 

  
    
    
  
jQuery.ajax(url, settings);
 
   
   
 

上面的代码中，我们唯一可以肯定的是ajax函数有两个参数。其它信息只能靠猜，也许第一个是字符串，第二个是配置对象。我们不知道什么选项进入设置对象(它们的名称和类型)，或者该函数返回什么。我们可以检查文档，但这并不是最好的开发经验——它需要额外的时间，而且文档经常过期。

因此，尽管很容易阅读jQuery.ajax(url,settings)，真正理解如何调用这个函数，我们需要阅读它的实现或它的文档。以下是类型版本：

 
   
   
 

  
    
    
  
ajax(url: string, settings?: JQueryAjaxSettings): JQueryXHR;
  
    
    
  

  
    
    
  
interface JQueryAjaxSettings {
  
    
    
  
    async?: boolean;
  
    
    
  
    cache?: boolean;
  
    
    
  
    heads?: { [key: string]: any};
  
    
    
  
    ...
  
    
    
  
}
  
    
    
  

  
    
    
  
interface JQueryXHR {
  
    
    
  
    responseJSON?: any;
  
    
    
  
}
 
   
   
 

一切都很清楚，函数的第一个参数是一个字符串。settings参数是可选的。我们可以看到所有可以传递到函数中的选项，不仅是它们的名称，还包括它们的类型。函数返回一个JQueryXHR对象，我们可以看到它的属性和函数。

类型化签名肯定比未类型化的签名长，但是:string，:JQueryAjaxSettings和JQueryXHR并不是混乱的。它们是提高代码的可理解性的重要文档。我们可以更深入地理解代码，而不必深入到实现或读取文档中。

总结陈词

TypeScript拥有静态语言95%的有用特性，并将其引入到JavaScript生态系统中，但不会强迫你离开JavaScript生态系统，因为开发者一直都在使用相同的标准库、相同的第三方库、相同的习语和许多相同的工具(例如:Chrome开发工具)，它只是让你拥有了构建更健壮的js应用的能力。