Sublime 3搭建TypeScript开发环境
来源:互联网 发布:淘宝图片找同款 编辑:程序博客网 时间:2024/06/05 14:50
Typescript 是 JavaScript 的一个超集,在 ECMAScript6 基础上演化并吸收了生成 Javascript 类别和接口的一些特性。它编译后生成普通的 JavaScript 代码。TypeScript 支持任意浏览器,任意环境,任意系统,并且是开源的。
这篇文章我们使用 Sublime 来作为TS的开发工具。
首先安装TypeScript,这里假设你的电脑上已经安装了nodejs和npm,打开命令行窗口,运行命令:
npm install -g typescript
稍作等待,安装完毕之后做个小测试。新建一个文件夹,在文件夹中新建一个文件命名为test.ts,代码如下:
function greet(msg: string){ console.log("Say " + msg);}greet("hello!");
打开命令行窗口,进入 test.ts 文件所在目录,运行命令
tsc test.ts
对 .ts 文件进行编译,编译成功后可以看到在同级目录下生成了一个 test.js 文件。
没错,TypeScript已经安装成功了,就是这么简单!
然后为Sublime添加TypeScript支持。TypeScript 包可以通过 Package Control 得到。打开Sublime,preference -> Package Control,找到 Install Package,输入 TypeScript,找到 TypeScript 点击进行安装,稍等一会,待安装完毕,进行一下测试。新建一个文件命名为 hello.ts,输入跟刚才相同的代码,你会发现,自动补全有了,代码高亮有了,自动检测语法错误也有了,很爽啊有木有。
接下来我们创建一个 TypeScript 项目。从1.5版本开始,TypeScript 支持一个名为 tsconfig.json 的轻量级项目文件,我们可以在前面的文件夹中添加一个 tsconfig.json 文件,代码如下:
{ "compilerOptions":{ "sourceMap": true }, "files": ["hello.ts"]}
tsconfig.json 文件有两个部分:传递给编译器的选项和文件列表。例子中将sourceMap设为TRUE,TypeScript的编译器会创建一个 .map 文件,通过它我们能直接调试 TypeScript 而不用将其编译成 JavaScript 代码。files 选项列出需要编译的 .ts 文件。若不指定此选项,tsconfig.json 会编译该目录下的所有 .ts 文件。
现在万事俱备,打开命令行窗口,cd 到我们的项目路径下,直接运行 tsc 命令,可以看到生成了 hello.js 和 hello.js.map 两个文件。
下面我们看看怎样用 .map 文件来对 TypeScript 代码进行调试。新建一个 HTML 文件命名为 test.html,代码如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title></head><body> <script type="text/javascript" src="hello.js"></script></body></html>
在浏览器中打开此文件, F12,看到控制台已经打印出了 Say hello!
点击浏览器开发者工具的 Sources 选项卡,打开 hello.js 文件,如下图所示:
在第四行打上一个断点,你会看见啪一下,断点跳到了 hello.ts 文件的对应行上:
刷新页面,进入断点,就可以直接对 TypeScript 代码进行调试了。
- Sublime 3搭建TypeScript开发环境
- Sublime 3搭建TypeScript开发环境出现build parameter问题
- TypeScript开发环境搭建
- 搭建TypeScript开发环境
- Typescript+dva搭建开发环境
- VScode搭建TypeScript开发环境
- Sublime Text配置Typescript开发环境
- 02 TypeScript开发环境搭建(Windows)
- 基于Typescript搭建前端开发环境
- TypeScript开发环境搭建-Visual Studio Code
- Webpack搭建完整Typescript开发环境
- VS Code搭建TypeScript开发环境
- Sublime Text 3 搭建Python开发环境
- Sublime Text 3搭建 Java 开发环境
- sublime text 3 python 开发环境搭建
- Sublime text 3搭建Python开发环境
- Sublime text 3 搭建Python3开发环境
- 搭建Sublime Test开发环境
- JAVA服务端用友盟给APP(android和IOS)推送消息
- mysql忘记root密码的解决方法
- MYSQL主从同步故障一例及解决过程!
- ~
- POJ 2251 Dungeon Master (三维BFS)
- Sublime 3搭建TypeScript开发环境
- 8位数码管动态扫描显示变化数据
- POJ 1094 Sorting It All Out (拓扑排序)
- centos配置ssh无密码访问
- POJ2253-Frogger(Dijkstra变式)
- Spring Web MVC和Hibernate的集成
- Tomcat 源码学习之JIoEndpoint
- 【C++基础概念】有关指针、引用的几个问题
- CentOS7 桌面环境的大小