感谢支持
我们一直在努力

使用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官网下载。

  • https://nodejs.org/download/

使用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官网下载。

  • https://code.visualstudio.com/Download

使用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

参考数据

  • Using TypeScript with Visual Studio Code on OSX – Michael Crump

Visual Studio Code 简单试用体验  http://www.linuxidc.com/Linux/2015-05/116887.htm

Visual Studio 2010 & Help Library Manager 安装说明 http://www.linuxidc.com/Linux/2012-11/74814.htm

OpenCV 2.3.x/2.4.x在Visual Studio 2005/2008和Visual Studio 2010配置方法详解 http://www.linuxidc.com/Linux/2012-08/68302.htm

使用OpenCV-2.4.0.exe文件编译x86或x64平台Visual Studio 2005/2008/2010目标文件 http://www.linuxidc.com/Linux/2012-08/68305.htm

Visual Studio LightSwitch增加对HTML5和JavaScript的支持 http://www.linuxidc.com/Linux/2012-06/63397.htm

Visual Studio 11:使用 C++ 开发一个最简单的 Metro 应用 http://www.linuxidc.com/Linux/2012-06/62657.htm

Visual Studio 的详细介绍:请点这里
Visual Studio 的下载地址:请点这里

本文永久更新链接地址:http://www.linuxidc.com/Linux/2015-07/119456.htm

赞(0) 打赏
转载请注明出处:服务器评测 » 使用Visual Studio Code开发TypeScript
分享到: 更多 (0)

听说打赏我的人,都进福布斯排行榜啦!

支付宝扫一扫打赏

微信扫一扫打赏