【Visual Studio Code 】使用Visual Studio Code + Node.js搭建TypeScript开发环境
1、准备工作
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并检测是否安装成功
安装Node.js,安装过程基本上是下一步,即可完成,然后在CMD
中运行如下命令:node -v
来查询当前node.js的版本号,然后输出如图所示的结果就表示node.js安装成功,接着可以输入命令:npm -v
来查询当前npm工具的版本号[可能需要时间稍长点],便会输出如图所示的结果表示npm工具可用
设置node.js的npm安装package的全局路径[非必须]
由于npm安装工具默认会跑到C盘[因为npmrc文件中默认的设置为:prefix=${APPDATA}\npm
],这样有时可能会因为系统权限的问题,导致不能正常成功的安装某些工具,那么我们可以先将npm安装的全局路径自定设置一下,比如:我们可以在nodejs的目录下[即你的node.js安装后的根目录]新建两个目录:node_global
,node_cache
,然后找到nodejs
目录下的node_modules/npm
目录下名为npmrc
或者 .npmrc
文件,[为安全,我们可以先将该文件copy一个副本出来进行备份]使用文本编辑器打开,修改并新增如下:prefix
和 cache
分别对应之前新建的目录node_global
和 node_cahce
prefix=C:\Program Files\nodejs\node_global
cache=C:\Program Files\nodejs\node_cache
设置package的环境变量[有必要]
通过步骤3设置后,后续在安装工具的时候,比如安装TypeScript,最终会安装到node_global
中,所以为了后续使用工具命令行,我们可以配置一个环境变量:
首先新建一个NODE_PATH
-> NODE_PATH=D:\EasBuilding\nodejs\node_global
,然后在Path
下新增%NODE_PATH%
查看typescript版本
[这里只是为了说明问题,可不用进行这一步] 打开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 Compiler
如上图所示,下载的TypeScript版本为1.8.10,在官网,该版本为最新稳定版,所以不需要更新,如果我们下载的版本小于这个版本,我们可以使用如下命令来进行更新:npm update -g typescript
安装Visual Studio Code
下载Visual Studio Code安装包并安装
首先按照准备工作里面提供的链接下载对应平台的vscode安装包
我的第一个TypeScript程序
新建一个workspace工作目录
这里我先在桌面上新建一个DemoModules
的目录来存放一些我的Demo Projects,然后选中DemoModules
右键使用 vscode 打开或者打开CMD
,切换到DemoModules
下,然后输入命令:code .
既可以使用 vscode 打开DemoModules
目录。
接着,在该目录下新建一个名为TS_DEMO
的目录:
创建我的第一个typescript文件
在TS_DEMO
下新建一个名为greeter.ts
的文件,并输入如下代码:
class Studer{
fullName:string;
constructor(public firstName,public middleInitial,public lastName){
this.fullName=firstName+' '+middleInitial+' '+lastName;
}
} interface Person{
firstName:string;
lastName:string;
} function greeter(person:Person){
return 'Hello,'+person.firstName+' '+person.lastName;
} var user=new Studer('Jane','M','User'); document.body.innerHTML=greeter(user);
继续在该目录下新建一个index.html
的文件,并在body中引入greeter.js
脚本:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="greeter.js"></script>
</body>
</html>
编译typescript文件
首先在TS_DEMO
目录下创建一个名为tsconfig.json
的文件,可以手动创建该文件,并输入如下代码:
也可以使用命令自动创建这个配置文件,CMD
中切换到TS_DEMO
目录,然后输入命令:tsc -init
即可自动创建
接下来我们继续输入编译命令,编译greeter.ts
;输入指令:tsc -w greeter.ts
, 其中-w
是watch
监控的意思,当typescript文件内容发生改变时会自动进行编译。
我们可以看到,TS_DEMO
目录下多了一个.js
后缀的同名文件,这就是typescript编译后的javascript文件。
最后我们将index.html用Chrome或者Firefox打开看看效果:
注意:
Vs code 编译 Ctrl+Shift+B 出现一下错误,就是typescript的版本不对,更新最新版本或者查看是否安装过多个版本通过环境变量PATH 重新指向。
error TS5007: Cannot resolve referenced file: '.'.
error TS5023: Unknown option 'p'
Use the '--help' flag to see options.
【Visual Studio Code 】使用Visual Studio Code + Node.js搭建TypeScript开发环境的更多相关文章
- 使用Visual Studio Code + Node.js搭建TypeScript开发环境
Visual Studio Code搭建Typescript开发环境 —— 相关文章: http://www.cnblogs.com/sunjie9606/p/5945540.html [注意:这里仅 ...
- 使用Visual Studio Code搭建TypeScript开发环境
使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...
- 使用 VS Code 搭建 TypeScript 开发环境
使用 VS Code 搭建 TypeScript 开发环境 TypeScript 是 JavaScript 的超集,TypeScript 只是增强了 JavaScript 而非改变了 JavaScri ...
- Vs Code搭建 TypeScript 开发环境
一.npm install -g typescript 全局安装TypeScript 二.使用Vs Code打开已创建的文件夹,使用快捷键Ctrl+~启动终端输入命令 tsc --init 创建t ...
- Windows准备Node.js运行与开发环境
如何在Windows环境下搭建Node.js开发环境:1.下载Node.js windows安装版http://www.nodejs.org/download/ 2.正常安装完成后,在系统环境变量已经 ...
- laravel项目中通过nvmw安装node.js和npm 开发环境-- windows版
windows版本安装 此教程执行的时候,网速一定要好.不然可能出现各种错误. 如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ git clone nvmw 直接从 githu ...
- TypeScript开发环境搭建(Visual studio code)
使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...
- Windows下visual studio code搭建golang开发环境
Windows下visual studio code搭建golang开发环境 序幕 其实环境搭建没什么难的,但是遇到一些问题,主要是有些网站资源访问不了(如:golang.org),导致一些包无法安装 ...
- visual studio 2015 搭建python开发环境,python入门到精通[三]
在上一篇博客Windows搭建python开发环境,python入门到精通[一]很多园友提到希望使用visual studio 2013/visual studio 2015 python做demo, ...
随机推荐
- SQL 主机
SQL 主机 SQL 主机 如果您想要您的网站存储数据在数据库并从数据库显示数据,您的 Web 服务器必须能使用 SQL 语言访问数据库系统. 如果您的 Web 服务器托管在互联网服务提供商(ISP, ...
- Notepad++ 两个格式化插件
格式化HTML--Tidy2 本来都可以通过Notepad++中的“插件>Plugin Manager>Show Plugin Manager>Tidy2” 这种方式来安装,不过内地 ...
- 临时表 数据在 内存 转移时间 将160秒的创建临时表时间放入定时任务 不到1秒的求和时间 hadoop 引入Hadoop 分布式计算
SELECT SUM(pv) as pv_t FROM 行 112247817表类型 InnoDB自动递增值 1082428327行格式 Compact索引长度 8.60 GB (9,235,93 ...
- UVA11383 Golden Tiger Claw —— KM算法
题目链接:https://vjudge.net/problem/UVA-11383 题解: 根据KM()算法,标杆满足:l(x) + l(y) >= w(x, y) . 当求完最大权匹配之后,所 ...
- 全局Timestamp管理器 检测js执行时间
随手写了个小工具,主要为了测试不同混淆程度的javascript脚本的加载速度1. [代码]Timestamp.js (function() { if (typeof this.Timestamp = ...
- RMQ(Range Minimum Query)问题(转)
问题描述 RMQ问题是求给定区间中的最值问题.对于长度为n的数列A,回答若干查询RMQ(A, i, j).返回数组A中下标在[i,j]里的最小值的下标. 比如数列 5,8,1,3,6,4,9,5,7 ...
- mac下安装eclipse+CDT
测试文件test.cpp #include <iostream>using namespace std; int main() { cout << "!!!He ...
- bzoj 4521 电话号码
题目大意: 求$[L,R]$中,满足不同时存在4和8且有连续三个一样的个数 思路: 我为什么要记忆化搜索里带-1啊 我可真是个** 直接记忆化搜索记前两位是否有4,8以及是否满足连续 #include ...
- Oracle sql执行计划解析
Oracle sql执行计划解析 https://blog.csdn.net/xybelieve1990/article/details/50562963 Oracle优化器 Oracle的优化器共有 ...
- bzoj 3232 圈地游戏 —— 01分数规划+最小割建图(最大权闭合子图)
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3232 心烦意乱的时候调这道题真是...越调越气,就这样过了一晚上... 今天再认真看看,找出 ...