打造TypeScript的Visual Studio Code开发环境
打造TypeScript的Visual Studio Code开发环境
本文转自:https://zhuanlan.zhihu.com/p/21611724
作者: 2gua
TypeScript是由微软大神Anders Hejlsberg(安德斯·海尔斯伯格,丹麦人,Turbo Pascal编译器的主要作者,Delphi、C#开发领导者,同时也是.NET奠基人之一)领衔开发的。
TypeScript可谓一门语言,其主要特性有:
- 兼容 ECMAScript 2015(ES6)规范,可选择编译成ES6或ES5规范的JavaScript代码(ECMAScript 3及以上版本);
- 面向对象,并拥有一些函数式特性;
- 类型语言;
- 实现了注解、泛型等特性;
- 适配大型App构建。
这些特性非常吸引我,特别是 Anders Hejlsberg是我的四位“偶像”之一(其他三位分别是 Linus Torvalds、 Eric Raymond、 Dave Thomas——知名Ruby/Rails程序员、作家,现在喜欢上了Elixir),这更是提高了TypeScript在我心中的颜值。不少人对此类最 终编译成JavaScript的语言不感冒,恰好ES6正式发布后增加了许多特性,让他们更是觉得此类语言是鸡肋。但只凭 TypeScript的品质及某些独有特性如泛型、注解,就有其存在的极大价值,况且著名框架Angular 2就是使用TypeScript开发的!
工欲善其事,必先利其器,除了一门语言是内力,还需有称心的利刃为兵器。好马配好鞍——我觉得TypeScript的最佳开发工具是Visual Studio Code——同属微软出品的优秀编辑器,作为一家公司的两个利器,其搭配使用时浑然天成。最重要的是,微软当下拥抱开源的力度是越来越 大,TypeScript与VS Code都是开源的。同时,VS Code的代码提示、片段及调试功能也非常棒!
本文将详细阐述TypeScript与VS Code相结合的开发环境打造之道,为后续的学习提供先决条件。
先总结一下TypeScript开发环境用到的各种工具:
- Node——通过npm安装TypeScript及大量依赖包。从https://nodejs.org/下载并安装它;如果安装各种包不方便,可以将安装源改为国内镜像,具体方案网络上已经有很多了,可供参考;
- VS Code——从 https://code.visualstudio.com/ 下载并安装它;
- TypeScript——TypeScript语言,后面通过npm安装;
- concurrently——Node包,同时执行命令用。 后面通过npm安装;
- lite-server——Node包,轻量级的Node开发服务器。 后面通过npm安装;
先按上述列表安装Node与VS Code,接下来我们开始安装其余工具。
1 .2 安装及开发环境配置
1.2.1 安装TypeScript
建议先将TypeScript安装成全局包方式,打开终端或命令行窗口,执行以下命令安装TypeScript:
npm install -g typescript
本文写作时TypeScript的版本为1.8.10。
1.2.2 安装其他Node包
新建一个目录,如:hello-typescript,用刚安装好的VS Code编辑名为package.json的文件,保存于hello-typescript目录中。
package.json是包描述文件。其中列出了应用所需的各种依赖包、待执行脚本,以及其他一些设置内容。编辑其内容为:
{"name": "hello-typescript","version": "0.0.1","description": "Learning TypeScript.","scripts": {"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"","lite": "lite-server","tsc": "tsc","tsc:w": "tsc -w"},"author": "2gua","license": "ISC","dependencies": {},"devDependencies": {"lite-server": "^2.2.0","concurrently": "^2.0.0"}
}
package.json文件主要说明:
"name"——包的名称
"version"——版本
"description"——App描述,方便搜索
"scripts"——可执行的脚本
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\""——同时执行的命令
"lite": "lite-server"——启动lite-server服务器
"tsc": "tsc"——执行一次TypeScript编译
"tsc:w": "tsc -w"——以监控模式运行TypeScript编译器。后台始终保持进程。一旦TypeScript文件变化即会重编译
"dependencies"——生产环境中需要的依赖包
"devDependencies"——开发中要使用的安装包
关于package.json的配置可以参考:这里。
1.2.3 配置VS Code的TypeScript开发环境
VS Code提供了很好的TypeScript开发特性支持。
首先,打开刚才创建的目录hello-typescript:
可以看到当前VS Code的资源管理器显示如下:
编辑示例代码
先来编辑我们的第一个TypeScript程序hello-typescript.ts,放在根目录(指hello-typescript,下同)下。
看看,VS Code对TypeScript的支持是非常到位的。
hello-typescript.ts代码文件的内容如下:
/*** BirdWhisperer* by 2gua*/
class BirdWhisperer {chirping: string;constructor(message: string) {this.chirping = message;}chirp() {return 'Ah~ oh~ ' + this.chirping;}
}
let birdWhisperer = new BirdWhisperer('coo-coo-coo...');
document.body.innerHTML = birdWhisperer.chirp();
创建TypeScript编译器配置文件
当前TypeScript代码并不能直接执行,需编译为JavaScript代码。而借助VS Code,我们就不用在命令行输入编译命令了。为此,在根目录添加一个tsconfig.json文件。该文件是TypeScript编译器配置文件。文件内容如下所示:
{"compilerOptions": {"target": "es5","module": "amd","sourceMap": true},"exclude": ["node_modules","typings/main","typings/main.d.ts"]
}
tsconfig.json文件各项说明如下:
- "compilerOptions"——编译器选项;
- "target"——编译目标,如这里编译为es5代码;
- "module"——处理独立文件时的模块加载方式;
- "sourceMap"——是否创建map文件以帮助调试;
- "exclude"——编译器会编译TypeScript文件(.ts或.tsx),通过排除设置里的TypeScript文件不会被编译。
关于tsconfig.json的进一步信息可以参考:这里。
创建测试页面
最后,我们还需要创建一个测试页面index.html来测试我们的程序。
在新创建的index.html键入:html:5,按Tab键,就会生成好HTML模版文件!然后在body中键入:script:src,按Tab键,然后加载我们马上要编译好的的hello-typescript.ts对应的JavaScript文件hello-typescript.js:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bird Whisperer</title>
</head>
<body><script src="hello-typescript.js"></script>
</body>
</html>
VS Code无疑非常贴心!
编译项目
先看看至目前我们的项目情况:
在命令行窗口进入项目根目录,执行npm start,将看到会自动打开浏览器窗口:
如果调整TypeScript程序,工具我们前面的配置,服务器会自动识别我们的变动并刷新浏览器,不需要我们手动刷新浏览器:
再来看看现在的项目情况:
项目里多了两个文件,一个是TypeScript编译后对应的JavaScript文件,也就是我们前面包含进测试页面inde.html里的。另一个.map文件后面马上会用到。
开发环境几乎配置妥妥了,剩下还需要看看调试TypeScript程序。
1.2.4 VS Code调试
点击Debug按钮(或者Ctrl+Shift+d),就会出现以下界面:
点击绿色小三角(或F5)就开始调试。首次会弹出调试配置,请选择“Node.js”:
此时会创建.vscode/launch.json文件,首先要配置一下该文件。将"program"设置为hello-typescript.js,"sourceMaps"设置为true:
现在先试着在文件中设置一个断点(在图示位置点击一下即可,再次点击就关闭断点,如是切换):
然后再次点击绿色小三角进行调试,之后试着选择“单步跳过”命令,看看左边的“变量”窗口发生的变化:
有时候我都怀疑VS Code不是编译器,而是一个IDE了!
注意.map文件是调试用的文件。同时,要进行.ts文件的调试,在.vscode/launch.json文件中,请将"sourceMaps"设置为true。
1.2.5 浏览器调试
Chrome下的调试
打开Chrome,Ctrl+Shift+i打开开发者工具,选择Sources页面,打开hello-typescript.ts,设置断点,再次刷新页面,之后点击“单步跳过”命令,看看效果:
### Firefox下的调试
虽然大家都喜欢Chrome,但作为Firefox老用户,一直不舍Firefox,Firefox也是我主要浏览器。调试步骤跟Chrome下的情况差不离:
至此,TypeScript及VS Code的安装及开发/调试环境设置就OK了。打造好了兵器,是时候开始勤练内力了,接下来就可以迈进TypeScript的世界......
更多精彩内容,关注玄魂工作室微信订阅号(xuanhun521):
Visual Studio Code 使用Git进行版本控制
打造TypeScript的Visual Studio Code开发环境相关推荐
- 【错误记录】Ubuntu 中 ROOT 用户无法启动 Visual Studio Code 开发环境 ( 推荐在普通用户下使用 VSCode 开发环境 )
文章目录 一.报错信息 二.解决方案 一.报错信息 在 [开发环境]Ubuntu 安装 Visual Studio Code 开发环境 ( 下载 Visual Studio Code 安装器 | Ub ...
- 【开发环境】安装 Visual Studio Code 开发环境 ( 下载 Visual Studio Code 安装器 | Visual Studio Code )
文章目录 一.下载 Visual Studio Code 安装器 二.安装 Visual Studio Code 一.下载 Visual Studio Code 安装器 进入 Visual Studi ...
- 【实验手册】使用Visual Studio Code 开发.NET Core应用程序
.NET Core with Visual Studio Code 目录 概述... 2 先决条件... 2 练习1: 安装和配置.NET Core以及Visual Studio Code 扩展... ...
- Visual Studio Code 开发 .NET Core 看这篇就够了
来源:依乐祝 cnblogs.com/yilezhu/p/9926078.html 在本文中,我将带着大家一步一步的通过图文的形式来演示如何在Visual Studio Code中进行.NET Cor ...
- 《软件工具》手把手教你使用Visual Studio Code开发C/C++(Windows)
C/C++的开发工具很多,微软的Visual Studio,QT等都是不错的选择,但是这些IDE都过于庞大,而且有很多IDE都是收费的.笔者这里推荐GCC+Make+代码编辑器的方式来开发C/C++, ...
- Visual Studio Code开发HTML5安装插件快捷使用Bootstrap样式
Visual Studio Code开发HTML5安装插件快捷使用Bootstrap样式 一.引入bootstrap.css 下载bootstrap,地址:Bootstrap中文网 点击Bootstr ...
- Vue.js+Node.js全栈开发教程:通过Visual Studio Code开发调试Node应用
目前,有多种开发工具可以支持Node.js应用的开发,比如: jetBrains WebStorm.Eclipse.Visual Studio Code等.这些开发工 具原则上是"条条大路通 ...
- DCMTK 3.6.2(MD支持库)与Microsoft Visual Studio 2017开发环境的搭建
DCMTK 3.6.2(MD支持库)与Microsoft Visual Studio 2017开发环境的搭建 DCMTK 362MD支持库与Microsoft Visual Studio 2017开发 ...
- Microsoft Visual Studio C++开发环境的配置及使用
Microsoft Visual Studio C++开发环境的配置及使用 本文引用自作者编写的下述图书; 本文允许以个人学习.教学等目的引用.讲授或转载,但需要注明原作者"海洋饼干叔 叔& ...
最新文章
- 使用NVIDIA GRID vPC支持视频会议和算力工具
- 仿余额宝数字跳动效果 TextCounter
- poj3177(双联通分量)
- SQLiteHelper
- Lock和synchronized比较详解(转)
- 有十五个数按由大到小顺序存放在一个数组中_「图形化编程」前导知识-数组(一)...
- 三.激光SLAM框架学习之A-LOAM框架---项目工程代码介绍---1.项目文件介绍(除主要源码部分)
- 推荐系统实践学习系列(七)推荐系统实例
- dvi线支持多少分辨率_为什么用DVI接口分辨率不能达到1080
- python大麦网抢票_抢票攻略-大麦网
- 游戏虚拟引擎自学_自学5个小时,如何做出一个游戏?
- 如何在服务器发布网站
- 树莓派笔记17: 语音机器人
- misc类设备驱动1——板载蜂鸣器驱动测试
- 最好用的视频压缩软件压缩教程
- 跟着团子学SAP DMS—在SAP中通过DMS上传文档基本操作(CV01N/CV02N/CV03N/CV04N)
- 叶聪:朋友圈背后的计算机视觉技术与应用 1
- 从COVID-19大流行中汲取哪些教训?10种方法帮CIO预防下一次危机
- PAT甲级1012:The Best Rank (25)
- 2022-03-30 StackOverflowError与OutOfMemoryError详解
热门文章
- ActiveMQ、RabbitMQ、RocketMQ、Kafka的介绍及优缺点说明
- Linux系统编程:lseek扩展文件大小失败原因分析
- s2sh删掉原本的s2sh project capabilities后重新添加它们
- 将sql 结果导出到文件
- 关于内置浏览器的问题
- 【笔记】通过 js——实现 各种跨域
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):目录
- 一个月读完6本书?这些烧脑神书,你能读完1本,就是学霸!
- 清华大学张文增教授110页PPT讲专利申请、检索与解读
- php soap 两个版本_Ceontos 安装php7以上的版本