开始编译第一个 typescript 实例
![开始编译第一个typescript实例](https://static001.geekbang.org/infoq/6d/6d694a19d423779106291e8fa121ec71.jpeg)
作者:程序员学院
1、什么是typescript
TypeScript
是 JavaScript
的一个超集,支持 ECMAScript 6
标准。
TypeScript
由微软开发的自由和开源的编程语言。
TypeScript
设计目标是开发大型应用,它可以编译成纯 JavaScript
,编译出来的 JavaScript
可以运行在任何浏览器上。
2、JavaScript 与 TypeScript 的区别
TypeScript
是JavaScript
的超集,扩展了JavaScript
的语法,因此现有的JavaScript
代码可与TypeScript
一起工作无需任何修改,TypeScript
通过类型注解提供编译时的静态类型检查。
TypeScript
可处理已有的JavaScript
代码,并只对其中的TypeScript
代码进行编译。
3、安装typescript
我们需要使用到 npm 工具安装TypeScript。
如果你的本地环境已经安装了 npm 工具,可以使用以下命令来安装:
因上述安装方法受到网络限制,所以我们可以采用淘宝镜像进行安装
如果需要指定typescript版本,则使用@符号,例如:
安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码,以下是查看版本号:
4、安装 Visual Studio Code
很多 IDE 都有支持 TypeScript
插件,如:Visual Studio,Sublime Text 2,WebStorm / PHPStorm,Eclipse
等。
这里我们用Visual Studio Code
来对TypeScript
进行编写。
Visual Studio Code
是一个可以运行于 Mac OS X、Windows
和 Linux
之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器,由 Microsoft 公司开发。
下载地址:https://code.visualstudio.com/
Windows 上安装 Visual Studio Code
1、下载 Visual Studio Code。
![](https://static001.geekbang.org/infoq/86/860bf6ca18ff9ef15294f4e15d433193.png)
2、双击 VSCodeSetup.exe 安装。
![](https://static001.geekbang.org/infoq/36/367f5f80be4e6e3c9c36bdd8ae1efdf5.png)
3、安装完成后,打开 Visual Studio Code
界面类似如下:
![](https://static001.geekbang.org/infoq/ae/ae30d31499ed84e589b4c74ac8530fc3.png)
5、构建你的第一个TypeScript文件
(1)首页创建TypeScript
文件greeter.ts
,将下列代码输入到该文件中(注:通常我们使用 .ts
作为 TypeScript
代码文件的扩展名):
![](https://static001.geekbang.org/infoq/89/896dbb09d045e292ce010df06afc4f6a.png)
(2)然后执行以下命令将 TypeScript
转换为 JavaScript
代码,我们可以在左侧窗口中点击当前编辑的代码文件,选择 open in command prompt
(在终端中打开),这时候我们就可以在屏幕的右侧下半部分使用 tsc
命令来执行 TypeScript
文件代码了。
![](https://static001.geekbang.org/infoq/fe/fe12ede2250bc283ea69ea80e9efd660.png)
![](https://static001.geekbang.org/infoq/7a/7ae1e8fdff64122c223f6c43cce8a7ff.png)
输出结果为一个greeter.js
文件,我们打开greeter.js
来看看编译的代码是什么吧:
(3)如果运行时报错:
无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\tsc.ps1
,因为在此系统上禁止运行脚本
解决方法:
以管理员身份运行powerShell(一定要以管路员身份打开):
![](https://static001.geekbang.org/infoq/da/da87f78521d97a24fa1f47b926653c31.png)
复制下面命令:
![](https://static001.geekbang.org/infoq/30/30596c3e08be3c84457e2fec32534deb.png)
输入A 或者 Y 即可解决该问题
好的,你学会了吗?
![](https://static001.geekbang.org/infoq/d8/d8f1e9c39675ed656ccc08dbf01365d2.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
版权声明: 本文为 InfoQ 作者【程序员学院】的原创文章。
原文链接:【http://xie.infoq.cn/article/dbede02ae651046195a289da7】。文章转载请联系作者。
评论