TypeScript介绍

学 TypeScript 是不是就不用学 JavaScript 了？Vue 3.0 用 TS 重写之后是不是不用 TS 不行？它靠谱吗？这类犹豫往往来自误解：它不是 JS 的孪生兄弟，也不是新扶持的另一门语言，而是 JavaScript 的超集——加了装备的进化版 JS。

JS 有的它都有，而且类型检查能在编写期拦住一批运行时才会爆的错。它紧跟 ECMAScript，ES6/7/8/9 都支持，还在语言层面拓展了枚举、类的部分语法。配合 VSCode 和 TSLint，大型协作项目里尤其明显。

一、它不是新语言，是 JavaScript 的超集

JS 没有的，TS 也有，而且很长一段时间不会被 JS 赶上。作为超集，它始终跟 ECMAScript：新语法都支持，并增加了枚举（Enum）这类常见类型，对 Class 也实现了一些 ES6 标准里没定死的语法。

追新的开发者已经在用 ES6/7/8/9。要让这些代码跑在非现代浏览器上，通常靠 Babel 转到 ES3/5。TS 可以完全不用 Babel，就能编到指定版本，这一点和 JavaScript 打平。

二、类型系统：写代码时就能发现错误

最大优势是类型系统，这也是名字里 Type 的来源。JS 很多错要到运行时才发现，例如：访问对象没有的属性、调用函数少传参数、返回值是字符串却当数值用。这些问题在 TS 里都不算事，编写时就能标出来。

interface 定义的是对结构的描述。下面的 info 用 ES6 的 const 声明，通过 info: Info 指定要实现 Info 结构，就必须包含 name 和 age。实际代码只有 name，于是被红波浪线标出。鼠标放上去，VSCode 会提示：

这些概念后面章节会细讲。配合 VSCode 这类编辑器，可以靠提示愉快地写 TS。深受前端喜爱的 VSCode 本身也是用 TypeScript 开发的（VSCode）。

三、函数重载：别用其他语言的思维硬套

做了很久 C++、Java 的后端，可能对 TS 有误解。别的语言里可以定义多个同名函数，靠参数个数、类型区分；TS 也有重载，但目的是帮编译器知道：给同一个函数传入不同参数时，返回值是什么情况。JS 里要在函数体内自己判断。例如：

const getResult = input => {
    if (typeof input === 'string') return input.length
    else if (typeof input === 'number') return input.toString()
    else return input
}

输入字符串则返回长度；数值则变成字符串；否则原样返回。返回类型随输入而变，使用时容易用错：输入 123 应返回字符串 ‘123’，再调 toFixed 运行就会报错。用 TS 书写时，写代码阶段就会告诉你：

function getResult (input: string): number
function getResult (input: number): string
function getResult <T>(input: T): T
function getResult (input: any): any {
  if (typeof input === 'string') return input.length
  else if (typeof input === 'number') return input.toString()
  else return input
}

前三行组成函数重载，第四行开始是实际函数体。再调用 getResult：

输入 123 结果应是字符串 ‘123’，访问 toFixed 时字符串没有这个方法。

输入 ‘abc’ 应返回长度数值 3，再访问 length，数值没有该属性。

传入对象则原样返回，编译器知道 res 是 { a: ‘a’, b: ‘b’ }，输入 res. 后 VSCode 会列出可访问属性。不要用其他语言的重载思维来认识 TS。语法细节后面会细讲。

另外还有搭档 TSLint，和 ESLint 类似，能约束和提示代码，团队协作时让多人遵循同一套规范——大到语法，小到标点空格。VSCode + TSLint + 类型系统，写代码会顺很多。

四、发展趋势：为什么值得学

可能担心 TS 会像 CoffeeScript 一样，随着 ES 更新退出视线。关键差别在于类型系统：JS 是动态脚本，Node 服务甚至不用编译，改完重启即可，调试几乎都在运行时。这个特点短期内不会变。

TS 能在编写时提示错误，使用某个数据时列出可访问的属性和方法。项目变大、多人协作时，接口定义和方法用法容易因习惯或沟通产生差异。引入 TS 后会对实现做强校验，不按接口实现就编译不过；要求更高可以把严格检查全部打开。

比较适合 TS 的项目：

• 需要多人合作开发的项目
• 开源项目，尤其是工具函数或组件库
• 对代码质量要求很高的项目

广为人知的例子：

• VSCode：开源编辑器本身用 TS 写，天生支持 TS
• Angular、React、Vue3.0：三足鼎立的框架里，Angular 和 React 已用 TS；专栏写作时 Vue3.0 也在用 TS 重构。用 TS 开发能得到更好的类型支持，当然仍可用 JS
• Ant Design：蚂蚁金服开源的 React UI 库用 TS 编写；也有 Vue 版，风格功能一致，对 TS 支持同样好

TS 在实现新特性时对齐 ES。标准还没定的内容，它可能已率先支持，例如类的私有属性和方法。ES6 类没有私有属性概念，要实现得 hack（可参考《ECMAScript 6 入门》- 私有方法和私有属性）；TS 可直接用 private。ECMAScript 新提案用 # 标记私有属性，当时还没有编译器支持这种语法。

以上便是对 TypeScript 的大致介绍。原文

一句话总结：TypeScript 是带类型系统的 JavaScript 超集：不替代 JS，但能在编写期拦住一批只有运行时才会爆的错。