文档章节

使用 Visual Studio Code 编写 TypeScript

风华神使
 风华神使
发布于 2016/12/01 17:33
字数 391
阅读 146
收藏 1

1. 安装 Visual Studio Code

https://code.visualstudio.com

按提示安装即可。

 

2. 安装 Node.js 和 NPM

https://nodejs.org

按提示安装即可。安装之后,node 和 npm 的可执行文件的所在目录会被自动添加到 PATH 环境变量。

 

3. 通过 NPM 安装 TypeScript

在控制台输入

npm install -g typescript

即可完整 TypeScript 的安装,之后在控制台输入

tsc -v

如果看到版本号,就表示安装完成。

 

4. 建立工程

新建一个文件夹(如 E:\ts),用来作项目文件夹。在该项目文件夹中新建文件 tsconfig.json,内容如下:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true
    },
    "exclude": [
        "node_modules"
    ]
}

用 VSCode 打开项目文件夹,并新建文件 hello.ts 内容如下:

class Startup {
    public static main(): number {
        console.log("Hello World");
        return 0;
    }
}

Startup.main();

按 Ctrl + Shift + B,VSCode 会提示“未配置任何任务运行程序”。单机“配置任务运行程序”,选择“TypeScript - tsconfig.json 创建 TypeScript 项目”,那么系统就会在项目文件夹下建立一个名为“.vscode”的文件夹,并在 .vscode 文件夹中建立一个 tasks.json 文件(不必理会它的内容),之后再按 Ctrl + Shift + B,就可以进行编译了,编译完后,会在项目文件夹生成一个名为 hello.js 的文件。最后就可以用 node 运行它了:

node hello.js

 

以上就是用 VSCode 搭建 TypeScript 开发环境的过程。

注释1:如果你想使用 TypeScript 做 Node 开发,那还需要做一些别的事情。

注释2:最安心的方案当然是直接使用 IDE,如 WebStorm、VS。

© 著作权归作者所有

共有 人打赏支持
风华神使
粉丝 22
博文 76
码字总数 41462
作品 0
南开
架构师
TypeScript 语言学习

开发环境推荐 Visual Studio Code https://code.visualstudio.com 免费, 跨平台, 支持 Windows, OS X 以及 Linux. Visual Studio https://www.visualstudio.com Visual Studio 2015 RC 已整合......

小骏骏
2015/08/06
0
0
TypeScript 2.9.2 发布,微软推出的 JavaScript 超集

TypeScript 2.9.2 已发布。此版本包含一组针对 TypeScript 2.9.1 的错误修复。 有关已解决问题的完整列表,请查看 TypeScript 2.9.2 的固定问题查询。 TypeScript 是由微软开发的自由和开源的...

达尔文
06/14
0
0
开始使用 TypeScript

简介 TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格,C#的首席架构...

施立
2017/11/02
0
3
TypeScript 3.0 正式发布:引入“项目引用”新概念

北京时间7月31日,微软宣布推出 TypeScript 3.0 正式版。 TypeScript 3.0 是一个新的里程碑。官方表示,尽管版本号是一个大变化,但 3.0 版本几乎没有破坏性的变更(这意味着我们可以很轻松地...

局长
07/31
0
29
TypeScript 2.8.4 发布,微软推出的 JavaScript 超集

TypeScript 2.8.4 发布了,此版本包含一组针对 TypeScript 2.8.3 报告的 bug 的修复,包括: 修复 js 初始化器合并 符号表损坏导致内存使用失控 阻止检查器中的无限 js 符号合并 详情查看 bu...

雨田桑
05/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

20180920 rzsz传输文件、用户和用户组相关配置文件与管理

利用rz、sz实现Linux与Windows互传文件 [root@centos01 ~]# yum install -y lrzsz # 安装工具sz test.txt # 弹出对话框,传递到选择的路径下rz # 回车后,会从对话框中选择对应的文件传递...

野雪球
41分钟前
0
0
OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
5
2
java -jar运行内存设置

java -Xms64m #JVM启动时的初始堆大小 -Xmx128m #最大堆大小 -Xmn64m #年轻代的大小,其余的空间是老年代 -XX:MaxMetaspaceSize=128m # -XX:CompressedClassSpaceSize=6...

李玉长
今天
1
0
Spring | 手把手教你SSM最优雅的整合方式

HEY 本节主要内容为:基于Spring从0到1搭建一个web工程,适合初学者,Java初级开发者。欢迎与我交流。 MODULE 新建一个Maven工程。 不论你是什么工具,选这个就可以了,然后next,直至finis...

冯文议
今天
1
0
RxJS的另外四种实现方式(四)——性能最高的库(续)

接上一篇RxJS的另外四种实现方式(三)——性能最高的库 上一篇文章我展示了这个最高性能库的实现方法。下面我介绍一下这个性能提升的秘密。 首先,为了弄清楚Most库究竟为何如此快,我必须借...

一个灰
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部