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 代码的两个步骤:
- tsc hello.ts
- 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 中,指的是终端(黑窗口)。
- 小括号中的内容,表示要打印的信息。