TypeScript环境安装，以及配置idea开发环境
<h2> 安装前准备</h2><p> </p>
<p> 安装typescript需要用到npm管理工具，而npm是随同Node.js一起安装的包管理工具，所以要先安装Node</p>
<p> 1、前往Node官网下载最新版安装包：http://nodejs.cn/download/，双击运行</p>
<p> 2、选择安装模式的时候我们只选 <strong>npm package manager </strong>就可以了，安装好后打开cmd，输入node -v、npm -v检查一下版本号</p>
<p> <img src="https://img2018.cnblogs.com/blog/1353055/201907/1353055-20190723151137543-505212273.png" alt=""></p>
<p> 出现对应的版本号说明Node安装成功，我们只安装了npm管理工具</p>
<p> </p>
<h2> 开始安装</h2>
<p> </p>
<p> 安装好npm工具后打开cmd，使用<strong> <span class="pln">npm install <span class="pun">-<span class="pln">g typescript </span></span></span></strong><span class="pln"><span class="pun"><span class="pln">命令安装typescript </span></span></span></p>
<p><span class="pln"><span class="pun"><span class="pln"><img src="https://img2018.cnblogs.com/blog/1353055/201907/1353055-20190723151448611-1117067875.png" alt=""></span></span></span></p>
<p> 七百多秒后...</p>
<p><span class="pln"><span class="pun"><span class="pln"><img src="https://img2018.cnblogs.com/blog/1353055/201907/1353055-20190723151417808-41518818.png" alt=""></span></span></span></p>
<p> 使用 <strong>tsc -v </strong>命令检查一下版本号</p>
<p><img src="https://img2018.cnblogs.com/blog/1353055/201907/1353055-20190723151559931-148484833.png" alt=""></p>
<p> 显示对应版本号说明安装成功</p>
<p> </p>
<h2> 配置idea</h2>
<p> </p>
<p> 打开setting，设置 Languages & Frameworks > TypeScript</p>
<p> Node interpreter，选择我们刚刚安装的node路径下面的node.exe</p>
<p> TypeScript，选择前面npm安装好的typescript，路径如下</p>
<p><img src="https://img2018.cnblogs.com/blog/1353055/201908/1353055-20190823103530087-2059779003.png" alt=""></p>
<p> PS：如果不想每次改完代码都要自己去手动编译，可以勾选自动编译</p>
<p> </p>
<p> 新建一个test.ts文件进行测试</p>
<p> <img src="https://img2018.cnblogs.com/blog/1353055/201907/1353055-20190723153514466-616413055.png" alt=""></p>
<div class="cnblogs_code">
<pre>let message: string = "Hello World"<span style="color: rgba(0, 0, 0, 1)">;
console.log(message);</span></pre>
</div>
<p> 当我们打开.ts文件时，在下方会出现TypeScript工具栏，点击小锤子编译</p>
<p><img src="https://img2018.cnblogs.com/blog/1353055/201907/1353055-20190723153707048-1611115301.png" alt=""></p>
<p> 编译后就会多一个test.js</p>
<p><img src="https://img2018.cnblogs.com/blog/1353055/201907/1353055-20190723153415132-958365095.png" alt=""></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> message = "Hello World"<span style="color: rgba(0, 0, 0, 1)">;
console.log(message);</span></pre>
</div>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
<div>
<h3>版权声明</h3>
<div>作者：huanzi-qch</div>
<div>出处：https://www.cnblogs.com/huanzi-qch</div>
<div>若标题中有“转载”字样，则本文版权归原作者所有。若无转载字样，本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利.</div>
</div><br/>
<div>
<h3><span style="color: #4f84b3;cursor: pointer;" onclick="window.open('https://huanzi-qch.github.io/file-server/ad/adservice.html', '_blank')" title="AD广告位服务说明">AD广告位</span>（长期招租，如有需要请私信）</h3>
【阿里云】阿里云最全的优惠活动聚集地！<br/>
【腾讯云】腾讯云当前最新优惠活动专区！<br/>
<br/>
</div>
<div>
<h3>捐献、打赏</h3>
<div><span style="color: red">请注意：</span>相应的资金支持能更好的持续开源和创作，如果喜欢这篇文章，请随意打赏！</div>
<div style="text-align: center;">
<div style="
float: left;
margin-left: 200px;
">
<img style="width: 100px;" src="https://huanzi-qch.github.io/file-server/images/zhifubao.png"/>
<p>支付宝</p>
</div>
<div>
<img style="width: 100px;" src="https://huanzi-qch.github.io/file-server/images/weixin.png"/>
<p>微信</p>
</div>
</div>
</div><br/>
<div>
<h3>交流群</h3>
<div style="text-align: center;">
有事请加群，有问题进群大家一起交流！<br/>
<img style="width: 300px;" src="https://huanzi-qch.github.io/file-server/images/qq.png"/>
</div>
</div><br/><br><br>
来源：https://www.cnblogs.com/huanzi-qch/p/11232302.html
頁:
[1]