你好，我是大圣。

在上一讲中，我为你介绍了 Vue 中的 JSX，以及 template 和 JSX 各自的优缺点。就像在上一讲中我提到的 template 牺牲灵活性换来了静态标记的收益，你能看到：有些时候，我们需要放弃一些灵活性去换取项目的整体收益。那么在这一讲中，我会给你介绍一个可以在语言层面上，提高代码可维护性和调试效率的强类型语言——TypeScript。

在整体上，我们的课程还是以使用 JavaScript 为主。对于 TypeScript 的内容，我会在这一讲中先带着你入门。下面，我会先讲一下 TypeScript 的入门知识 ；然后作为巩固，我会带你在 Vue 3 里再实战一下 TypeScript；最后，我会对 TypeScript 和 JavaScript 这两者做一个对比分析，让你明白如何在这两者之间做一个更好的平衡。

什么是 TypeScript

TypeScript 是微软开发的 JavaScript 的超集，这里说的超集，意思就是 TypeScript 在语法上完全包含 JavaScript。TypeScript 的主要作用是给 JavaScript 赋予强类型的语言环境。现在大部分的开源项目都是用 TypeScript 构建的，并且 Vue 3 本身 TS 的覆盖率也超过了 95%。

下图展示了 TypeScript 和 JavaScript 的关系，TypeScript 相当于在 JavaScript 外面包裹了一层类型系统，这样可以帮助我们开发更健壮的前端应用。

接下来，我们看一下 TypeScript 带来的新语法：首先，TypeScript 可以在 JavaScript 的变量之上限定数据类型。你可以打开这个 TypeScript 官方的演示链接，在线体验一下 TypeScript 的这种新语法。

上面 TypeScript 的官方演示链接，我用截图的方式放到了下面。你可以看到 TypeScript 和 JavaScript 的区别在于：TypeScript 的变量后面有一个冒号用来设置好变量的数据类型，courseName 变量的值只能是字符串，price 只能是数字。

在第六行代码中，我们给 price 赋值了字符串，页面右边解析出来的 JavaScript 代码是没有任何问题的。但是我们点击右边的 Errors 时，就会看到一个报错信息，明确告诉你 string 类型的变量不能赋值给数字类型。

这段演示代码算是 TypeScript 中最简单的 Demo 了，你的脑子里肯定会提出一个问题：在 TypeScript 中，既然变量不能随便赋值，那这会带来什么好处吗？

我还是给你举个例子，在你去极客时间官网购买课程的时候，如果官网上对每个课程的类型都定义得非常详细，那么在课程列表页面，你就能知道《玩转 Vue 3 全家桶》这个课的受众、价格、难度等类型，所以你在购买之前就可以很轻松地过滤不需要的课程。用 TypeScript 来描述的话，就是下面的代码：

interface 极客时间课程 {
    课程名字:string,
    价格:number[],
    受众:string,
    讲师头像?:string|boolean,
    获取口令():string
}

let vueCourse: 极客时间课程 = {
    课程名字:'玩转Vue 3全家桶',
    价格:[59,129],
    受众: '前端小老弟',
    讲师头像:false,
    获取口令(){
        return 88
    }
}

这就是 TypeScript 带来的好处，如果项目中的每个变量、每个接口都能在定义的时候定义好类型，那么很多错误在开发阶段就可以提前被 TypeScript 识别。在上面的代码中，我们使用 interface 去定义一个复杂的类型接口，也即极客时间课程。

这样，一个变量想要描述一个课程，就必须要按照这个格式去定义，也就是说：课程名必须是字符串、价格必须是一个数组，并且内部全部是数字、讲师头像可以是字符串或布尔这两个类型之一、获取口令必须是一个函数，并且返回一个字符串。

只要是不符合接口规定的类型的变量，就会直接在变量下方给出红色波浪线的报错提示。鼠标移到报错的变量那里，就会有提示信息弹出，直接通知你哪里出问题了。这也是为什么现在大部分前端开源项目都使用 TypeScript 构建的原因，因为每个函数的参数、返回值的类型和属性都清晰可见，这就可以极大地提高我们代码的可维护性和开发效率。