大前端 - 前端高级进阶

# 导学

# 常见问题

  • TypeScript必须要学吗？——是的，目前已经成为了前端人的必备捅；
  • TypeScript 是不是就不需要学 JavaScript 了？——不是，TS与JS应该是同生的，目前TS满足所有ECMAScript标准，支持ES6+语法，同时进行了拓展。TS中是直接支持ES6+语法，不用babel就可以编译成标准JS代码；
  • Vue 用 TypeScript 改写发布 3.0 后是不是不用 TypeScript 不行？——不是，同样支持JS，也同样支持大部分90%（具尤雨溪自己说的）Options API用法。
  • 学习TypeScript有什么优点？开发效率高、代码质量高、包容性高。

# 背景

JavaScript 是在运行的时候，才能发现一些错误的，比如：

  • 访问了一个对象没有的属性；
  • 调用一个函数却少传了参数；
  • 函数的返回值是个字符串你却把它当数值用了；
  • …

有了TypeScript就可以在编写代码的过程中，看到并提示上述错误，很酷！

VSCode是使用TypeScript开发的，可以看看仓库：https://github.com/microsoft/vscode

# 概念

# 什么是 TypeScript

TypeScript (opens new window)：是 JavaScript 的超集，拥有类型机制，不能在浏览器直接执行，而是编译成 JavaScript 后才会运行。

  • 超集（superset）：比如 ES6 包含了 ES5 所有的内容，还有一些独特的语法特性，就可以理解为 ES6 是 ES5 的超集
  • 类型：指的是静态的类型，js 中一个存放字符串的变量，后续依旧可以将数字、对象、数组等类型赋值到该变量，这是动态类型。而 ts 则是静态类型，后续不可更改类型

# TypeScript 的优势

通过一个例子（勾股定理），来体会 js 与 ts 的差异：

// javascript
function demo(data) {
  return Math.sqrt(data.x ** 2 + data.y ** 2)
}
demo()

// typescript---可以给它限制实参的类型
function tsDemo(data: { x: number; y: number }) {
  return Math.sqrt(data.x ** 2 + data.y ** 2)
}

tsDemo({ x: 1, y: 1 }) // 如果不传参数或参数类型不符，就会报错

下面列举 TypeScript 相比于 JavaScript 的显著优势：

  1. 静态输入

静态类型化是一种功能，可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能，就会允许开发人员编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。

  1. 大型的开发项目

有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。使用 TypeScript 工具来进行重构更变的容易、快捷。

  1. 更好的协作

当发开大型项目时，会有许多开发人员，此时乱码和错误也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误。这为开发团队创建了一个更高效的编码和调试过程。

  1. 更强的生产力

干净的 ECMAScript 6 代码，自动完成和动态输入等因素有助于提高开发人员的工作效率。这些功能也有助于编译器创建优化的代码。

# 应用场景

哪些项目适合用 TypeScript 开发，以下几类：

  • 需要多人合作开发的项目（人数>10）
  • 开源项目，尤其是工具函数或组件库
  • 对代码质量有很高要求的项目（与钱打交道）

来看几个广为人知的使用 TypeScript 开发的经典项目：

  • VSCode：开源的高质量代码编辑器VSCode使用TypeScript开发，所以它天生就支持 TypeScript；
  • Angular & React & Vue3.0：现在三足鼎立的三个前端框架，Angular 和 React 已经使用 TypeScript编写。也可以看出，TypeScript 已经被广为接受。当然了，你依然可以使用JavaScript来开发前端项目，但是相信随着 Vue3.0 发布，TypeScript将会被越来越多的开发者所接受；
  • Ant Design：使用 React 开发项目的开发者大多应该都知道蚂蚁金服开源UI组件库Ant Design (opens new window)，同样使用TypeScript进行编写。保证了代码质量的同时，也能很好地支持开发者使用TypeScript进行React项目的开发。如果你使用 Vue 进行开发，Ant Design 也提供了Vue 版的组件库，风格和功能和 React 版的保持一致，共享单元测试和设计资源，对TypeScript的支持也一样很好。

TypeScript 在实现新特性的同时，时刻保持对ES标准的对齐。一些ECMAScript标准没有确定的内容，在 TypeScript 中已经率先支持了。所以在语法标准方面，可以说TypeScript是略微领先的，比如类的私有属性和方法。ES6标准对类的相关概念的定义中，并没有私有属性的概念，如果想实现私有属性，需要使用一些方法hack（可以参考阮一峰的《ECMAScript 6 入门》- 私有方法和私有属性 (opens new window)）；但是TypeScript是支持私有属性的，可以直接使用 private 指定一个私有属性。虽然ECMAScript新的提案提供了定义私有属性的方式，就是使用 # 来指定一个属性是私有的，但是到目前为止现在还没有编译器支持这种语法。

# 笔记内容介绍

  • 基础部分
    • 学习方法介绍
    • 搭建Ts学习环境（包括线上练习环境Playground）
    • 基础类型 -> 新引入类型
    • 函数类型
  • 进阶部分
    • 类型断言 -> 了解 ts 工作原理
    • Interface
    • 类 ->
    • 泛型 -> 泛型变量 -> 泛型约束 -> 扩展应用(泛型接口、泛型函数、泛型类)
    • 装饰器
    • 模块&命名空间
    • 声明相关
  • tsconfig配置文件

← 学习方法 →