typescript环境安装并开启VSCode自动监视编译ts文件为js文件

下面是详细的 TypeScript 环境安装并开启 VSCode 自动监视编译ts文件为js文件的攻略。

步骤

1. 安装 TypeScript

首先需要安装 TypeScript，可以通过命令行执行以下命令进行全局安装：

npm install -g typescript

2. 创建 TypeScript 文件

创建一个名为 main.ts 的文件，内容如下：

let greeting: string = "Hello, TypeScript!";
console.log(greeting);

3. 初始化 VSCode 项目

进入 main.ts 文件所在的目录，通过命令行执行以下命令初始化一个 VS Code 项目：

code .

此时 VS Code 会打开该目录。

4. 配置 VSCode 自动监视编译 ts 文件为 js 文件

在 VS Code 中，使用 Ctrl + Shift + P 打开命令面板，在搜索框输入 “Tasks: Configure Task”，选择 “Create tasks.json file from template” 并回车。

此时会弹出一个下拉菜单，选择 “TypeScript - Watch Mode”，即可生成 tasks.json 文件。

编辑 tasks.json 文件，将其内容修改为如下：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "TypeScript - Watch Mode",
      "command": "tsc",
      "args": ["-p", "."],
      "isBackground": true,
      "problemMatcher": "$tsc-watch"
    }
  ]
}

5. 启动 TypeScript 编译

在 VS Code 中，使用 Ctrl + Shift + B 快捷键，选择 “TypeScript - Watch Mode” 任务，即可开始自动监视编译 ts 文件为 js 文件。

示例说明

示例1

假设您当前的项目路径是 C:\projects\web\ts-demo，您可以在该目录下创建一个名为 main.ts 的文件，内容如下：

let greeting: string = "Hello, TypeScript!";
console.log(greeting);

按上述步骤操作后，启动编译任务后，您将在 C:\projects\web\ts-demo 目录下看到一个名为 main.js 的文件，其内容为：

var greeting = "Hello, TypeScript!";
console.log(greeting);

示例2

假设您当前的项目路径是 D:\work\tsprojects\test，该项目包含两个 ts 文件：main.ts 和 foo.ts。main.ts 文件中引用了 foo.ts 中的变量。代码如下：

main.ts

import { foo } from "./foo";

let greeting: string = `Hello, ${foo}!`;
console.log(greeting);

foo.ts

export const foo: string = "TypeScript";

按上述步骤操作后，启动编译任务后，您将在 D:\work\tsprojects\test 目录下看到一个名为 main.js 和一个名为 foo.js 的文件，内容分别为：

main.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const foo_1 = require("./foo");
let greeting = `Hello, ${foo_1.foo}!`;
console.log(greeting);

foo.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.foo = "TypeScript";

当您在编写代码时，如果有语法错误，在 VS Code 中会显示错误信息，同时不会生成对应的 js 文件。如果您修改了代码并保存文件，编译任务会自动重新编译相应的 ts 文件。