首页 > 前端技术 > TS+react开发笔记1:what & why TypeScript?
2020
01-16

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

6. 权衡

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

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

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

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

 


TS+react开发笔记1:what & why TypeScript?》有 1 条评论

  1. 邓佚名 说:

    赞啊,这么忙还补技术,学习!多说一句,antd组件有坑,多翻issue才能查到。

留下一个回复

你的email不会被公开。