首页 技术 正文
技术 2022年11月24日
0 收藏 311 点赞 4,990 浏览 2426 个字

[Tool] 使用Visual Studio Code开发TypeScript

 

[Tool] 使用Visual Studio Code开发TypeScript

注意

依照本篇操作步骤实作,就可以在「Windows」、「OS X」操作系统上,使用Visual Studio Code开发TypeScript。

前言

为了解决JavaScript:缺少面向对象语法、缺少编译期间错误检查…等等问题。微软提供了一个开源的TypeScript语言,让开发人员能够使用面向对象撰写TypeScript程序代码,接着再透过TypeScript编译程序将程序代码编译成为JavaScript程序代码,就能够建立经过编译检查的JavaScript程序代码来提供平台使用。

本篇文章介绍如何在「Windows」、「OS X」操作系统中,透过Visual Studio Code这个工具开发TypeScript,让没有预算添购相关工具的开发人员,也能够学习TypeScript的语法。主要为自己留个纪录,也希望能帮助到有需要的开发人员。

Visual Studio Code开发TypeScript

安装Node.js

首先要安装Node.js,后续就可以使用NPM这个工具来安装TypeScript Compiler。而Node.js的安装程序,可以从Node.js官网下载。

Visual Studio Code开发TypeScript

Visual Studio Code开发TypeScript

安装TypeScript Compiler

安装TypeScript Compiler

装完Node.js,接着就可以使用NPM来安装TypeScript Compiler,之后就能透过这个Compiler来将TypeScript编译成为JavaScript。开发人员使用命令提示字符(or终端机),输入下列指令即可完成TypeScript Compiler的安装。

npm install -g typescript

Visual Studio Code开发TypeScript

更新TypeScript Compiler

检视上一个步骤所安装的TypeScript Compiler,会发现安装的版本为1.4.1。但是因为后续步骤,需要使用到1.5.0版新加入的功能,所以开发人员同样使用命令提示字符(or终端机),输入下列指令来更新TypeScript Compiler到1.5.0版以上。

npm update -g typescript

Visual Studio Code开发TypeScript

移除环境变量(Windows only)

有些开发人员的计算机,先前可能已经安装过TypeScript相关工具,这些工具会在Windows环境变量中加入TypeScript Compiler的安装路径。为了统一使用NPM来管理TypeScript Compiler的版本,开发人员需要手动从环境变量中移除TypeScript Compiler的安装路径:

C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0\

Visual Studio Code开发TypeScript

安装Visual Studio Code

装完TypeScript Compiler,接着安装Visual Studio Code,之后就能透过Visual Studio Code来开发TypeScript程序代码。而Visual Studio Code的安装程序,可以从Visual Studio Code官网下载。

Visual Studio Code开发TypeScript

Visual Studio Code开发TypeScript

开发TypeScript

建立Workspace

完成安装步骤后,开启Visual Studio Code,并且选取一个文件夹做为开发TypeScript的工作文件夹(Workspace)。

Visual Studio Code开发TypeScript

Visual Studio Code开发TypeScript

建立tsconfig.json

接着在Workspace加入一个新档案「tsconfig.json」,并且输入下列JSON设定参数。

{
"compilerOptions": {
"target": "es5",
"noImplicitAny": false,
"module": "amd",
"removeComments": false,
"sourceMap": true
}
}

Visual Studio Code开发TypeScript

Visual Studio Code开发TypeScript

建立.settings\tasks.json

再来同样在Workspace加入一个新文件夹「.settings」,并且在这个文件夹中加入一个新档案「tasks.json」,接着输入下列JSON设定参数。

{
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"showOutput": "always",
"args": ["-p", "."],
"problemMatcher": "$tsc"
}

Visual Studio Code开发TypeScript

Visual Studio Code开发TypeScript

开发main.ts

完成上述步骤后,在Workspace加入一个新档案「main.ts」,并且输入下列TypeScript程序代码。

class Greeter {
data: string; constructor(data: string) {
this.data = data;
} run() {
alert(this.data);
}
}window.onload = () => {
var greeter = new Greeter("Clark");
greeter.run();
};

Visual Studio Code开发TypeScript

最后按下快捷键「Ctrl+Shift+B」,就可以看到Visual Studio Code编译TypeScript,并且输出对应的JavaScript档案:main.js。

var Greeter = (function () {
function Greeter(data) {
this.data = data;
}
Greeter.prototype.run = function () {
alert(this.data);
};
return Greeter;
})();
window.onload = function () {
var greeter = new Greeter("Clark");
greeter.run();
};
//# sourceMappingURL=main.js.map

Visual Studio Code开发TypeScript

参考数据

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/142020.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:876 阅读:5,475
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,696
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,510
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:731 阅读:4,472
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:5,388
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,268
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站