typescript安装及如何编译运行

typescript环境搭建

首先确保你的电脑里已经有了node,如果没有的话请先安装node,点击此链接地址安装node
页面如下,选择适合自己电脑的版本进行安装即可。已经安装node了那么请跳过此部分介绍,往下看。
在这里插入图片描述
检查Node.js 安装是否成功:
快捷键 win+R 打开运行面板,输入命令 cmd ,打开命令窗口 输入命令:node -v 查看Node.js版本号,如果看到版本号代表安装成功了,若没有则表示安装不成功
在这里插入图片描述
在这里插入图片描述

安装typescript

刚才的窗口中,输入npm install typescript -g 进行全局安装。等待安装完成。
检查typescript是否安装成功
刚才的窗口中,输入tsc -v,看到版本号就安装成功啦
在这里插入图片描述

typescript编译运行

1.新建一个hello.ts文件,里面内容如下:
在这里插入图片描述
2.找到文件所在的位置,在此处按住shift键并且单击鼠标右键会出现在此处打开powshell窗口,单击这一选项,如图:
在这里插入图片描述
在这里插入图片描述
看到这个窗口后输入 tsc hello.js
在这里插入图片描述
此时该目录下会出现一个编译生成的hello.js文件,ts文件编译完成了,让我们打开新生成的hello.js文件看一看吧
在这里插入图片描述
每次写完ts文件都要输入一次命令是不是很麻烦呢,能不能保存文件时就自动编译运行ts文件呢,让我们来看看如何实现的吧~
使用IDE,以vscode为例,在如图位置打开powershell—cmd—回车—tsc -init 或cmd打开当前目录下输入tsc -init,回车,会生成tsconfig.json 文件
在这里插入图片描述
快速修改配置,删掉原来的代码,粘贴如下代码即可:

{
  "compilerOptions": {
   "target": "es5",
   "noImplicitAny": false,
   "module": "amd",
   "removeComments": false,
   "sourceMap": false,
   "outDir": "js"//你要生成js的目录
  }
}

在这里插入图片描述
vscode–> 终端–>运行任务 选择tsc:监视-tsconfig.json 文件,然后会生成一个js文件夹,编译后的hello.js就在这个目录下。
在这里插入图片描述
这样以后对hello.ts文件进行修改,保存后hello.js会自动更新啦,是不是方便了很多呢。如图:
在这里插入图片描述
在这里插入图片描述
若您需要引用、转载,请注明来源及原文链接哦~ ()。

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值