摘要：简介本文将简述如何使用开发工具来搭建一套的开发环境，主要的目的是落地留痕，同时也希望能对一些刚入门的小伙伴有一定的参考价值。安德斯海尔斯伯格，的首席架构师，已工作于的开发。为大型应用之开发而设计，可以编译成来确保兼容性。
简介
本文将简述如何使用vscode [Visual Studio Code]开发工具来搭建一套TypeScript的开发环境，主要的目的是落地留痕，同时也希望能对一些刚入门的小伙伴有一定的参考价值。[注意：Windows，Linux，OS X在操作上基本上一致，只是工具的安装有所不同，这里仅以Windows平台作为本次教程的演示环境]
TypeScript是一种由微软开发的自由和开源的编程语言，通常我们认为其是JavaScript的一个超集，且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格，C#的首席架构师，已工作于TypeScript的开发。
TypeScript为大型应用之开发而设计，可以编译成javascript来确保兼容性。
Node.js Node.js - Official Site
Visual Studio Code Visual Studio Code - Official Site
安装Node.js一方面提供一个开发的Runtime；另一方面提供的npm工具，我们可以利用这个工具来安装TypeScript。
下载Node.js安装包首先按照准备工作里面提供的链接下载对应平台的Node.js安装包
安装Node.js，安装过程基本上是下一步，即可完成，然后在CMD中运行如下命令：node -v 来查询当前node.js的版本号，然后输出如图所示的结果就表示node.js安装成功，接着可以输入命令：npm -v 来查询当前npm工具的版本号[可能需要时间稍长点]，便会输出如图所示的结果表示npm工具可用
由于npm安装工具默认会跑到C盘[因为npmrc文件中默认的设置为：prefix=${APPDATA}
pm]，这样有时可能会因为系统权限的问题，导致不能正常成功的安装某些工具，那么我们可以先将npm安装的全局路径自定设置一下，比如：我们可以在nodejs的目录下[即你的node.js安装后的根目录]新建两个目录：node_global，node_cache，然后找到nodejs目录下的node_modules/npm目录下名为npmrc 或者 .npmrc文件，[为安全，我们可以先将该文件copy一个副本出来进行备份]使用文本编辑器打开，修改并新增如下：prefix 和 cache 分别对应之前新建的目录node_global 和 node_cahce
通过步骤3设置后，后续在安装工具的时候，比如安装TypeScript，最终会安装到node_global中，所以为了后续使用工具命令行，我们可以配置一个环境变量：
首先新建一个NODE_PATH -> NODE_PATH=D:EasBuilding
odejs
ode_global，然后在Path下新增%NODE_PATH%
[这里只是为了说明问题，可不用进行这一步] 打开CMD，运行命令：tsc -v，这里不能正常像是版本号，这是由于这里还没有安装typescript，所以我们接下来就先安装TypeScript Compiler
安装TypeScript 安装TypeScript Compiler在前面安装好Node.js后，我们可以直接使用npm工具来安装TypeScript，这个TypeScript的Package其实也是一个Compiler，我们可以通过这个Complier将typescript编译成javascript。打开命令提示符CMD(或其他终端Terminal)，输入指令：npm install -g typescript，稍等片刻即可完成TypeScript Compiler的安装。
如上图所示，下载的TypeScript版本为1.8.10，在官网，该版本为最新稳定版，所以不需要更新，如果我们下载的版本小于这个版本，我们可以使用如下命令来进行更新：npm update -g typescript
首先按照准备工作里面提供的链接下载对应平台的vscode安装包
这里我先在桌面上新建一个DemoModules的目录来存放一些我的Demo Projects，然后选中DemoModules右键使用 vscode 打开或者打开CMD，切换到DemoModules下，然后输入命令：code . 既可以使用 vscode 打开DemoModules目录。
接着，在该目录下新建一个名为TS_DEMO的目录：
在TS_DEMO下新建一个名为greeter.ts的文件，并输入如下代码：
我们发现这就是一个简单的javascript code，那么我继续改造一下这个代码，弄得稍微复杂点，加入接口interface和类class：
继续在该目录下新建一个index.html的文件，并在body中引入greeter.js脚本：
首先在TS_DEMO目录下创建一个名为tsconfig.json的文件，可以手动创建该文件，并输入如下代码：
也可以使用命令自动创建这个配置文件，CMD中切换到TS_DEMO目录，然后输入命令：tsc -init 即可自动创建
接下来我们继续输入编译命令，编译greeter.ts；输入指令：tsc -w greeter.ts, 其中-w是watch监控的意思，当typescript文件内容发生改变时会自动进行编译。
我们可以看到，TS_DEMO目录下多了一个.js后缀的同名文件，这就是typescript编译后的javascript文件。
同时我们还可以更改tsconfig.json中的target属性，调整编译出来的javascript版本
最后我们将index.html用Chrome或者Firefox打开看看效果：
http://www.open-open.com/lib/...
https://www.typescriptlang.or...
https://code.visualstudio.com...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/90833.html
摘要：分享嘉宾是来自微软云计算事业部的高级软件开发工程师刘鹏。是微软开源的一款开发工具，它针对做了许多编译和命令上的支持。今天主要向大家介绍一下微软去年推出的一个，以及对的一些支持。年他加入微软，从事开发的工作。 本文是数人云分布式架构的开源组件大选Meetup的实录分享。分享嘉宾是来自微软云计算事业部的高级软件开发工程师刘鹏。Visual Studio Code是微软开源的一款开发工具，它...
摘要：在这个编辑器中，和是其中排名靠前的两个。是一个免费的轻量级编辑器和，用于和开发。对于免费的代码编辑器来说，是一个很好的选择。可以安装两个命令行实用程序，用于从启动编辑器，用于管理的软件包。 对于JavaScript程序员来说，目前有很多很棒的工具可供选择。本文将会讨论10个优秀的支持javascript，HTML5和CSS开发，并且可以使用Markdown进行文档编写的文本编辑器。为什...
摘要：菜鸟教程框架中文手册入门目标使用搭建通过对数据增删查改没了纯粹占行用的拜 后端API入门学习指北 了解一下一下概念. RESTful API标准] 所有的API都遵循[RESTful API标准]. 建议大家都简单了解一下HTTP协议和RESTful API相关资料. 阮一峰:理解RESTful架构 阮一峰:RESTful API 设计指南 RESTful API指南 依赖注入 D...
摘要：菜鸟教程框架中文手册入门目标使用搭建通过对数据增删查改没了纯粹占行用的拜 后端API入门学习指北 了解一下一下概念. RESTful API标准] 所有的API都遵循[RESTful API标准]. 建议大家都简单了解一下HTTP协议和RESTful API相关资料. 阮一峰:理解RESTful架构 阮一峰:RESTful API 设计指南 RESTful API指南 依赖注入 D...
摘要：菜鸟教程框架中文手册入门目标使用搭建通过对数据增删查改没了纯粹占行用的拜 后端API入门学习指北 了解一下一下概念. RESTful API标准] 所有的API都遵循[RESTful API标准]. 建议大家都简单了解一下HTTP协议和RESTful API相关资料. 阮一峰:理解RESTful架构 阮一峰:RESTful API 设计指南 RESTful API指南 依赖注入 D...
阅读 2033·2021-11-18 10:02
阅读 1726·2021-10-13 09:40
阅读 2823·2021-09-07 10:07
阅读 1924·2021-09-04 16:48
阅读 859·2019-08-30 13:18
阅读 2347·2019-08-29 14:03
阅读 2760·2019-08-29 12:54
阅读 3026·2019-08-26 11:41
