一、TypeScript 初体验

从今天开始，我们来正式学习typescript。首先我们来认识和体验一下typescript，本次学习要解决的问题是：

1. 什么是typescript
2. 什么是JavaScript
3. 怎么理解“TS是JS的超集”
4. 第一个TS文件
5. 怎么使用注释和输出语句

1. TypeScript 概述

​ 在TypeScript 概述这一节，我们要弄清楚JavaScript 是什么 ？TypeScript 是什么 ？TypeScript 相比 JavaScript 的优势是什么？下面我们一个问题一个问题解决。

1.1 什么是JavaScript

​ JavaScript（缩写：JS）是一种运行在客户端（比如：浏览器）中的编程语言。

​ 当应用于浏览器时，为网站提供动态交互特性，让网页“动”起来。比如：页面上的轮播图效果，倒计时效果等等，都使用了JavaScript。

​ 那么JavaScript的运行环境只有浏览器吗？只能运行在前端吗？答案肯定是不。我们的node环境也可以运行JavaScript代码，这使得JavaScript语言也可以运行在后台程序。所以：

​ JavaScript的运行环境：1. 浏览器； 2. Node.js

​ Node.js 让 JavaScript 摆脱了浏览器的束缚，可以实现服务端/桌面端编程等。 也就是说，我们前端开发人员，懂得了JavaScript，也可以独立完成前后端开发，例如：微信小程序、微信小游戏 等等。都是可以用JavaScript完成。

​ 总结：JavaScript 既能运行在 浏览器 中，也可以运行在 Node.js 中，前后端通吃，无所不能。

1.2 TypeScript 是什么

​ TypeScript（简称：TS）是 JavaScript 的超集。这句话可以理解为JS 有的 TS 都有。

​ typescript在JavaScript的基础上添加了类型系统。可以理解为：TypeScript = Type + JavaScript。

​ TypeScript 是微软开发的开源编程语言，设计目标是开发大型应用。 可以在任何浏览器、任何计算机、任何操作系统上运行。

​ 下面我们来看一段typescript和JavaScript，对比一下两者的区别：

// TypeScript 代码：有明确的类型，即 : number （数值类型） 
let age: number = 18 

// JavaScript 代码：无明确的类型 
let age = 18

​ 以上代码中，typescript代码对比JavaScript增加了数据类型的说明。下面我们来详细说明一下，对比JavaScript，typescript有哪些优势。

1.3 TypeScript 相比 JS 的优势

​ 当我们提到typescript，可能会想到：会的人少，工作好找，工资又高，待遇也好。因为它是大型项目必备的知识，如果你想参与到大型项目开发，很多情况下会用到TS，并且，很多人用了TS也不想再用JS了。

​ 相信使用过JavaScript的程序员都曾经遇到过绝大部分这样的报错：类型错误（ Uncaught TypeError ）。我们总会在电脑前问：“我到底又错在哪了？” 这就是JS 的类型系统存在“先天缺陷” 。所以才有了今天的typescript。

​ TypeScript 相比 JavaScript有以下优势：

1. 类型化思维方式，使得开发更加严谨，提前发现错误，减少改 Bug 时间。提前发现错误，对于我们前端开发而言，是很重要的。如果我们可以提前发现一些类型错误，是不是就可以避免绝大部分的错误了呢？

2. 类型系统提高了代码可读性，并使维护和重构代码更加容易。 在前面我们所看到的typescript代码中，很容易就能看出该变量是属于什么数据类型的，这就提高了代码可读性。在开发过程中，需求也会发生改变，需求改变，代码就要改，typescript代码如果改动了，对其他代码有影响的话，typescript会有提示，跟着提示改就可以了。

3. 补充了接口、枚举等开发大型应用时 JS 缺失的功能。

4. Vue 3 源码使用 TS 重写，释放出重要信号：TS 是趋势。

5. Angular 默认支持 TS；React 与 TS 完美配合，是很多大型项目的首选。

所以啊，作为前端工程师，我们应该学习typescript。

2. 开发工具准备

​ 接下来，我们来准备需要用到的开发工具。

2.1 开发工具介绍

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

• 说明：本次讲解的TypeScript 基础知识，使用 Node.js 来运行。

2.2 安装 VSCode

1. 按照步骤引导安装即可。

2. 安装中文汉化插件：Chinese (Simplified) Language Pack for Visual Studio Code

3. 点击右下角弹出的对话框，重启（Restart）VSCode。

2.3 安装 Node.js

1. 按照步骤引导安装即可。

2. 在终端（cmd窗口）中输入：node --version，验证是否安装成功（注意：如果在VSCode打开终端，需要重启VSCode）。

3. 如果打印出版本信息说明安装成功。

2.4 安装解析 TS 的工具包

​ 我们为什么要安装这个工具包？因为Node.js或浏览器，只认识 JS 代码，不认识 TS 代码。 所以我们需要先借助这个工具包，将 TS 代码转化为 JS，然后就可以在 Node.js或浏览器中运行了。

​ 下面我们就来开始安装TS 的工具包。

安装步骤：

1. 打开 VSCode 终端 或 cmd窗口

2. 输入安装命令： npm i -g typescript 敲回车，来安装（注意：需要联网）。

我们来解释以下这个安装命令的含义：

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

3. 第一个 TS 文件

​ 现在，我们可以开始写第一个TS文件了。

3.1 步骤

1. 第一步，我们要先创建ts文件：

   ① 在桌面中创建文件夹：code。

   ② 在文件夹上点击鼠标右键，然后点击 Open With Code（用VSCode打开文件夹）。

   ③ 在 VSCode 中新建ts文件：hello.ts（注意：文件后缀名为 .ts）。

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

   console.log('Hello TS') 
   

我们先停下来思考一个问题：TS 代码能直接在 Node.js 里面运行吗？

我们知道，Node.js只认识 JS 代码，不认识 TS 代码。所以TS 代码不能直接在 Node.js 里面运行。

那么该如何处理呢？

我们可以先将TS代码转换成JS代码，然后再执行。下面我们就来做这件事。

3. 第三步，执行代码，分两步：

   ① TS代码 转换 JS代码：在当前目录打开终端，输入命令 tsc hello.ts 敲回车。

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

   我们观察这个过程，当我们输入命令 tsc hello.ts ，会生成一个 hello.js 文件。

3.2 简化执行TS的步骤

​ 按照以上步骤，我们确实可以编写TS文件并运行它。但是每次修改代码后，都要重复执行两个命令才能执行 TS 代码，太繁琐。

//执行 TS 代码的两个步骤： 
tsc hello.ts 
node hello.js

下面我们讲以下如何简化这个步骤。

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

• 安装命令：npm i –g ts-node。
• 使用方式：ts-node hello.ts。

使用这种简化方式，并不是说TS代码真的可以直接在 Node.js 中执行，而是ts-node 包内部偷偷的将 TS 转换 JS，然后执行 JS 代码。ts-node 包提供了命令 ts-node，用来执行 TS 代码。

​ 现在，我们只需一步：

ts-node hello.ts

4. 注释和输出语句

4.1 注释

​ 什么是注释呢？

​ 注释是对代码的解释说明，用来帮助阅读和理解代码。举个生活中的例子，比如我们在学习文言文时，经常会遇到不知道怎么理解的词汇。这时候书上就会有相对应的解释说明，有了这个解释说明，我们就能更好去理解文言文。同样的，有了注释，我们就能更好的理解代码的含义。

​ 代码中的注释是不会执行的。

​ 我推荐大家写代码的时候尽量多写注释，来增加代码的可读性。因为代码不仅仅是给机器看的，别人也会看。如果你不写注释的话，别人可能看不懂。“程序员最讨厌的事就是别人不写注释！”

​ 说了这么多，注释到底怎么写呢，接下来我们就来讲解：

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

形式一：单行注释

// 两个斜线，表示单行注释，只能注释这一行内容 

// 这是第二行注释 

// 快捷键：ctrl + / 

形式二：多行注释

/*

这是多行注释 

可以注释多行内容 

快捷键：shift + alt + a 

*/

4.2 输出语句

​ 输出语句的作用就是在在终端（黑窗口）中打印信息。

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

console.log('Hello TS') 

​ 我们来解释以下以上代码的含义：

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