安装TypeScript

虽然Visual Studio Code支持编写TypeScript语言的程序,但是它并没有内置TypeScript编译器。为了能够编译TypeScript程序,我们还需要单独安装TypeScript语言。

安装TypeScript语言最简单的方式是使用npm工具。如果你的计算机中还没有安装Node.js,则需要到Node.js的官网上 下载LTS版本的安装包并安装。在安装Node.js的同时,也会自动安装npm工具。安装完成后,可使用如下命令来验证安装是否成功:

node -v

若安装成功,运行上面的命令会输出Node.js的版本号,如“12.13.0”。

接下来,使用下面的命令全局安装TypeScript:

npm install -g typescript
  • “npm install”是npm命令行工具提供的命令之一,该命令用来安装npm代码包及其依赖项;
  • “-g”选项表示使用全局模式安装TypeScript语言;
  • 最后的“typescript”代表的是TypeScript语言在npm注册表中的名字。

当安装完成后,可以使用下面的命令来验证TypeScript是否安装成功:

tsc --version

若安装成功,则运行该命令的结果可能会显示“Version 3.x.x”,该数字表示安装的TypeScript的版本号,如图所示。

安装TypeScript

至此,我们已经安装完了所有必要的软件。接下来就可以开始在本地编写“hello,world”程序了。

创建文件

首先,新建一个名为coolcou的目录作为示例项目的根目录,所有代码都将放在这个目录下。接下来,启动Visual Studio Code,然后将coolcou文件夹拖曳到Visual Studio Code窗口中,或者可以使用快捷键“Ctrl + K Ctrl + O”打开“Open Folder …”对话框找到刚刚创建的coolcou目录,然后点击“SelectFolder”按钮,在Visual Studio Code中打开此目录,如图所示。

安装TypeScript

新建tsconfig.json文件

使用新建文件快捷键“Ctrl + N”来创建一个文件并输入以下代码:

{
    "compilerOptions": {
        "strict": true,
        "target": "es5"
    }
}

使用保存文件快捷键“Ctrl + S”将这个文件保存为“tsconfig.json”。“tsconfig.json”是TypeScript编译器默认使用的配置文件。此例中的配置文件启用了所有的严格类型检查编译选项,并将输出JavaScript的版本指定为ECMAScript 5。

新建hello-world.ts文件

使用新建文件快捷键“Ctrl + N”来创建一个文件并输入以下代码:

const greeting = 'hello,world';
console.log(greeting);

使用保存文件快捷键“Ctrl + S”将这个文件保存为“hello-world.ts”,TypeScript源文件的常规扩展名为“.ts”。

编译程序

Visual Studio Code的任务管理器已经集成了对TypeScript编译器的支持,我们可以利用它来编译TypeScript程序。使用Visual Studio Code任务管理器的另一个优点是它能将编译过程中遇到的错误和警告信息显示在“Problems”面板里。

使用快捷键“Ctrl + Shift + B”或从菜单栏里选择“Terminal→Run BuildTask”来打开并运行构建任务面板,然后再选择“tsc: build – tsconfig.json”来编译TypeScript程序,如图所示。

安装TypeScript

当编译完成后,在“hello-world.ts”文件的目录下会生成一个同名的“hello-world.js”文件,它就是编译输出的JavaScript程序。

此时的目录结构如下所示:

安装TypeScript

生成的“hello-world.js”文件如下所示:

"use strict";
var greeting = 'hello,world';
console.log(greeting);

运行程序

在Visual Studio Code里,使用“Ctrl + ”(“”为反引号,位于键盘上数字键1的左侧)快捷键打开命令行窗口。然后,使用Node.js命令行工具来运行“hello-world.js”,示例如下:

node hello-world.js

运行上述命令将打印出信息“hello, world”,如图所示。

安装TypeScript

酷客网相关文章:

赞(0)

评论 抢沙发

评论前必须登录!