typescript-介绍&安装&开发工具
<p>引言：</p><p> 既然有了JavaScript，为什么还需要typescript呢？两者有什么不同呢？</p>
<h1>一：介绍</h1>
<h1>一：typeScript</h1>
<h2>1：JavaScript</h2>
<p><span style="font-size: 16px"> JavaScript的产生历程这里就不详细说了，我们说说关键点。</span></p>
<p><span style="font-size: 16px"> 1999年12月ECMAScript发布第三标准版本后，接下来10年就不行了。直到2005年借助ajax，JavaScript得以复兴。</span></p>
<p><span style="font-size: 16px"> 2009年12月ECMAScript 5发布。随后2012年，开始流行。</span></p>
<p><span style="font-size: 16px"> 2015年，ECMAScript 6发布。</span></p>
<h2>2：typescript出现的原因</h2>
<p><span style="font-size: 16px"> （1）JavaScript大型web应用容易出现失控，难以驾驭。</span></p>
<p><span style="font-size: 16px"> （2）而类似 CoffeeScript 和 Script# 语言难以使用JavaScript的语言特性。</span></p>
<p><span style="font-size: 16px"> （3）微软认为JavaScript 只是一门脚本语言，设计理念简单，缺乏对类和模块的支持，并非真正用于大型web应用。</span></p>
<h2>3：typescript 的特点</h2>
<p><span style="font-size: 16px"> （1）免费开源</span></p>
<p><span style="font-size: 16px"> （2）基于ECMAScript进行扩展，是 JavaScript的超集。</span></p>
<p><span style="font-size: 16px"> （3）添加可选静态类型、类、模块</span></p>
<p><span style="font-size: 16px"> （4）可编译为 JavaScript</span></p>
<p><span style="font-size: 16px"> （5）跨平台，支持所有浏览器、主机和操作系统。</span></p>
<p>下图可以看到typescript与es5、es6的关系</p>
<p><span style="font-size: 16px"><img src="https://img2018.cnblogs.com/blog/1451394/201905/1451394-20190503122535416-431309717.png" alt="" width="218" height="215"><span style="font-size: 18pt"> </span></span></p>
<h1>二：环境准备</h1>
<h2>1：安装node.js</h2>
<p>请先安装nodejs，配置淘宝源</p>
<p> 前端-Node.js-解释器软件包的安装与介绍 </p>
<p> 淘宝源配置</p>
<h2>2：npm</h2>
<p> node.js的包管理工具，不仅仅承接Node生态的包管理，也承接了JavaScript的包管理工作。安装node.js时，已经把npm捆绑安装了。</p>
<p> npm有三个不同部分组成：网站、注册表、CLI。网站是用户发现软件的主要工具。注册表是一个关于软件包的大型数据库，而CLI则告诉开发者如何在注册表上发布软件包或下载软件包。</p>
<h2>3：yarn</h2>
<p><span style="font-size: 16px"> yarn是Facebook、Google、Exponent和Tilde 共同开发的一款 新JavaScript 包管理工具。yarn并没有试图取代npm，yarn同样是从npm注册源获取模块的CLI客户端。它存在的目的是为了解决npm面临的少数问题。比如依赖版本的锁定、并行安装以及文案输出等。当然npm本身也在积极解决这些问题。</span></p>
<p><span style="font-size: 16px"> 安装：npm install -g yarn （推荐使用Yarn官方推荐方式安装）</span></p>
<h2>4：typescript 的安装</h2>
<p> npm install -g typescript</p>
<p> npm install -g ts-node （ts-node：typescript编译过程，提供直接运行typescript代码的能力）</p>
<p> </p>
<h2>5：Visual Studio Code 工具的安装</h2>
<p> 这款IDE 非常适合 typescript</p>
<p> </p>
<h1>三：开发工具的配置</h1>
<h2>1：ts文件的使用--手动编译</h2>
<p>写一个ts文件，需要编译成js文件使用</p>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">E:\ruby\代码>tsc hello.ts
</pre>
</div>
<p> <img src="https://img2018.cnblogs.com/blog/1451394/201905/1451394-20190504113312261-1522688832.png" alt="" width="163" height="97"></p>
<h2>2：开发工具VScode --自动编译ts文件</h2>
<h3>第一步：创建tsconfig.json文件（命令：tsc --init生成配置文件）</h3>
<p>先打开对应的文件夹</p>
<p> <img src="https://img2018.cnblogs.com/blog/1451394/201905/1451394-20190504115222645-65385717.png" alt="" width="254" height="192"></p>
<p>在对应的文件夹中生成json配置文件</p>
<p> <img src="https://img2018.cnblogs.com/blog/1451394/201905/1451394-20190504115537575-155305507.png" alt=""></p>
<p>修改配置文件</p>
<p> <img src="https://img2018.cnblogs.com/blog/1451394/201905/1451394-20190504115835624-915492984.png" alt="" width="259" height="248"></p>
<p> </p>
<h3>第二步：菜单：任务--》运行任务，点击tsc监视 -tsconfig.json。然后就可以<span style="color: rgba(255, 0, 0, 1)"><strong>自动</strong></span>编译生成js代码</h3>
<p> <img src="https://img2018.cnblogs.com/blog/1451394/201905/1451394-20190504120047325-2004863316.png" alt=""></p>
<p> </p>
<p>如果你想执行代码：</p>
<p> <img src="https://img2018.cnblogs.com/blog/1451394/201906/1451394-20190627224508894-1160254706.png" alt=""></p>
<p> </p>
<h2>3：开发工具Hbuild --自动编译ts文件</h2>
<p>安装插件</p>
<p> <img src="https://img2018.cnblogs.com/blog/1451394/201905/1451394-20190504122322267-1059042279.png" alt="" width="331" height="213"></p>
<p> <img src="https://img2018.cnblogs.com/blog/1451394/201905/1451394-20190504122429656-331704807.png" alt="" width="236" height="240"></p>
<p> <img src="https://img2018.cnblogs.com/blog/1451394/201905/1451394-20190504122545332-2135786378.png" alt="" width="307" height="257"></p>
<p> 配置</p>
<p> <img src="https://img2018.cnblogs.com/blog/1451394/201905/1451394-20190504122750857-1973516052.png" alt="" width="381" height="359"></p>
<p> </p>
<p> <img src="https://img2018.cnblogs.com/blog/1451394/201905/1451394-20190504123000584-2084237941.png" alt="" width="397" height="429"></p>
<p> </p>
<hr>
<p> </p>
<p>资料：</p>
<p> 视频教程</p>
<p> https://ts.xcatliu.com/（不错的网络书籍）</p>
<p> W3school</p>
<p> 菜鸟教程</p>
<p> 官网</p>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
或许你没有发现，你认真学习的样子总是最美的<br><br>
来源：https://www.cnblogs.com/lilz/p/10804776.html
頁:
[1]