TypeScript环境搭建
2016-08-08 22:09
169 查看
环境搭建
本篇将简单介绍一下TypeScript,并记录开发环境的搭建、使用Visual Studio Code进行一个简单的Demo开发过程。
第一部分、简介
TypeScript是一种由微软开发的自由和开源的编程语言。是JavaScript的一个超集。它在保留JavaScript语言本身特性的基础上添加了大量静态语言具有的一些特性,包括但不限于以下几点:可选的静态类型
枚举、接口和类
命名空间
模块
Lambda表达式
编译时类型检查
在2013年6月微软正式发布了0.9版。之后在不断更新的过程中逐渐支持ECMAScript 2015(ES6)标准。
通过利用静态语言的特性和新标准,使JavaScript开发变得越来越简单。同时也很好的符合当前前端开发的模块化、工程化的开发方式和潮流。
第二部分、环境准备
一、安装Node.js
安装文件下载地址:Node.js Downloads。TypeScript源码需要进行编译以后才能运行,Node.js提供了编译环境。二、安装TypeScript编译工具
安装好Node.js后,打开cmd窗口,输入以下命令npm install -g typescript
使用npm包管理工具下载TypeScript包并在全局环境下安装,安装成功后就可以通过 tsc 命令编译TypeScript源码。
可以通过 tsc -v 命令查看当前TypeScript版本。当前最新版本是:1.8
Demo.ts
app.ts
三、配置编译和调试文件
在.vscode里添加tasks.json文件1 { 2 // See https://go.microsoft.com/fwlink/?LinkId=733558 3 // for the documentation about the tasks.json format 4 "version": "0.1.0", 5 "command": "tsc", 6 "isShellCommand": true, 7 "args": ["-p", "."], 8 "showOutput": "always", 9 "problemMatcher": "$tsc" 10 }
切换到调试模式,点击配置按钮,选择Node.js环境。因为接下来的Demo演示都将在Node.js环境下进行。
![](https://images2015.cnblogs.com/blog/51831/201608/51831-20160807230717700-1517697557.png)
修改生成的launch.json文件内容,指定启动入口文件的路径
1 { 2 "version": "0.2.0", 3 "configurations": [ 4 { 5 "name": "启动", 6 "type": "node", 7 "request": "launch", 8 "program": "${workspaceRoot}/js/app.js", 9 "stopOnEntry": false, 10 "args": [], 11 "cwd": "${workspaceRoot}", 12 "preLaunchTask": null, 13 "runtimeExecutable": null, 14 "runtimeArgs": [ 15 "--nolazy" 16 ], 17 "env": { 18 "NODE_ENV": "development" 19 }, 20 "externalConsole": false, 21 "sourceMaps": false, 22 "outDir": null 23 }, 24 { 25 // ...... 26 }, 27 { 28 // ...... 29 } 30 ] 31 }
以上配置完成后,使用 Ctrl+Shift+B 启动编译,如果VS Code的OUTPUT窗口没有任何异常信息显示,则表示编译成功。在js文件夹里将会生成编译后的JavaScript文件
demo.js
1 "use strict"; 2 var Demo = (function () { 3 function Demo(a, b) { 4 this.a = a; 5 this.b = b; 6 } 7 Demo.prototype.sum = function () { 8 return this.a + this.b; 9 }; 10 return Demo; 11 }()); 12 exports.Demo = Demo;
app.js
1 "use strict"; 2 var demo_1 = require('./models/demo'); 3 var demo = new demo_1.Demo(1, 2); 4 console.log(demo.sum());
对比TypeScript源码文件和生成之后的JavaScript文件,结构发生了较大变化。
启动调试,查看调试控制台,输出了正确的计算结果:3
![](https://images2015.cnblogs.com/blog/51831/201608/51831-20160807232218309-682251698.png)
其他相关内容
当前非常流行的JavaScript模块规范主要遵循以下两种:CommonJS:同步模式加载模块,主要应用在服务端。Node.js模块化就遵循此规范。使用方式: require('模块名') 。
AMD:异步模式加载模块,主要应用在浏览器端。RequireJS遵循此标准。使用方式: define(['模块名1', ...], function('模块参数1', ....) { })
相关文章推荐
- 使用XmlReader读Xml
- Java&Android面试题搜集整理
- Java 可以说是产业界和学术界最热门的语言
- 本地调试微信接口
- 51nod:1689 逛街
- 保持时间与建立时间
- SCEA的基本知识
- 操作系统之分页分段介绍
- hdu5808 整体二分
- 互联网时代的密码记忆模型
- No module named ERROR: conda update scikit-learn (also scipy and numpy)
- 2016/07 Week1
- equal 源码剖析
- [nRF51822] 7、基础实验代码解析大全(前十)
- PHPExcel中文开发手册翻译版(2)
- Android开发环境搭建详细图解
- iis中同时使用isapi_rewrite3和url重写模块的注意点
- 《Windows程序设计》读书笔十二 剪贴板
- AT89C5131实现U盘
- Day08、扫雷游戏练习、函数(调用、实参、形参)