SblimeText搭建TypeScript开发环境
<div><span style="font-size:14px;">Sublime Text创建开发环境（for Windows）：<br>1、下载Sublime Text 3，或者Sublime Text 2版本，网址可自己google，下载后安装。</span></div><p><span style="font-size:14px;"><br></span></p><p><span style="font-size:14px;">2、下载<span style="color:#000099;">typescript.tmlanguage</span>，这个用来支持Sublime Text中TS代码高亮，下载地址：<br></span><a href="http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled.aspx" target="_blank" rel="nofollow"><span style="font-size:14px;">http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled.aspx</span></a></p><p><span style="font-size:14px;"><br></span></p><p><span style="font-size:14px;">3、安装TS编译器，两种方法选一个就可以了</span></p><p><span style="font-size: 14px;">从nodejs.org下载Node.js，下载后安装，安装目录内有个npm.dll，我们使用执行</span><span style="font-size: 14px; color: rgb(0, 0, 153);">npm install -g</span></p><p><span style="font-size:14px;"><span style="color:#000099;">typescript<br></span>例如我安装在f盘，则依次执行下列cmd命令：<br></span><span style="font-size:14px;color:#000099;">f:<br>cd F:\Program Files\nodejs<br>npm install -g typescript</span></p><p><span style="font-size:14px;color:#000099;"><br></span></p><p><span style="font-size:14px;">4、启动Sublime Text，<span style="color:#000099;">Preferences</span>菜单里选择<span style="color:#000099;">Browse Packages</span>，<br>在打开的路径内（一般是系统盘目录，不是安装Sublime Text的目录，不用在意是哪里）创建文件夹<span style="color:#000099;">TypeScript</span>，把</span></p><p><span style="font-size:14px;"><span style="color:#000099;">typescript.tmlanguage</span>拷贝到文件夹下</span></p><p><span style="font-size:14px;"><br></span></p><p><span style="font-size:14px;">5、然后再Sublime Text菜单中，<span style="color:#000099;">Build System ➤New Build System</span><br>写入如下命令：</span></p><p><span style="font-size:14px;"></span></p><pre><code class="language-bash hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-string">"cmd"</span>: [<span class="hljs-string">"tsc"</span>,<span class="hljs-string"><span class="hljs-string">"</span><span class="hljs-variable"><span class="hljs-string"><span class="hljs-variable">$file</span></span></span><span class="hljs-string">"</span></span>],</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-string">"file_regex"</span>: <span class="hljs-string">"(.*\\.ts?)\\s\\((+)\\,(+)\\)\\:\\s(...*?)$"</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-string">"selector"</span>: <span class="hljs-string">"source.ts"</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-string">"osx"</span>: {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-string">"path"</span>: <span class="hljs-string">"/usr/local/bin:/opt/local/bin"</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-string">"windows"</span>: {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-string">"cmd"</span>: [<span class="hljs-string">"tsc"</span>, <span class="hljs-string"><span class="hljs-string">"</span><span class="hljs-variable"><span class="hljs-string"><span class="hljs-variable">$file</span></span></span><span class="hljs-string">"</span></span>]</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><br><br><br><span style="font-size:14px;">保存，会让你选择存放目录，直接存在打开的目录下就可以（一般是C:/xxxx/User/目录），可以</span> <p></p><p>命名为TypeScript.sublime-build</p><p></p><p></p><p></p><p></p><p><span style="font-size:14px;"><br></span></p><p><span style="font-size:14px;">6、重启Sublime Text，就可以使用了</span></p><p><span style="font-size:14px;"><br>7、测试代码：新建一个项目文件夹，新建类Main.ts，写入如下代码</span><br></p><pre><code class="language-javascript hljs"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-class"><span class="hljs-keyword"><span class="hljs-class"><span class="hljs-keyword">class</span></span></span><span class="hljs-class"> </span><span class="hljs-title"><span class="hljs-class"><span class="hljs-title">Greeter</span></span></span><span class="hljs-class"> </span></span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> greeting: string;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">constructor</span>(message: string) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">this</span>.greeting = message;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> greet() {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">return</span> <span class="hljs-string">"Hello, "</span> + <span class="hljs-keyword">this</span>.greeting;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">var</span> greeter = <span class="hljs-keyword">new</span> Greeter(<span class="hljs-string">"world"</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">var</span> button = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'button'</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">button.textContent = <span class="hljs-string">"Say Hello"</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">button.onclick = <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function">(</span><span class="hljs-params"></span><span class="hljs-function"><span class="hljs-params"></span>) </span></span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> alert(greeter.greet());</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-built_in">document</span>.body.appendChild(button);</div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><br><br><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p><span style="font-size:14px;">使用Ctrl+B编译，或使用菜单Tools->Builder编译<br>输出相关内容表示编译成功，会在项目目录生成一个.js文件</span></p><p><span style="font-size:14px;"><br></span></p><p><span style="font-size:14px;">其他：</span></p><p><span style="font-size:14px;">如果你编译器选择的安装MSI，编译ts报错，尝试把上面的命令中后面的代码</span></p><p><span style="font-size:14px;">"windows": {<br>"cmd": ["tsc", "$file"]<br>}<br>改为<br>"windows": {<br>"cmd": ["tsc.exe", "$file"]<br>}<br><br></span><span style="font-size:14px;"></span></p><p></p><p></p><p><span style="font-size:14px;"><br></span></p><p><span style="font-size:14px;">ts在线直观编辑器（ts to js），</span><a href="http://www.typescriptlang.org/playground" target="_blank" rel="nofollow"><span style="font-size:14px;">http://www.typescriptlang.org/playground</span></a></p><p><br><span style="font-size:14px;">参考：《typescript-revealed》</span></p> <p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">Typescript 是 JavaScript 的一个超集，在 ECMAScript6 基础上演化并吸收了生成 Javascript 类别和接口的一些特性。它编译后生成普通的 JavaScript 代码。TypeScript 支持任意浏览器，任意环境，任意系统，并且是开源的。</p><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">这篇文章我们使用 Sublime 来作为TS的开发工具。</p><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;"><span style="box-sizing: border-box; outline: 0px; font-weight: 700; word-break: break-all;">首先安装TypeScript</span>，这里假设你的电脑上已经安装了nodejs和npm，打开命令行窗口，运行命令：</p><pre class="prettyprint" name="code" style="box-sizing: border-box; outline: 0px; padding: 8px 16px 4px 56px; margin-bottom: 24px; position: relative; overflow-y: hidden; overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; background-color: rgb(246, 248, 250); border: none;"><code class="hljs cmake has-numbering" style="box-sizing: border-box; outline: 0px; display: block; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 22px; border-radius: 4px; overflow-x: auto; word-wrap: normal; word-break: break-all;">npm <span class="hljs-keyword" style="box-sizing: border-box; outline: 0px; color: rgb(0, 0, 136); word-break: break-all;">install</span> -g typescript</code><ul class="pre-numbering" style="box-sizing: border-box; outline: 0px; padding-top: 8px; padding-bottom: 8px; list-style: none; word-break: break-all; position: absolute; width: 48px; background-color: rgb(238, 240, 244); top: 0px; left: 0px; text-align: right;"><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">1</li></ul></pre><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">稍作等待，安装完毕之后做个小测试。新建一个文件夹，在文件夹中新建一个文件命名为test.ts，代码如下：</p><pre class="prettyprint" name="code" style="box-sizing: border-box; outline: 0px; padding: 8px 16px 4px 56px; margin-bottom: 24px; position: relative; overflow-y: hidden; overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; background-color: rgb(246, 248, 250); border: none;"><code class="hljs javascript has-numbering" style="box-sizing: border-box; outline: 0px; display: block; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 22px; border-radius: 4px; overflow-x: auto; word-wrap: normal; word-break: break-all;"><span class="hljs-function" style="box-sizing: border-box; outline: 0px; word-break: break-all;"><span class="hljs-keyword" style="box-sizing: border-box; outline: 0px; color: rgb(0, 0, 136); word-break: break-all;">function</span> <span class="hljs-title" style="box-sizing: border-box; outline: 0px; color: rgb(0, 153, 0); word-break: break-all;">greet</span><span class="hljs-params" style="box-sizing: border-box; outline: 0px; color: rgb(79, 79, 79); word-break: break-all;">(msg: string)</span>{</span>console.log(<span class="hljs-string" style="box-sizing: border-box; outline: 0px; color: rgb(0, 153, 0); word-break: break-all;">"Say "</span> + msg);
}
greet(<span class="hljs-string" style="box-sizing: border-box; outline: 0px; color: rgb(0, 153, 0); word-break: break-all;">"hello!"</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; outline: 0px; padding-top: 8px; padding-bottom: 8px; list-style: none; word-break: break-all; position: absolute; width: 48px; background-color: rgb(238, 240, 244); top: 0px; left: 0px; text-align: right;"><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">1</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">2</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">3</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">4</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">5</li></ul></pre><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">打开命令行窗口，进入 test.ts 文件所在目录，运行命令</p><pre class="prettyprint" name="code" style="box-sizing: border-box; outline: 0px; padding: 8px 16px 4px 56px; margin-bottom: 24px; position: relative; overflow-y: hidden; overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; background-color: rgb(246, 248, 250); border: none;"><code class="hljs avrasm has-numbering" style="box-sizing: border-box; outline: 0px; display: block; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 22px; border-radius: 4px; overflow-x: auto; word-wrap: normal; word-break: break-all;">tsc test<span class="hljs-preprocessor" style="box-sizing: border-box; outline: 0px; color: rgb(0, 153, 0); word-break: break-all;">.ts</span></code><ul class="pre-numbering" style="box-sizing: border-box; outline: 0px; padding-top: 8px; padding-bottom: 8px; list-style: none; word-break: break-all; position: absolute; width: 48px; background-color: rgb(238, 240, 244); top: 0px; left: 0px; text-align: right;"><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">1</li></ul></pre><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">对 .ts 文件进行编译，编译成功后可以看到在同级目录下生成了一个 test.js 文件。</p><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">没错，TypeScript已经安装成功了，就是这么简单！</p><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;"><span style="box-sizing: border-box; outline: 0px; font-weight: 700; word-break: break-all;">然后为Sublime添加TypeScript支持</span>。TypeScript 包可以通过 Package Control 得到。打开Sublime，preference -> Package Control，找到 Install Package，输入 TypeScript，找到 TypeScript 点击进行安装，稍等一会，待安装完毕，进行一下测试。新建一个文件命名为 hello.ts，输入跟刚才相同的代码，你会发现，自动补全有了，代码高亮有了，自动检测语法错误也有了，很爽啊有木有。</p><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">接下来我们创建一个 TypeScript 项目。从1.5版本开始，TypeScript 支持一个名为 tsconfig.json 的轻量级项目文件，我们可以在前面的文件夹中添加一个 tsconfig.json 文件，代码如下：</p><pre class="prettyprint" name="code" style="box-sizing: border-box; outline: 0px; padding: 8px 16px 4px 56px; margin-bottom: 24px; position: relative; overflow-y: hidden; overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; background-color: rgb(246, 248, 250); border: none;"><code class="hljs json has-numbering" style="box-sizing: border-box; outline: 0px; display: block; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 22px; border-radius: 4px; overflow-x: auto; word-wrap: normal; word-break: break-all;">{
"<span class="hljs-attribute" style="box-sizing: border-box; outline: 0px; word-break: break-all;">compilerOptions</span>":<span class="hljs-value" style="box-sizing: border-box; outline: 0px; word-break: break-all;">{
"<span class="hljs-attribute" style="box-sizing: border-box; outline: 0px; word-break: break-all;">sourceMap</span>": <span class="hljs-value" style="box-sizing: border-box; outline: 0px; word-break: break-all;"><span class="hljs-literal" style="box-sizing: border-box; outline: 0px; color: rgb(0, 102, 102); word-break: break-all;">true</span>
</span>}</span>,
"<span class="hljs-attribute" style="box-sizing: border-box; outline: 0px; word-break: break-all;">files</span>": <span class="hljs-value" style="box-sizing: border-box; outline: 0px; word-break: break-all;">[<span class="hljs-string" style="box-sizing: border-box; outline: 0px; color: rgb(0, 153, 0); word-break: break-all;">"hello.ts"</span>]
</span>}</code><ul class="pre-numbering" style="box-sizing: border-box; outline: 0px; padding-top: 8px; padding-bottom: 8px; list-style: none; word-break: break-all; position: absolute; width: 48px; background-color: rgb(238, 240, 244); top: 0px; left: 0px; text-align: right;"><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">1</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">2</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">3</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">4</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">5</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">6</li></ul></pre><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">tsconfig.json 文件有两个部分：传递给编译器的选项和文件列表。例子中将sourceMap设为TRUE，TypeScript的编译器会创建一个 .map 文件，通过它我们能直接调试 TypeScript 而不用将其编译成 JavaScript 代码。files 选项列出需要编译的 .ts 文件。若不指定此选项，tsconfig.json 会编译该目录下的所有 .ts 文件。</p><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">现在万事俱备，打开命令行窗口，cd 到我们的项目路径下，直接运行 tsc 命令，可以看到生成了 hello.js 和 hello.js.map 两个文件。</p><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">下面我们看看怎样用 .map 文件来对 TypeScript 代码进行调试。新建一个 HTML 文件命名为 test.html，代码如下：</p><pre class="prettyprint" name="code" style="box-sizing: border-box; outline: 0px; padding: 8px 16px 4px 56px; margin-bottom: 24px; position: relative; overflow-y: hidden; overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; background-color: rgb(246, 248, 250); border: none;"><code class="hljs xml has-numbering" style="box-sizing: border-box; outline: 0px; display: block; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 22px; border-radius: 4px; overflow-x: auto; word-wrap: normal; word-break: break-all;"><span class="hljs-doctype" style="box-sizing: border-box; outline: 0px; color: rgb(79, 79, 79); word-break: break-all;"><!DOCTYPE html></span>
<span class="hljs-tag" style="box-sizing: border-box; outline: 0px; color: rgb(0, 102, 102); word-break: break-all;"><<span class="hljs-title" style="box-sizing: border-box; outline: 0px; color: rgb(79, 79, 79); word-break: break-all;">html</span>></span>
<span class="hljs-tag" style="box-sizing: border-box; outline: 0px; color: rgb(0, 102, 102); word-break: break-all;"><<span class="hljs-title" style="box-sizing: border-box; outline: 0px; color: rgb(79, 79, 79); word-break: break-all;">head</span>></span>
<span class="hljs-tag" style="box-sizing: border-box; outline: 0px; color: rgb(0, 102, 102); word-break: break-all;"><<span class="hljs-title" style="box-sizing: border-box; outline: 0px; color: rgb(79, 79, 79); word-break: break-all;">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; outline: 0px; word-break: break-all; color: rgb(79, 79, 79);">charset</span>=<span class="hljs-value" style="box-sizing: border-box; outline: 0px; word-break: break-all; color: rgb(0, 153, 0);">"utf-8"</span>></span>
<span class="hljs-tag" style="box-sizing: border-box; outline: 0px; color: rgb(0, 102, 102); word-break: break-all;"><<span class="hljs-title" style="box-sizing: border-box; outline: 0px; color: rgb(79, 79, 79); word-break: break-all;">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; outline: 0px; word-break: break-all; color: rgb(79, 79, 79);">http-equiv</span>=<span class="hljs-value" style="box-sizing: border-box; outline: 0px; word-break: break-all; color: rgb(0, 153, 0);">"X-UA-Compatible"</span> <span class="hljs-attribute" style="box-sizing: border-box; outline: 0px; word-break: break-all; color: rgb(79, 79, 79);">content</span>=<span class="hljs-value" style="box-sizing: border-box; outline: 0px; word-break: break-all; color: rgb(0, 153, 0);">"IE=edge,chrome=1"</span>></span>
<span class="hljs-tag" style="box-sizing: border-box; outline: 0px; color: rgb(0, 102, 102); word-break: break-all;"><<span class="hljs-title" style="box-sizing: border-box; outline: 0px; color: rgb(79, 79, 79); word-break: break-all;">title</span>></span>Examples<span class="hljs-tag" style="box-sizing: border-box; outline: 0px; color: rgb(0, 102, 102); word-break: break-all;"></<span class="hljs-title" style="box-sizing: border-box; outline: 0px; color: rgb(79, 79, 79); word-break: break-all;">title</span>></span>
<span class="hljs-tag" style="box-sizing: border-box; outline: 0px; color: rgb(0, 102, 102); word-break: break-all;"></<span class="hljs-title" style="box-sizing: border-box; outline: 0px; color: rgb(79, 79, 79); word-break: break-all;">head</span>></span>
<span class="hljs-tag" style="box-sizing: border-box; outline: 0px; color: rgb(0, 102, 102); word-break: break-all;"><<span class="hljs-title" style="box-sizing: border-box; outline: 0px; color: rgb(79, 79, 79); word-break: break-all;">body</span>></span>
<span class="hljs-tag" style="box-sizing: border-box; outline: 0px; color: rgb(0, 102, 102); word-break: break-all;"><<span class="hljs-title" style="box-sizing: border-box; outline: 0px; color: rgb(79, 79, 79); word-break: break-all;">script</span> <span class="hljs-attribute" style="box-sizing: border-box; outline: 0px; word-break: break-all; color: rgb(79, 79, 79);">type</span>=<span class="hljs-value" style="box-sizing: border-box; outline: 0px; word-break: break-all; color: rgb(0, 153, 0);">"text/javascript"</span> <span class="hljs-attribute" style="box-sizing: border-box; outline: 0px; word-break: break-all; color: rgb(79, 79, 79);">src</span>=<span class="hljs-value" style="box-sizing: border-box; outline: 0px; word-break: break-all; color: rgb(0, 153, 0);">"hello.js"</span>></span><span class="javascript" style="box-sizing: border-box; outline: 0px; word-break: break-all;"></span><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; color: rgb(0, 102, 102); word-break: break-all;"></<span class="hljs-title" style="box-sizing: border-box; outline: 0px; color: rgb(79, 79, 79); word-break: break-all;">script</span>></span>
<span class="hljs-tag" style="box-sizing: border-box; outline: 0px; color: rgb(0, 102, 102); word-break: break-all;"></<span class="hljs-title" style="box-sizing: border-box; outline: 0px; color: rgb(79, 79, 79); word-break: break-all;">body</span>></span>
<span class="hljs-tag" style="box-sizing: border-box; outline: 0px; color: rgb(0, 102, 102); word-break: break-all;"></<span class="hljs-title" style="box-sizing: border-box; outline: 0px; color: rgb(79, 79, 79); word-break: break-all;">html</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; outline: 0px; padding-top: 8px; padding-bottom: 8px; list-style: none; word-break: break-all; position: absolute; width: 48px; background-color: rgb(238, 240, 244); top: 0px; left: 0px; text-align: right;"><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">1</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">2</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">3</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">4</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">5</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">6</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">7</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">8</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">9</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">10</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">11</li><li style="box-sizing: border-box; outline: 0px; padding-right: 8px; padding-left: 8px; margin-left: 0px; list-style: none; word-break: break-all; color: rgb(153, 153, 153);">12</li></ul></pre><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">在浏览器中打开此文件， F12，看到控制台已经打印出了 Say hello!</p><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">点击浏览器开发者工具的 Sources 选项卡，打开 hello.js 文件，如下图所示：</p><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;"><img src="https://img-blog.csdn.net/20170208204349097?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjUxMDQ3OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述" title="" style="box-sizing: border-box; outline: 0px; margin-top: 24px; margin-bottom: 24px; max-width: 100%; word-break: break-all; cursor: zoom-in;"></p><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">在第四行打上一个断点，你会看见啪一下，断点跳到了 hello.ts 文件的对应行上：</p><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;"><img src="https://img-blog.csdn.net/20170208204515678?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjUxMDQ3OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述" title="" style="box-sizing: border-box; outline: 0px; margin-top: 24px; margin-bottom: 24px; max-width: 100%; word-break: break-all; cursor: zoom-in;"></p><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">刷新页面，进入断点，就可以直接对 TypeScript 代码进行调试了。</p><p></p>
页:
[1]