Typescript | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第13天

为什么要使用typescript

类型检查、代码质量等等

typescript的优势

• 类型检查

  :Typescript作为js的超集，首先提供的一个比较重要的特性就是类型检查，把无类型的语言升级成了类型语言。

  • 定义好类型声明后：配合IDE开发工具(比如我使用的vscode)，我们可以在写代码的过程中，就根据类型检查+编辑器的错误提示识别出一些代码错误。并且在写的过程中，开发工具能提供语法提示，比如引入一个第三方包或者一个对象属性时，再输入前面几个字母后，开发工具就能自动帮你补全。这是一种语言工具和开发工具相结合，提高开发效率和debug效率的良好实践，也是使用ts开发时体验良好的原因之一。
  • 类型声明代码同时也能看成一种api文档或注释，比如你引入了一个第三方的模块包，你可以点开它的typescript类型声明代码，就能清楚的看到他有提供哪些接口，分别接受什么参数，如果再搭上一些注释，明显地可以让使用者感觉更加清楚。
  • 当然类型检查的强大远不止我上面讲的这一点，具体的优势开发者可以自行去体会。

• 超集之外的语法糖

  Typescript作为JavaScript的超集，意味着他能提供原生js之外的语法。

  • 举个例子：TypeScript中有一个optional chain的语法，就比如有个js对象obj，取它的一个属性a，用js来写就是: obj.a，但如果obj是null或者undefined的话代码就会报错，而如果用ts，就可以这样：obj?.a，他可以兼容上面说的会报错的情况。
  • 譬如上面提到的这种新的语法糖，确实能够在我们编码的过程中给我们提供一些便利，可以少写一些容错代码(当然，本质上还是会转成js代码，只不过这些容错代码是ts帮你加上了)，提高了编程效率。

• 多人协作/项目重构：这个优势是根据具体项目来说的，仔细想想简单一点的项目似乎确实不用上ts。如果一个项目是多人协作跨团队协作，涉及到的一个问题就是你得去看或者修改别人写的代码，特别是重构别人的原有代码时，这是一个特别容易出bug的步骤。如果使用了Typescript，在修改代码时，ts会帮你做一层校验，避免一些低级的错误，提前暴露问题。而且我个人的感觉：在看别人的代码时，Typescript代码比原生的JavaScript看起来更便捷更容易。

Typescript的劣势

成本。 使用Typescript肯定是比直接使用JavaScript要多一些成本的。

• 学习成本。 这一点没什么好说的了，不会Typescript的同学，团队要上ts，肯定要大家花时间去学习的。
• 迁移成本。 原有的js写的项目，要迁移到ts，肯定有成本对吧。

框架社区生态。 你所使用的前端框架，也决定了你使用ts方不方便，angular是必须要用ts写的，当然兼容性是最好的；react自己实现了tsx，兼容ts也挺不错的；但是vue(2.0版本)其实对ts的兼容并不算好，好在3.0版本开始全面兼容ts了。其次，比如你项目使用的ts，然后另外引入了一个第三方模块，这个模块对ts没有支持，那么这个时候还需要额外的工作去兼容这个模块，起码你得写一个这个模块的类型声明文件对吧。

编码习惯。 Typescript给我们提供了很多强大的功能，但是实际编写代码的过程中，不同水平的开发人员可能写出来的代码大相径庭。

是否推荐 TypeScript，我只能说看情况。type check 对于大型项目来说太重要了。读和写代码的时候，有 type 也会在一些方面提高程序员的效率。但是我认为 TypeScript 可以提高的空间还有很多。如果你很在乎开发速度，快速迭代，那么建议你继续用 JavaScript。如果你需要高稳定性，那么建议你使用 TypeScript。

const hello : string = "Hello World!"
console.log(hello)

以上代码首先通过 tsc 命令编译：

tsc Runoob.ts

得到如下 js 代码：

Runoob.js 文件代码：

var hello = "Hello World!"; 
console.log(hello);

最后我们使用 node 命令来执行该 js 代码。 node Runoob.js