TypeScript 初体验

1. TypeScript 概述

• JavaScript 是什么
• TypeScript 是什么
• TypeScript 相比 JavaScript 的优势

1.1 JavaScript 是什么

 
 

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

Node.js 让 JavaScript 摆脱了浏览器的束缚，可以实现服务端/桌面端编程等。

其他： 微信小程序、微信小游戏 等等。

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

 

 1.2 TypeScript 是什么

TypeScript（简称：TS）是 JavaScript 的超集（JS 有的 TS 都有）。

TypeScript = Type + JavaScript（为 JS 添加了类型系统）。

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

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

1.3 TypeScript 相比 JS 的优势

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

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

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. 在终端（黑窗口）中输入：node --version，验证是否安装成功（注意：需要重启VSCode）。

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

 

 

2.4 安装解析 TS 的工具包

问题：为什么要安装这个工具包？

答案：

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

 安装步骤：

1. 打开 VSCode 终端。

2. 输入安装命令：

• npm i -g typescript 敲回车，来安装（注意：需要联网）。
• typescript：就是用来解析 TS 的工具包。提供了 tsc 命令，实现了 TS -> JS 的转化。

• npm：用来安装前端开发中用到的包，是安装 Node.js 时自动安装的

• i（install）：表示安装。

• -g（--global）：全局标识，可以在任意目录中使用该工具。

 

3. 第一个 TS 文件

3.1 步骤

1. 创建ts文件：

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

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

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

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

console.log('Hello TS')

 

问题1：TS 代码能直接在 Node.js 里面运行吗？不能

问题2：该如何处理呢？

1 TS代码 -> JS代码 
2 执行JS

 3. 执行代码，分两步：

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

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

解释：

 tsc hello.ts 会生成一个 hello.js 文件。

 node hello.js 表示执行这个 JS 文件中的代码。

3.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

4. 注释和输出语句

4.1 注释

注释是对代码的解释说明，用来帮助阅读和理解代码。

注意：注释的内容是不会执行的。

推荐在写代码时，添加代码注释，增加代码的可读性。

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

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

形式一：单行注释

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

形式二：多行注释

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

4.2 输出语句

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

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

console.log('Hello TS')

解释：

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

 

---

黑马前端专栏干货多多，关注再学，好方便~

2022年前端学习路线图：课程、源码、笔记，技术栈 另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~