走进“前端的未来”TS——了解TS的工作流程
文章简介
本文是我在学习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学习过程中也是不可或缺的一部分。文章内容由本人结合学习笔记和学习课程，并结合个人见解综合整理得出，难免会有错误和不足，希望大家发现后及时向我指出，我会第一时间做出修改和更新。学习的路还很长，感谢陪伴！！
下期预告
下期将进入TS正式的语法学习！
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
