【TypeScript入门】了解TypeScript的工作流程

走进“前端的未来”TS——了解TS的工作流程

文章简介
主要内容
- 1 TypeScript工作流程
- - 1.1 图示+简单解释
  - 1.2 理顺区分JS与其他语言
- 2 如何用TypeScript运行web
- - 2.1 为项目添加html文件
  - 2.2 用npm高效管理前端项目
  - 2.3 npm项目依赖
summary
下期预告
- 【基础入门】《前端的未来——TypeScript》掌握TS变量声明&了解TS类型简介
- 【基础入门】《前端的未来——TypeScript》认识数字、布尔、字符串类型

文章简介

本文是我在学习TS课程中，对于TS工作流程相关知识的整理。学习TS，我们必须要了解TS是如何工作的，它的工作流程是怎样的。在文章中，我会一步步带着看到本文的小伙伴们了解TS的工作流程。内容详细！值得学习！

主要内容

1 TypeScript工作流程

1.1 图示+简单解释

在这里插入图片描述
简单解释：写好TS代码 => 用tsc编译器编译为JS => 由浏览器调用并执行JS文件

1.2 理顺区分JS与其他语言

JavaScript的名字想必大家一定都很熟悉，但是在后续学习中，可能会碰到很多稀奇古怪的名字。比如ES6，ECMAScript，ES，ES7/8等等。
在这里插入图片描述
这个时候，我们只需要搞清楚这些名词之间的关系就可以了。

JavaScript命名梳理：（也可参照下图）

其实这么多的名词，都是在描述同一个语言——JavaScript。
ECMAScript简称ES，后面的数字是为了区分版本。
JavaScript与Java没有任何关系。
当时发明JavaScript这门语言时，用当时最流行的语言——Java作为命名。

JavaScript版本梳理：
ES3、ES5支持目前所有的主流浏览器，能够在浏览器上无障碍运行。
ES6其实就是ES2015（往后的版本ES7就是ES2016…以此类推ES11就是ES2022）。但是ES6目前在浏览器不支持，但未来一定会支持。（所以ES6的运行也必须要通过Babel来转化为ES5或者ES3）
ES6这个版本可以说是颠覆性的改版，第一次从语言层面上真正开始支持面对对象，同时还吸收了TS的特性，支持const和let两个关键词，并且引入了模块的概念。

ES6相关内容可以参考ECMAScript6专栏的内容。
点击直接进入ECMAScript6专栏

2 如何用TypeScript运行web

2.1 为项目添加html文件

为了让js/ts类型的文件在浏览器中运行，就得在项目中创建html文件。这里命名为index.html
用vs code创建快捷模板——在文件中输入html，选择:5，vs code会自动生成html项目模板。

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入js文件--><script src="../gungun.js"></script>
</head>
<body></body>
</html>

JavaScript部分

let hello = "我来了！"
// 在控制台输出hello的值
console.log(hello)

控制台结果：
在这里插入图片描述
如果现在我们修改输出，将“我来了！”改为“我又来了！”

let hello = "我又来了！"
// 在控制台输出hello的值
console.log(hello)

这时候，我们需要重新在终端编译，输入cmd回车，输入tsc gungun.ts回车，重新编译为js文件。刷新界面之后，控制台输出结果也更新。说明此次编译转换成功！

结果是没错，但是这个过程太痛苦了。对于前端来说，时间就是金钱，效率就是生命。

2.2 用npm高效管理前端项目

我从课程中学到了一种骚操作——如何高效管理前端的项目。

首先，我们要学会用npm管理项目（利用Node.js）
然后在命令行中输入npm init，回答命令行问你的问题（看不懂也没关系回车就行了）

命令框出现这个问题时表示初始化结束。你会神奇地发现，左侧的文件中多了一个文件——package.json

package.json是配置文件，整个项目的配置依赖都放在整个文件当中，所有的配置依赖都在此管理。

在这里插入图片描述

首先，我们来安装几个项目依赖。在命令行输入npm install --save-dev lite-server（lite-server是用于开发环境的一个轻量级服务器）回车等在自动安装…
在这里插入图片描述
安装结束后，在package.json文件中可以发现服务器已经被安装在项目中。

此时项目中多了一个文件夹node_modules，这个项目中存放的是整个项目所依赖的所有第三方依赖系统。

2.3 npm项目依赖

这里稍微展开一下关于npm项目依赖的延伸知识。
一般来说，我们package.json项目中有两个地方是可以配置项目的依赖。第一个是devDenpendencies，另一个就叫做dependencies。

devDenpendencies中的依赖只参与项目的开发，开发完成后上线，并不需要打包到生产环境中，也就是说，它不需要部署到服务器中。
dependencies中的依赖参与项目开发，并且需要在开发完成上线后打包到生产环境中，也就是说，它需要部署到服务器中。
区分devDenpendencies和dependencies的好处：降低网站的大小，压缩用户打开网站的时间。

找到package.json中的script部分，在里面添加一行代码："start" : "lite-server"。添加之后，我们就可以在命令行开启整个服务器了！
在这里插入图片描述

稍微解释一下：整个lite-server服务器，会根据根目录下index的文件自动部署在localhost3000这个url上面。

部署在服务器上有什么好处呢？
当我们在编译完成之后，可以避免再次刷新页面，就可以显示新的代码。

在命令行中输入npm start
在这里插入图片描述
此时，服务器已被打开。

summary

本文主要是对TypeScript的工作流程的介绍和讲解，内容和案例相结合，对于工作流程的了解在TS学习过程中也是不可或缺的一部分。文章内容由本人结合学习笔记和学习课程，并结合个人见解综合整理得出，难免会有错误和不足，希望大家发现后及时向我指出，我会第一时间做出修改和更新。学习的路还很长，感谢陪伴！！