TypeScript 学习系列(初)：充分认识 TypeScript

什么是 TypeScript？

听到 TypeScript 这个名字时，你的第一反应会联想到 JavaScript，因为它们在名字上特别相近。当然，它们之间确实存在着某种关系。

TypeScript 是 JavaScript 的超集，所谓超集，并不意味着它要比 JavaScript 更高或更强，而是以 JavaScript 为基础，在其拥有的语法、特性等层面上去定义和扩展。那么定义和扩展什么呢？根据它的名字，Type + Script，其核心就是类型（Type）。

那么基于它和 JavaScript 的关系，以及其核心的特性。我们可以以一个全局的视角来了解 TypeScript：TypeScript 是在 JavaScript 的语言层面上所建立起的一套丰富的类型系统。

为什么需要 TypeScript ，它主要解决哪些问题？

现在大型项目都会选择引入 TypeScript 来作为常规的技术栈，我们平常用的 Vue 和 React 框架也都使用 TypeScript，可见它的欢迎度与实用性。

在早期没有 TypeScript 时的痛点：

变量赋值与其实际类型不符：当我们声明一个变量且期望它是一个字符串类型的值，但后续可能因某些误操作将其重新赋值为其他的类型，这时候期望原来字符串类型变量的地方就会出现问题：

js 复制代码

let str = "hello" // 期望类型

str = {a: 1} // 误操作

function myStr(s1) {
   console.log(`${str},${s1}`); // 从 hello,world 变成 [object Object],world
}

myStr("world")

上边代码中 myStr 认为 str 就是期望的字符串类型，但并不知道在代码其他地方被赋值为其他类型，导致函数内容结果不符合预期。

没有类型提示，需要频繁切换上下文：声明一个变量并赋予初始值，在没有 TypeScript 前我们是不知道它是什么类型的，可能需要凭借我们对这个变量的记忆或者通过滑动代码来查找变量定义，这样效率其实是较低的。
运行时检测错误，效率低下：

js 复制代码

let num = 1 // 期望类型

num = undefined // 误操作

function sum(a, b) {
    return a + b
}

console.log(sum(num, 2)); // 期望结果是 3，而实际为 NaN（undefined + 2）

sum 函数对接收的两个参数进行求和运算，由于中间某些操作导致 num 从数字类型的值变为其他类型值，最后求和为 NaN，而 JavaScript 编译时是没任何提示的。我们只有运行代码才能看到结果输出，这时候我们才会去排查问题，更多时候我们会选择在函数开头先进行类型判断。

代码维护性不好：随着项目规模逐步增大，一个组件内就会出现众多的变量定义，经常需要频繁的进行读写操作，状态管理会逐渐变得困难。同时我们很难保证一个变量仅在代码的一处地方使用，很多时候是多个地方同时存在对一个变量的依赖。其实是存在很强的耦合性的，我们需要精准了解每个地方对该变量的操作逻辑。

我们再来看下 TypeScript 解决的痛点，也是它的优势点。

类型安全：使用 TypeScript 后，变量在声明时就可以指定其类型，这样后续对该变量所赋予的值都得是这个类型，其他类型 Typescript 会给予报错提示，这极大程度的防止了变量误操作导致的类型不符问题，大大提高类型安全。
编译时错误检测：在编写代码时，如果出现变量赋值与变量实际定义时的类型不符，TypeScript 会立即检测到并在出异常的代码划上上红色波浪，如下图所示：

鼠标移上去还可以看到错误原因：

不需要我们运行代码才能发现问题，这也是 TypeScript 的核心优势。

更好的 IDE 支持：不管是 vscode、webstorm 等编辑器，都具备对 TypeScript 的良好支持，我们可以轻松的引入 TypeScript。
代码的可维护性：TypeScript 的类型安全使得我们不会对一个变量进行无效的赋值，同时它还提供良好的类型提示，鼠标移到指定变量身上，可以看到它所限定的类型，这些点都让代码的可维护性得到了充分的保障。

如何学好 TypeScript？

像学习 JavaScript 一样，我们不会一上来就学习它的函数语法，而是先从最小单位开始，基础类型和引用类型。那么 TypeScript 也是一样，它的核心是类型，同样也可分为基础类型和高级类型。所以想学好 TypeScript 就得先从它的基础类型开始，再到高阶类型，慢慢过渡到组合使用的复杂类型，保持循序渐进，每个阶段都充分理解、充分实践，最后肯定能学好的。

总结

TypeScript 是在 JavaSript 语法层面上提供的一套丰富的类型系统，它的核心优势是类型安全、类型提示、编译时检测、良好的 IDE 支持、提高代码的可维护性。学好 TypeScript 同样需要从基础类型开始、然后到高阶类型，慢慢过渡到组合使用的复杂类型，保持循序渐进，充分理解与实践。

我是 luckyCover，接下来我会持续更新 TypeScript 学习系列的文章，欢迎大家一起讨论学习呀~