javascript typescript 代码对比 javascript与typescript

1. TypeScript 概述

1.1 JavaScript 是什么

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

当应用于浏览器时，为网站提供动态交互特性，让网页“动”起来。

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

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

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

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

1.2 TypeScript 是什么

TypeScript（简称：TS）是 JavaScript 的超集

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

TypeScript 是微软开发的开源编程语言，设计目标是开发大型应用。

可以在任何浏览器、任何计算机、任何操作系统上运行。

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

1.3 TypeScript 相比 JS 的优势

• JS 的类型系统存在“先天缺陷” ，绝大部分错误都是类型错误（ Uncaught TypeError）。
• 优势一：类型化思维方式，使得开发更加严谨，提前发现错误，减少改 Bug 时间。
• 优势二：类型系统提高了代码可读性，并使维护和重构代码更加容易。
• 优势三：补充了接口、枚举等开发大型应用时 JS 缺失的功能。
• Vue 3 源码使用 TS 重写，释放出重要信号：TS 是趋势。
• Angular 默认支持 TS；React 与 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/

2.4 安装解析 TS 的工具包
安装步骤：

1. 打开 VSCode 终端。
2. 输入安装命令： npm i -g typescript 敲回车，来安装（注意：需要联网）。
   typescript：就是用来解析 TS 的工具包。提供了 tsc 命令，实现了
   npm：用来安装前端开发中用到的包，是安装 Node.js 时自动安装的。
   i（install）：表示安装。
   -g（–global）：全局标识，可以在任意目录中使用该工具。