关于项目中是否使用Typescript的疑惑与解答

简介: 关于项目中是否使用Typescript的疑惑与解答

先说优点:

  1. bug 显著减少,之前会遇到的 xxx 为空的问题几乎不会出现了,类型相关 bug 直线减少。
  2. 应用更可控,当你需要约束某些代码的时候,用类型就能很简单地做到,比如 React 里强制写 displayName 方便调试。
  3. 查文档更方便,以前要打开浏览器看文档,现在直接查看定义就基本明白了。

再说缺点:

没有。哈哈。


现在只会 JS 的前端要怎么办?


不用慌,TS 的代码跟 JS 差不多,你学完 JS 后,只需要学习一下类型声明就可以掌握 TS 了。

如果你公司的项目目前只支持 JS,也没有关系,只需要加一个 ts-loader 或者 awesome-typescript-loader 就能提供 TypeScript 支持,TS 可以和 JS 共存哦。

然后你就可以逐步用 TS 代替 JS,实现完美过渡。


为什么 TypeScript 是好的?


如果你现在还没有开始学习 TS,肯定是因为对 TS 有所顾虑。去问问用了 TS 的前端感觉怎么样吧,基本没有一个说后悔的。所以这种顾虑是完全没有必要的。

那么 TS 为什么这么好呢?接下来我们从理论上解释一下。

  1. 写代码最怕什么?代码出错,也就是 bug。
  2. 如何避免 bug?运行代码看结果,或者添加各种测试。
  3. 现在前端并不流行单元测试,所以只能运行代码看结果(比如刷新页面,然后用鼠标点点点,看是否能运行成功)
  4. 但当你的前端应用非常大的时候,你不可能每次改代码之后去所有页面上点一遍,因为页面太多了。
  5. 所以前端选择模块化,让一次代码改动影响的页面尽量少。但是即使这样,你依然无法通过鼠标点击测试来运行所有代码,因为你可能还需要测试多种不同的账户。
  6. 这样做太麻烦了。有没有什么办法能让我快速知道「代码有bug没」

这是一个重要的问题:有没有什么办法能让我快速知道「代码有bug没」。


为了说明类型是如何解决这个问题的,我们先来介绍一种最简单的类型:正负数。

我们把实数分为三种类型:正数、负数和0。

然后看下面这个等式:

28937829 * -1239282 = 35862130598778

聪明的你一眼就看出这个等式不对。为什么?因为「正数」乘以「负数」必然得到「负数」。所以我们根本不用运行这个乘法,就知道这个结果不对。

这就是类型的好处。


类型能让你「大概」知道代码对不对


TS 就是在 JS 上加上类型声明,这样我们就能知道代码是否「大概」正确。

另外,这种方式速度非常快,快到你只要修改代码,TS 就能告诉你代码是否「大概」正确。

从而避免很多 bug。

你只需要稍微花一点点时间,就能让代码质量提升,何乐不为呢?


听说 TS 只适合大型项目?


错,只要是有 bug 的 JS 项目,都可以用 TS 替代 JS 从而减少 bug。

所以无论是小项目还是大项目,都有必要使用 TS。


万一过几年 TS 不火了呢?


这个问题问得好,前端发展这么快,很多东西都是火几年就不火了,导致后期想招人维护都难(比如 AngularJS 1)。

但是 TS 不存在这个问题。为什么?

因为目前前端三大框架全都支持 TS 了:

  1. Angular 很早就支持 TypeScript 了,而且还把 JS 从自己的名字里去掉了:AngluarJS -> Angular。甚至连 Angular 入门文档里的例子都默认是 TS 版本的。用 JS 写 Angular 不是不可以,只是会显得很「奇怪」,明明有更好的 TS,为什么会有人用 JS。
  2. Vue 3.0 用 TS 重写了,为了更好的支持 TS,甚至放弃了原本计划推出的 class API。
  3. React 一开始对 TS 的支持也是非常丝滑。不过 React 并没有强绑定到 TS。

如果有一年 TS 不火了,上面框架的维护者会提前为你想好升级方案的,你就不必过多担心了。

毕竟背靠大树好乘凉。


JS 岂不是白学了?


No No No,TS 里面包含了 JS 的所有语法,所以你在用 TS 的时候,实际上还是在用 JS。

也就是说 JS 的魂还在,我们只是不再单独使用 JS 了。


结论


快点学 TypeScript 吧,它很快就是一线互联网公司面试加分项甚至必备项了。


目录
相关文章
|
10天前
|
设计模式 监控 JavaScript
TypeScript 在大型项目内网管理监控软件中的结构优化
本文探讨了 TypeScript 在大型项目内网管理监控软件中的结构优化,包括模块划分与组织、接口与抽象类的使用以及依赖注入与控制反转的设计模式,通过具体代码示例展示了这些技术的应用,提高了代码的可读性、可维护性和灵活性。
24 3
|
7天前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
15天前
|
JavaScript 前端开发 测试技术
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
22 1
|
4月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
3月前
|
JavaScript 前端开发 测试技术
TypeScript逆袭!大型项目为何对它情有独钟?揭秘背后的真相!
【8月更文挑战第27天】随着前端领域的快速发展,JavaScript已成为Web开发的核心语言。然而,在处理大型项目时,其弱类型特性导致的维护困难和易错性等问题日益突出。为解决这些问题,TypeScript应运而生,逐渐成为大型项目的首选方案。
36 3
|
4月前
|
JavaScript 前端开发 IDE
React 项目中有效地使用 TypeScript
React 项目中有效地使用 TypeScript
|
3月前
|
JavaScript 前端开发 安全
TypeScript在项目中应用
【8月更文挑战第4天】TypeScript在项目中应用
36 0
|
5月前
|
监控 JavaScript 前端开发
如何在现有的 JavaScript 项目中渐进式地采用 TypeScript
【6月更文挑战第13天】TypeScript,JavaScript的超集,引入静态类型和更多特性,提升代码安全性和可读性。在JavaScript项目中渐进式采用TypeScript可从新模块开始,逐步转换代码,编写.d.ts文件支持第三方库,配置编译选项,并编写测试用例。通过监控和评估,改善项目质量和效率。大型项目尤其受益于TypeScript的类型安全、社区支持和工具兼容性。
67 3
|
4月前
|
JavaScript API
TypeScript 项目中接口的统一管理
TypeScript 项目中接口的统一管理
57 0
|
4月前
【Vue3+TypeScript】CRM系统项目搭建之 —项目目录结构的划分
【Vue3+TypeScript】CRM系统项目搭建之 —项目目录结构的划分
68 0