TypeScript的安装、使用、自动编译的实现


Posted in Javascript onApril 10, 2020

一、什么是TypeScript?

1、TypeScript是一种由微软开发的开源、跨平台的编程语言。 他是JavaScript的超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程,遵循最新的ES5、ES6规范。(TypeScript里边可以直接写ES5、ES6代码)
2、TypeScript扩展了JavaScript语法*,所以在任何现有的JavaScript程序开源运行在TypeScript环境中。TypeScript是为大型应用的开发而设计,最终会编译为JavaScript代码。
3、最新的Vue、React也可以集成TypeScript,而且谷歌也在大力支持TypeScript的推广,谷歌的angular2.x+就是基于Typescript语法。
4、TypeScript是未来开发的一个标准,一个趋势。

二、TypeScript安装、编译

注意:typescript安装之前必须安装nodejs。

npm install -g typescript
tsc helloworld.ts

1、安装TypeScript

使用命令进行安装:npm install -g typescript

typescript文件后缀名是以。ts结尾的,浏览器是无法解析 . ts文件的,也无法解析ES6代码,所以需要编译为浏览器可以解析的ES5的代码。

2、解析ts文件

将ts文件编译为可运行的js文件

在你放代码的文件夹内新建一个 index.ts 文件,将以下代码复制到 index.ts 文件中:

console.log("hello world")

命令行cd到 index.ts 所属文件夹下,运行 tsc index.ts。可以看到该文件夹下生成一个index.js 文件,内容与index.ts 内容一样。

但是 ts 代码,每次开发都要运行命令重新编译,比较麻烦,如果可以一边写代码一边编译最好,那么就需要自动编译了。

3、自动编译

下面介绍VScode、HBuilder X开发工具如何配置自动编译。

VScode自动编译.ts文件的配置:

1、在项目根目录下运行命令 tsc?init ,生成tsconfig.json配置文件。打开该文件修改: outDir 注释去掉,值为编译文件生成的目录。
2、点击菜单 任务-运行任务 选择 tsc:监视-tsconfig.json 然后就可以自动生成代码

修改文件index.js:

保存,就可以看到生成了index.js文件,内容如下:

HBuilder X自动编译.ts文件的配置:

1、菜单栏:工具?插件安装;
2、找到typescript插件,点击安装;
3、手动编译:在ts文件名上,右键?外部命令/插件?typescript?编译TypeScript,即可生产对应的js文件;
4、自动编译配置:在ts文件名上,右键?外部命令/插件?typescript?插件配置,找到以下内容:

//是否在保存时自动触发。如配为true,就会在保存时自动触发
"onDidSaveExecution": false

将 false 值 改为 true

5、重新启动HBuilder,再次修改保存,就是生成对应的js文件。

总结

到此这篇关于TypeScript的安装、使用、自动编译的文章就介绍到这了,更多相关TypeScript的安装、使用、自动编译内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
node中koa中间件机制详解
Aug 22 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
layui表格分页 记录勾选的实例
Sep 02 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 #Javascript
javascript实现贪吃蛇经典游戏
Apr 10 #Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 #Javascript
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
Apr 09 #Javascript
vue中的过滤器及其时间格式化问题
Apr 09 #Javascript
微信小程序保存图片到相册权限设置
Apr 09 #Javascript
微信小程序仿通讯录功能
Apr 09 #Javascript
You might like
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
python版学生管理系统
2018/01/10 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
管理科学大学生求职信
2013/11/13 职场文书
秘书岗位职责
2013/11/18 职场文书
大学生如何写自荐信
2014/01/08 职场文书
六一亲子活动总结
2014/07/01 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
高一英语教学反思
2016/03/03 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
详解Flask开发技巧之异常处理
2021/06/15 Python