1. TypeScript 简介

1.1 TypeScript 是什么

TypeScript（简称：TS）是 JavaScript 的超集（JS 有的 TS 都有）。
TypeScript = Type + JavaScript（为 JS 添加了类型系统）。
TypeScript 是微软开发的开源编程语言，设计目标是开发大型应用。
可以在任何浏览器、任何计机、任何操作系统上运行。

1.2 TypeScript 相比 JS 的优势

JS 的类型系统存在“先天缺陷” ，绝大部分错误都是类型错误（ Uncaught TypeError ）。

• 优势一：类型化思维方式，使得开发更加严谨，提前发现错误，减少改 Bug 时间。
• 优势二：类型系统提高了代码可读性，并使维护和重构代码更加容易。
• 优势三：补充了接口、枚举等开发大型应用时 JS 缺失的功能。
• Vue 3 源码使用 TS 重写，释放出重要信号：TS 是趋势。
• Angular 默认支持 TS；React 与 TS 完美配合，是很多大型项目的首选。

1.3 开发工具准备

1.3.1 开发工具

• 写代码的工具：Visual Studio Code（简称：VSCode），微软开发的代码编辑工具。
• 运行 TS / JS 代码的工具：Node.js，一个基于 Chrome 浏览器 V8 解析引擎的 JavaScript 运行环境。

1.3.2 解析 TS 的工具包

什么要安装这个工具包？

• Node.js/浏览器，只认识 JS 代码，不认识 TS 代码。
• 需要先将 TS 代码转化为 JS，然后就可以在 Node.js/浏览器中运行了。

安装解析 TS 的工具包

 npm i -g typescript

typescript：就是用来解析 TS 的工具包。提供了 tsc 命令，实现了 TS -> JS 的转化。
npm：用来安装前端开发中用到的包，是安装 Node.js 时自动安装的。
i（install）：表示安装。
-g（–global）：全局标识，可以在任意目录中使用该工具。

1.4 创建TS文件

1.4.1 步骤

（1）创建ts文件

① 在桌面中创建文件夹：code。
② 在文件夹上点击鼠标右键，然后点击 Open With Code（用VSCode打开文件夹）。
③ 在 VSCode 中新建ts文件：hello.ts（注意：文件后缀名为 .ts）。

（2）写代码：在 hello.ts 文件中，写入以下代码，并保存。

console.log('Hello TS')

(3）执行ts文件

问题1：TS 代码能直接在 Node.js 里面运行吗？不能
问题2：该如何处理呢？TS代码 -> JS代码 2 执行JS
3.执行代码，分两步：
① TS代码 -> JS代码：在当前目录打开终端，输入命令 tsc hello.ts 敲回车。

tsc hello.ts 

② 执行JS：输入命令 node hello.js（注意：后缀为 .js）。


解释：

• tsc hello.ts 会生成一个 hello.js 文件。
• node hello.js 表示执行这个 JS 文件中的代码。

1.4.2 简化执行TS的步骤

问题：每次修改代码后，都要重复执行两个命令才能执行 TS 代码，太繁琐。
执行 TS 代码的两个步骤：

1. tsc hello.ts
2. node hello.js

简化方式：使用 ts-node 包，“直接”在 Node.js 中执行 TS 代码。
安装命令：

npm i –g ts-node

使用方式：

ts-node hello.ts

解释：

• ts-node 包内部偷偷的将 TS -> JS，然后，执行 JS 代码。
• ts-node 包提供了命令 ts-node，用来执行 TS 代码。

现在只需一步：

ts-node hello.ts

1.5 注释和输出语句

1.5.1 注释

注释是对代码的解释说明，用来帮助阅读和理解代码。
注意：注释的内容是不会执行的。
推荐在写代码时，添加代码注释，增加代码的可读性。

例如：
  北冥有鱼，其名为鲲1。
  注1：鲲(kūn)，本指鱼卵，此处借用为表大鱼之名。

注释有两种形式：1 单行注释 2 多行注释。

形式一：单行注释

// 两个斜线，表示单行注释，只能注释这一行内容
// 这是第二行注释
// 快捷键：ctrl + /

形式二：多行注释

/*
	这是多行注释
	可以注释多行内容
	快捷键：shift + alt + a
*/

1.5.2 输出语句

作用：在终端（黑窗口）中打印信息。

Node.js 会执行我们写的代码，为了能够知道代码执行的结果，就需要使用输出语句，将结果打印出来。

console.log('Hello TS')

解释：

• console 表示控制台，在 Node.js 中，指的是终端（黑窗口）。
• 小括号中的内容，表示要打印的信息。