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进阶教程(第四课第一部分)
Apr 05 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
JavaScript运算符小结
Jun 03 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
es6函数之尾调用优化实例分析
Apr 25 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
php 读取文件乱码问题
2010/02/20 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
jQuery select控制插件
2009/08/17 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
vue实现分页组件
2020/06/16 Javascript
从零学Python之入门(三)序列
2014/05/25 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
Python多线程扫描端口代码示例
2018/02/09 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
大学生饮食配送创业计划书
2014/01/04 职场文书
预备党员转正考核材料
2014/06/03 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers