为什么要学习 TypeScript?
给一门语言加语法糖是相对容易推进到标准的事情,而直接把一门语言从动态改为静态,还要兼容数以亿计的老旧网站,这个在可预见的时间内几乎不可能发生,TypeScript 与 coffeescript 虽然都是 「Compile to JavaScript Language」,但是 TypeScript 的静态性是它立于不败之地的基础
- 静态类型
编程语言的静态类型定义在学术上理解起来比较复杂,简单来说,一门语言在编译时报错,那么是静态语言,如果在运行时报错,那么是动态语言。这里还有纠正一个概念,TypeScript 是静态弱类型语言,这跟C语言是一样的,并不是所谓的强类型,因为要兼容 JavaScript, 所以 TypeScript 几乎不限制 JavaScript 中原有的隐式类型转换,它对类型的隐式转换是有容忍度的,而真正的静态强类型语言比如 Java、C# 是不会容忍隐式转换的。那么为什么静态类型是 TypeScript 的杀手锏呢?归根到底,任何能提升生产力的东西都会被加入工程化的浪潮中,更何况一门静态类型的语言对生产力的提升是质的。很多项目,尤其是中大型项目,我们是需要团队多人协作的,那么如何保证协作呢?这个时候可能需要大量的文档和注释,显式类型就是最好的注释,而通过 TypeScript 提供的类型提示功能我们可以非常舒服地调用同伴的代码,由于 TypeScript 的存在我们可以节省大量沟通成本、代码阅读成本等等。 严谨不失灵活
很多人以为用了 TypeScript 之后就会丧失 JavaScript 的灵活性,其实并不是。首先,我们得承认 JavaScript 的灵活性对于中大型项目弊远远大于利,其次,TypeScript 由于兼容 JavaScript 所以其灵活度可以媲美 JavaScript,比如你可以把任何想灵活的地方将类型定义为 any 即可,把 TypeScript 变为 AnyScript 就能保持它的灵活度,毕竟TypeScript 对类型的检查严格程度是可以通过tsconfig.json
来配置的。即使在开启strict
状态下的 TypeScript 依然是很灵活的,因为为了兼容 JavaScript,TypeScript 采用了Structural Type System。因此,TypeScript 并不是类型定义本身,而是类型定义的形状(Shape),我们看个例子:class Foo { method(input: string): number { ... } } class Bar { method(input: string): number { ... } } const foo: Foo = new Foo(); // Okay. const bar: Bar = new Foo(); // Okay.
以上代码是不会报错的,因为他们的「形状」是一样的,而类似的代码在 Java 或者 C# 中是会报错的。这就是 TypeScript 类型系统设计之初就考虑到了 JavaScript 灵活性,专门选择了 Structural Type System(结构类型系统)。
- TypeScript 的缺点
我们说了这么多 TypeScript 相比 JavaScript 的优势,难道 TypeScript 是没有缺点的吗?
严格来讲,TypeScript 的缺点相比于它带来的生产力上的提升是可以忽略不计的,而一些缺点并不是 TypeScript 本身带来的。比如,与实际框架结合会有很多坑,我们一开始学习在框架中运用 TypeScript 的时候会花大量的时间在踩坑上,因为我们需要额外学习框架定义的 d.ts,而单单是官方入门文档的知识又不足以让我们很舒服地编写代码,因此我们的册子准备了 「TypeScript + React」、「TypeScript + Vue」等实战环节,帮助大家把障碍扫平。
比如,配置学习成本高,目前的前端脚手架基本上是以 JavaScript 为主,虽然 TypeScript 已经非常火了,但是相比于 JavaScript 多年积累的生态还是稍显不如,因此很多时候我们需要自己定制脚手架,比如同样是用 ESLint 做语法检查,其配置方式跟JavaScript完全不同,需要额外学习成本,配置 TypeScript 的 tsconfig.json ,用 ts-plugin-import 进行按需引入等等,都是需要额外学习成本的,因此我们也会在后面部分对工程配置进行详解。