前端要不要用Typescript

为什么要使用typescript
  • 前段时间,被问到一个问题就是为什么要使用typescript或者说ts的优劣在哪里,我脑海里能立马能浮现出来的几个关键词:类型检查、代码质量等等,但并没有深刻的思考,为什么要用?之前的项目能不用吗,好像也可以。
  • 现在准备深入的思考一下typescript,希望自己不是为了"跟风"去使用typescript,而是真正的让ts给自己带来了便利解决了痛点,而去使用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并没有特别明显或不可容忍的缺点。下面说的这些劣势,都是在结合实际项目,开展开发工作时会出现的,同时也是可以人为的克服或避免的。
  • 成本。使用Typescript肯定是比直接使用JavaScript要多一些成本的。
    • 学习成本。这一点没什么好说的了,不会Typescript的同学,团队要上ts,肯定要大家花时间去学习的。
    • 迁移成本。原有的js写的项目,要迁移到ts,肯定有成本对吧。比如你要从webpack的配置就得开始改起来,启动服务和打包的过程中多一层ts编译,eslint中添加对Typescript的校验规则等等。这些还只是从工程化的过程中就要改动的,js代码也得改对吧。所以从原js代码中迁移到ts,其实是工作量不算小的,尤
      其是你要做到类型声明完备的话。所以最好在新项目启动的时候,就考虑考虑是否要使用Typescript,要的话就在立项目的时候就上ts了。
  • 框架社区生态。你所使用的前端框架,也决定了你使用ts方不方便,angular是必须要用ts写的,当然兼容性是最好的;react自己实现了tsx,兼容ts也挺不错的;但是vue(2.0版本)其实对ts的兼容并不算好,好在3.0版本开始全面兼容ts了。其次,比如你项目使用的ts,然后另外引入了一个第三方模块,这个模块对ts没有支持,那么这个时候还需要额外的工作去兼容这个模块,起码你得写一个这个模块的类型声明文件对吧。
  • 编码习惯。Typescript给我们提供了很多强大的功能,但是实际编写代码的过程中,不同水平的开发人员可能写出来的代码大相径庭。比如能用可选链的情况不用,该抽泛型的函数不抽等等。
    • 但我觉得最重要的一点就是:any。any就是表示任何类型,一个变量可以是任何类型,那么就无法对他进行类型检测。所以我认为项目中应该尽力避免使用any,可以在校验规则中把any的判断加上,强制不允许使用any类型
写在最后
  • 最后这点感受虽然是引用别人的话,但是和我的想法几乎完全一致,所以就直接复制过来了: 说了这么多,如果你问我是否推荐 TypeScript,我只能说看情况。type check 对于大型项目来说太重要了。读和写代码的时候,有 type 也会在一些方面提高程序员的效率。但是我认为 TypeScript 可以提高的空间还有很多。如果你很在乎开发速度,快速迭代,那么建议你继续用 JavaScript。如果你需要高稳定性,那么建议你使用 TypeScript。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342