TS+react开发笔记1：what & why TypeScript?

发布于 作者:

几年前angular2就在用typescript，但那时我因为工作变迁的关系没有去学。现在因为项目驱动，需要使用react+typescript，不仅仅是自己会用，还得指导学生来做。所以我决定近期边学边做，就像当年整D3js一样来个学习笔记。

蚂蚁金服的数据体验技术团队（ProtoTeam）1年前发表过一篇《TypeScript体系调研报告》，对什么是TypeScript, 为什么要用TypeScript有比较深刻的描述。原文地址：https://juejin.im/post/59c46bc86fb9a00a4636f939

其中重点，我部分摘抄如下：

1. TS是什么 ?

 

TypeScript

 

TypeScript = Type + Script（标准JS）。

在最近几年，随着V8平台、各大现代浏览器的起来，JS的运行平台再不断完善，但，JS对于大型应用的开发是非常困难的，JS语言设计出来的目的不是为了大型应用，他是一门脚本语言，他没有静态类型校验，但更重要的是，他没有提供大型应用必须的classes、modules/namespaces、interfaces等结构化的装置，中间也出来过GWT等为了其他语言开发者开发大型JS应用的项目，这些项目可以让你利用Java等面向对象语言开发大型Web应用，也可以利用到Eclipse等好用的IDE，但这些项目不是用JS写代码，所以如果你想用JS里的一些东西，你可能要比较费劲的在其他语言里把它给实现出来，所以我们考虑如何增强JS语言，提供如静态类型检查、classes、modules/namespaces、interfaces等大型应用装置，这就是TS语言：**TS是一种开发大型JS应用的语言，更详细一点来说，TS是有类型的编译到纯JS的JS超集。**所以一般来说，JS代码也是TS代码。本身TS编译器也是TS写的，运行Node.js环境。【Anders Hejlsberg: What's new in TypeScript? 2017】比起已经被ES6基本替代的coffeescript，TS至少还能用5年以上。直到哪一天浏览器厂家把新标准讨论完毕为止。

2. 为什么要用TS ?

目标：生命周期较长（常常持续几年）的复杂SPA应用，保障开发效率的同时提升代码的可维护性和线上运行时质量。

  • 从开发效率上看，虽然需要多写一些类型定义代码，但 TS 在 VSCode、WebStorm 等 IDE 下可以做到智能提示，智能感知 bug，同时我们项目常用的一些第三方类库框架都有 TS 类型声明，我们也可以给那些没有 TS 类型声明的稳定模块写声明文件，如我们的前端 KOP 框架(目前还是蚂蚁内部框架，类比 dva )，这在团队协作项目中可以提升整体的开发效率。
  • 从可维护性上看，长期迭代维护的项目开发和维护的成员会有很多，团队成员水平会有差异，而软件具有熵的特质，长期迭代维护的项目总会遇到可维护性逐渐降低的问题，有了强类型约束和静态检查，以及智能 IDE 的帮助下，可以降低软件腐化的速度，提升可维护性，且在重构时，强类型和静态类型检查会帮上大忙，甚至有了类型定义，会不经意间增加重构的频率（更安全、放心）。
  • 从线上运行时质量上看，我们现在的 SPA 项目的很多 bug 都是由于一些调用方和被调用方（如组件模块间的协作、接口或函数的调用）的数据格式不匹配引起的，由于 TS 有编译期的静态检查，让我们的 bug 尽可能消灭在编译器，加上 IDE 有智能纠错，编码时就能提前感知 bug 的存在，我们的线上运行时质量会更为稳定可控。

3.TS能干什么

  • 静态检查：判断数据类型、低级错误编译时发现、非空判断（重要）、类型推断
  • 面向对象编程增强：访问控制，接口，类，ES6模块系统增强

补充：什么是静态检查？

高级编程语言的变量类型定义，一般分为两种：

  • 静态类型：编译期就知道每一个变量的类型。类型错误编译失败是语法问题。如Java、C++。
  • 动态类型：编译期不知道类型，运行时才知道。类型错误抛出异常发生在运行时。如JS、Python。

根据是是否容忍“隐式类型转换”，又可以分为两种：

  • 弱类型：容忍隐式类型转换。如JS，1+'1'='11'，数字型转成了字符型。
  • 强类型：不容忍隐式类型转换。如Python，1+'1'会抛出TypeError。

4. 使用 TS 的学习成本

理论上学习并应用一门新语言是需要很高成本的，但好在 TS 本身是 JS 的超集，这也意味着他本身是可以支持现有 JS 代码的。理论上学过面向对象+javascript基础就可以上手，看看官方文档 就能学会。

5. 社区发展

从Stackoverflow的2017年开发者调查报告、Google趋势、npm下载量趋势上可以到看，TypeScript社区发展很快，特别是最近几年。特别是伴随着VS Code的诞生（TS写的，对TS支持非常友好），VS Code + TypeScript的组合让前端圈产生了一股清流，生产力和规范性得到了快速提升。从Google对TS的支持（Angular高于2的版本是TS写的）看到，国际大厂也是支持的。

从蚂蚁集团内部看，Ant Design、Basement等产品也是基于TS写的（至少是在大量使用），虽然有一些反对的声音，但总体还是看好的，有合适的土壤就会快速发展，如Ant Design。

周边生态

类型声明包

React、angular、VUE等知名框架都有TS类型声明，例如react的TS类型声明可以在项目中通过npm install @types/react方式安装，可以在这个网站搜索你想要安装的库声明包。安装后，写和那些框架、库相关的代码将会是一种非常爽的体验，函数的定义和注释将会自动提示出来，开发效率将会得到提升。

IDE

VS Code、WebStorm等前端圈流行的IDE都对TS有着非常友好的支持，VS Code甚至自身就是TS写成的。

5. 接受TS

TS 刚出来时我是有点抵触的，或者对她的感觉就跟和CoffeeScript、Dart等编译到JS语言差不多，感觉就是其他语言往JS渗透的产物，近一两年，社区中TS的声音越来越强，而我也开始做大型 JavaScript 应用，随之逐渐重新认识 TS，逐渐认识到 TS 的类型系统、TSC 的静态检查、VS Code 等 IDE 的强力支持对于开发出可维护性好、稳定性高的大型 JavaScript 应用的重要性。

6. 权衡

如何更好的利用 JS 的动态性和 TS 的静态特质，我们需要结合项目的实际情况来进行综合判断。一些建议：

  • 如果是中小型项目，且生命周期不是很长，那就直接用 JS 吧，不要被 TS 束缚住了手脚。
  • 如果是大型应用，且生命周期比较长，那建议试试 TS。
  • 如果是框架、库之类的公共模块，那更建议用 TS 了。

至于到底用不用 TS，还是要看实际项目规模、项目生命周期、团队规模、团队成员情况等实际情况综合考虑。

所以 TypeScript 能不能成为了你的 “刚需” 就看你自己的情况了。