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

一、什么是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的安装、使用、自动编译内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue + typescript + video.js实现 流媒体播放 视频监控功能

    视频才用流媒体,有后台实时返回数据, 要支持flash播放, 所以需安装对应的flash插件.当视频播放时,每间隔3秒向后台发送请求供检测心跳,表明在线收看状态,需要后台持续发送视频数据. 1. yarn add video.js videojs-flash 2. 创建videp.js声明文件 3. 创建video_player.vue组件,供外部调用.源码如下 <script lang="ts"> import { Component, Emit, Prop, Vue }

  • Typescript 中的 interface 和 type 到底有什么区别详解

    interface VS type 大家使用 typescript 总会使用到 interface 和 type,官方规范 稍微说了下两者的区别 An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot. An interface can have multiple merged declarations, but a type

  • 详解TypeScript+Vue 插件 vue-class-component的使用总结

    首先 下载 npm install vue-class-component vue-property-decorator --save-dev 一梭子直接干: 其次,咱来说说它们的区别与联系: vue-property-decorator社区出品:vue-class-component官方出品 vue-class-component提供了Vue.Component等: vue-property-decorator深度依赖了vue-class-component,拓展出了更多操作符:@Prop.@

  • Nuxt项目支持eslint+pritter+typescript的实现

    脚手架安装好nuxt的基本项目 npx create-nuxt-app <项目名>,如:npx create-nuxt-app nuxt-ts,按照提示安装你想要的东西,本次项目预装: Universal模式下koa+PWA+linter+prettier+axios ,默认的项目目录如下: eslint + prettier + vscode 保存自动格式化&修复 本人习惯缩进为4个空格,但是eslint&nuxt生成的项目默认为2个,因此需要更改配置 .editorconf

  • 详解Vue3.0 前的 TypeScript 最佳入门实践

    详解Vue3.0 前的 TypeScript 最佳入门实践

    前言 我个人对更严格类型限制没有积极的看法,毕竟各类转类型的骚写法写习惯了. 然鹅最近的一个项目中,是 TypeScript + Vue ,毛计喇,学之...-真香! 注意此篇标题的"前",本文旨在讲Ts混入框架的使用,不讲Class API 1. 使用官方脚手架构建 npm install -g @vue/cli # OR yarn global add @vue/cli 新的 Vue CLI 工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue cr

  • 一文搞懂TypeScript的安装、使用、自动编译的教程

    一文搞懂TypeScript的安装、使用、自动编译的教程

    1. 初识 TypeScript 上篇文章给大家介绍过TypeScript的安装.使用.自动编译的实现  需要的朋友点击查看. TypeScript 的介绍 TypeScript 是一种由微软开发的开源.跨平台的编程语言.它是 JavaScript 的超集,最终会被编译为 JavaScript 代码. 2012 年 10 月,微软发布了首个公开版本的 TypeScript,2013 年 6 月 19 日,在经历了一个预览版之后微软正式发布了正式版 TypeScript TypeScript 的作

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

    一.什么是TypeScript? 1.TypeScript是一种由微软开发的开源.跨平台的编程语言. 他是JavaScript的超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程,遵循最新的ES5.ES6规范.(TypeScript里边可以直接写ES5.ES6代码) 2.TypeScript扩展了JavaScript语法*,所以在任何现有的JavaScript程序开源运行在TypeScript环境中.TypeScript是为大型应用的开发而设计,最终会编译为JavaScript

  • WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

    WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

    一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g babel-cli 2.当前项目,适用于使用不同babel版本的情况 npm install --save-dev babel-cli 三.Babel基本用法 # 转码结果输出到标准输出 babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 bab

  • 利用angular自动编译andriod APK的绕坑经历分享

    背景 前端架构师使用angular JS作为框架,打包android APK. 程序已经完成,需要使用自动编译功能来检测服务. 下面话不多说了,来一起看看详细的介绍吧 问题 问题一:JDK需要使用1.8,其他版本目前不支持. 问题二:android-sdk安装问题 npm run build:android build失败,提示: -- Please install the Android build tools version 19.1.0 or higher. -- 这个主要是因为andro

  • 详解使用Jenkins自动编译部署web应用

    写在前面 初步接触持续集成自动化过程,本篇主要介绍基于Jenkins实现持续集成的方式,通过案例介绍线上自动编译及部署的配置过程 持续集成 持续集成是一种软件开发实践,即团队开发成员经常集成它们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误. Jenkins Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括: 1.持续的软件版本发布/测试项目. 2.

  • TypeScript使用vscode监视代码编译的过程

    安装 全局安装ts命令 npm install -g typescript 安装结束后运行tsc -v命令 显示版本号表示安装成功 接下来可以使用tsc 文件名称 可以将ts文件转化为js文件 js文件可以引入在html文件中直接使用 监视ts文件 在文件夹中执行 tsc --init 可以生成tsconfig.json文件 打开该文件可以看到 内容如下 { "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to re

  • Eclipse不自动编译java文件的终极解决方法

    Eclipse不自动编译java文件的终极解决方法

    最近我的eclipse经常犯傻,项目中总是有很多,启动项目也是没有启动类.查了下项目中生成的class文件,我靠竟然没有,或者还是以前的.原来是eclipse犯傻了,它没帮我自动编译java文件.一般是如下几个步骤.但是还是不自动编译. 最基本的解决办法--这是前提 然后clean和refresh下项目.如果这样还是不行,用下面的方法吧,终极解决方案...... 1:去除项目中的jre的classpath 2:在将jre的包添加到classpath中来 OK,大功告成!再出现eclipse无法自

  • jsp 自动编译机制详细介绍

    jsp 自动编译机制详细介绍

     jsp 自动编译机制详细介绍 总的来说,Jasper的自动检测实现的机制比较简单,依靠某后台线程不断检测JSP文件与编译后的class文件的最后修改时间是否相同,若相同则认为没有改动,但倘若不同则需要重新编译.实际上由于在Tomcat部署的项目的JSP可能引入了其他页面,或者引入了其他jar包,而且这些资源都可能是远程的资源,所以实际处理会比较复杂,同样要遍历检测这些引入的不同资源是否做了修改. 上图是一个形象的示意图,我们知道Tomcat架构中有四个级别的容器,Engine.Host.Con

  • 使用nodeJs来安装less及编译less文件为css文件的方法

    使用nodeJs来安装less及编译less文件为css文件的方法

    NodeJs 使用nodejs安装less以及编译less文件为css文件 首先下载nodeJs的安装包,按照步骤,安装nodejs. 链接:http://pan.baidu.com/s/1dEsqYB3 密码:bkkh  这个链接里面有nodejs的安装包,大家可以直接下载下来,安装就可以了. 然后cmd打开控制台,检查node是否安装成功.输入node –v,如果输出的是安装包的版本号,则表示安装成功. 接下来就可以安装less了,进入node.js安装目录,通过命令npm install

  • idea热部署且开启自动编译的实现方法

    idea热部署且开启自动编译的实现方法

    最近调试代码需要起服务并修改代码这就导致重复工作,目前是修改服务器配置,即当idea失去焦点时更新类和资源,但是这种只支持在debug模式且是在idea失去焦点才会触发热部署,这就相对加载的慢了.此法的配置方法: Run –>EditConfigguration 如果你sever 选项卡下没有On frame deactivation,那么就需要配置 Deployment 选项卡,点击右边绿色+,选择自己对应的项目,建议选择带 exploded, 这个相当于改 Tomcat 的 CATALINA

随机推荐