• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Typescript安装和编译,以及VSCode开发工具的相关配置

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

Typescript安装和编译

  1. 安装npm:Typescript可以用npm安装, 去nodejs中文网站下载安装node.js,目的是下载安装额node.js包管理工具npm(安装好node.js默认就安装了npm).打开终端查看是否安装完成:node -v 查看 node 版本, npm -v 查看 npm版本;(查到版本说明已经安装好了)
  2. 安装TypeScript : 全局安装TypeScript执行命令行:npm install typescript -g;安装完成后通过tsc -v查看版本号;
  3. 将ts文件编译成js文件: 创建一个ts文件,cdts文件的根目录如cd /Users/xxx/Desktop/TS/day1,然后执行tsc xxx.ts命令会将ts文件编译成同样名称的js文件;(ts文件是不能直接调用的,必须编译成js文件).

Typescript 开发工具VSCode自动编译ts文件

  • 上面每次将ts文件编译为js都需要通过命令行,这样很麻烦;vscode是支持编写ts代码的开发工具,我们可以配置相关环境,就可以达到边写ts边转为js文件(配置好后保存时就会转为js文件);
  • 具体步骤:
    1. 创建配置文件: 打开终端 cdts文件的根目录,然后执行tsc --init,会生成一个xxxconfig.json的一个json配置文件,里面是一个对象的json;里面有一个outDir的key是用来配置编译后的js文件输出位置,默认是"./"即当前ts文件的根目录.可以改为"outDir": "./js",,这样生成编译成js时会在ts的根目录生成一个js文件夹用于存放编译后的js文件(路径是相对于ts文件的根目录的相对路径,自己看需要配置);

    2. 设置监听配置文件: 一定要将整个项目文件用vscode打开,即File->Open-文件,然后选择Terminal->Run Build Task->tsc:watch-xxxconfig.json,这时就会编译生成对应的js文件;

    3. 创建ts文件保存就自动生成js文件:上面配置好以后,不管是更改原来ts文件的内容,还是在ts根目录创建新的ts文件,然后点击保存后,会更新js内容或生成新的js文件;引入生成的js文件到html中,就可可以进行js学习了.

      注意:有时候点击保存ts文件并不能及时生成或更新对应的js文件,这时候再执行一下步骤2 ,或者退出后再执行一次步骤2;(步骤二一般只需要执行一次就行了).


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
nodejs、npm、typescript、angular-cli安装发布时间:2022-07-18
下一篇:
TypeScript(类—继承—多态)发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap