1. TypeScript 介绍

目标：能够说出什么是 TypeScript

知识点：

  1. TypeScript，简称 TS， 是 JavaScript 的超集 (包含 ES5\ES6\等版本以及本身独特的特性)，简单来说就是：JavaScript 有的 TypeScript 都有

image.png

  1. 简单理解： TypeScript = Type + JavaScript（在 JS 基础之上，为 JS 添加了类型支持）

image.png

  1. TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行 TypeScript

总结：

TypeScript 是 JavaScript 的超集，为 JavaScript 添加了类型系统

2. 为什么要有 TypeScript

目标：能够说出为什么会有 TypeScript

背景：

  1. JS 的类型系统存在“先天缺陷”弱类型，JS 代码中绝大部分错误都是类型错误（Uncaught TypeError）
  2. 这些经常出现的错误，导致在使用 JS 进行项目开发时，增加了找 Bug、改 Bug 的时间，严重影响开发效率

原因：

从编程语言的 类型检查 角度来区分，TypeScript 属于静态类型的编程语言，JavaScript 属于动态类型的编程语言

  1. 静态类型：编译期做类型检查
  2. 动态类型：执行期做类型检查

代码编译和代码执行的顺序：1 编译、2 执行
对于 JS 来说：需要等到代码真正去执行的时候才能发现错误，发现的问题晚一步、慢半拍
对于 TS 来说：在代码编译的时候 (代码执行前) 就可以发现错误，发现问题早，提前预知错误

如果配合 VSCode 等开发工具，TS 可以提前 在编写代码的同时就发现代码中的错误，减少找 Bug、改 Bug 时间

演示：

JavaScript 文件中，在代码编译的时候，不会发现错误
image.png
TypeScript 文件中，在代码编译的时候，及时发现错误
image.png

3. TypeScript 相比 JS 的优势

目标：能够说出 TypeScript 相比 JavaScript 有哪些优势

知识点：

  1. 更早 (写代码的同时) 发现错误，减少找 Bug、改 Bug 时间，提升开发效率
  2. 程序中任何位置的代码都有代码提示，随时随地的安全感，增强了开发体验
  3. 强大的类型系统提升了代码的可维护性，使得重构代码更加容易
  4. 支持最新的 ECMAScript 语法，优先体验最新的语法，让你走在前端技术的最前沿
  5. TS 类型推断机制，不需要在代码中每个地方都显示标注类型，让你在享受优势的同时，尽量降低了学习负担

其他：

除了以上优点之外，Vue 3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合，TypeScript 已成为大中型前端 项目的首选编程语言，目前，前端最新的开发技术栈：

  1. React： TS + Hooks
  2. Vue： TS + Vue3
  • Vue2 对 TS 的支持不好

4. 安装编译 TS 的工具包

目标：能够安装 ts 的工具包来编译 ts

知识点：

  1. 问题：为什么要安装编译 TS 的工具包 ?

  2. 回答：Node.js/浏览器 只认识 JS 代码，不认识 TS 代码。需要先将 TS 代码转化为 JS 代码，然后才能运行

  3. 步骤：

  • 安装命令：npm i -g typescript 或者 yarn global add typescript
  • typescript 包：提供了 tsc 命令，用来编译 TS 代码的包，实现了 TS -> JS 的转化
  • 验证是否安装成功：tsc –v (查看 typescript 的版本)

image.png

注意：Mac 电脑安装全局包时，需要添加 sudo 获取权限，安装方式如下：

  1. npm 全局安装：sudo npm i -g typescript yarn
  2. yarn 全局安装：sudo yarn global add typescript

5. 编译并运行 TS 代码

目标：能够理解 TypeScript 的运行步骤

知识点：

  1. TS 文件的后缀名为 .ts
  2. 流程：① 创建 ts 文件 → ② 编译 TS → ③执行 JS
  3. 说明：所有合法的 JS 代码都是 TS 代码，有 JS 基础只需要学习 TS 的类型即可
  4. 注意：由 TS 编译生成的 JS 代码中就没有类型信息了

操作步骤：

  1. 创建 hello.ts文件（注意：TS 文件的后缀名为 .ts）
  2. 将 TS 编译为 JS：在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）
  3. 执行 JS 代码：在终端中输入命令，node hello.js ```typescript // 声明一个变量 age let age: number = 10

// 给 age 赋值一个 string 类型的变量 age = 100

```

6. 简化运行 TS 的步骤

目标：能够通过 ts-node 包来简化 TS 的运行

知识点：

  1. 问题描述：每次修改代码后，都要重复执行两个命令，才能运行 TS 代码，太繁琐
  2. 简化方式：使用 ts-node 包，直接在 Node.js 中执行 TS 代码
  3. 安装命令：npm i -g ts-node
  • ts-node 包提供了 ts-node 命令
  • 使用方式：ts-node hello.ts 相当于：① tsc 命令 ②node（注意：ts-node 不会生成 js 文件）

解释：ts-node 命令在内部偷偷的将 TS => JS，然后，再运行 JS 代码

7. 其他

7.1 ts-node 运行 TS 报错

如果发现 ts-node 运行 ts 代码时报错，可以先运行：tsc --init 命令（运行一次即可），然后，再运行 ts-node xxx.ts 即可

image.png

7.2 解决两个 ts 文件之变量名冲突

问题：

在非模块化环境下，TS 会把 .ts 文件中声明的变量当做全局变量，所以，当两个 .ts 文件中声明的变量名称相同，并且在 VSCode 中同时打开这两个文件时，VSCode 会提示报错，虽然，不会影响代码的运行。但看到报错会让人感觉不舒服，所以，只要让 .ts 文件中的代码变为模块化环境即可

操作方式：在 .ts 文件中添加 export {} 或者 {}，使用 export 将文件声明为一个模块module，变量被限制在当前模块作用域下，不会再产生冲突

解释1：当 TS 看到 export 这样的模块化语法后，就会将该文件当做模块来解析，此时，再声明的变量就是该模块中的局部变量了

解释2：export 不需要导出任何内容，该代码的作用仅仅是为了让 TS 知道这是模块化环境

7.3 TypeScript 总结

  1. TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统
  • 所有的 JS 代码都是 TS 代码
  • JS 有类型 (比如，number/string 等)，但是 JS 不会检查变量的类型是否发生变化，而 TS 会检查
  1. TypeScript 类型系统的主要优势：可以显式标记出代码中的意外行为，从而降低了发生错误的可能性