通过

编译 TypeScript 代码 (Node.js)

  • 项目

使用 TypeScript npm 包向基于 JavaScript Project System (JSPS) 的项目（或 .esproj）添加 TypeScript 支持。 从 Visual Studio 2019 开始，建议使用 npm 包而不是 TypeScript SDK。 TypeScript npm 包提供更高的跨平台和环境可移植性。

重要

对于 ASP.NET Core 项目，请使用 NuGet 包而不是 npm 来添加 TypeScript 支持。

使用 npm 添加 TypeScript 支持

TypeScript npm 包添加 TypeScript 支持。 当 TypeScript 2.1 或更高版本的 npm 包安装到项目中时，将在编辑器中加载相应版本的 TypeScript 语言服务。

  1. 按照说明安装 Node.js 开发工作负载和 Node.js 运行时。

    对于简单的 Visual Studio 集成，请使用 Node.js TypeScript 模板之一（如空白 Node.js Web 应用模板）创建项目。 否则，请使用 Visual Studio 随附的 Node.js JavaScript 模板并按照此处的说明进行操作。 或者，使用打开文件夹项目。

  2. 如果你的项目尚未包含它，则安装 TypeScript npm 包。

    在解决方案资源管理器（右窗格）中，打开项目根目录中的 package.json。 列出的包对应于解决方案资源管理器中 npm 节点下的包。 有关详细信息，请参阅管理 npm 包。

    对于 Node.js 项目，可以使用命令行或 IDE 安装 TypeScript npm 包。 若要使用 IDE 安装，请在解决方案资源管理器中右键单击“npm”节点，选择“安装新的 npm 包”，搜索“TypeScript”，然后安装包。

    选中“输出”窗口中的“npm”选项，以查看包安装进度。 安装的包显示在解决方案资源管理器的“npm”节点下。

  3. 如果项目尚未包含它，请将 tsconfig.json 文件添加到项目根目录。 若要添加文件，请右键单击项目节点，然后依次选择“添加”>“新项”。 选择“TypeScript JSON 配置文件”，然后单击“添加”。

    如果看不到所有项模板，请选择“显示所有模板”，然后选择项模板。

    Visual Studio 会将 tsconfig.json 文件添加到项目根目录中。 可以使用此文件为 TypeScript 编译器配置选项。

  4. 打开 tsconfig.json 并更新，以设置所需的编译器选项。

    下面是一个简单的 tsconfig.json 文件示例。

    {
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "dist"
  },
  "include": [
    "scripts/**/*"
  ]
}

    在此示例中：

    • include 告诉编译器在何处查找 TypeScript (*.ts) 文件。
    • outDir 选项指定 TypeScript 编译器转译的普通 JavaScript 文件的输出文件夹。
    • “sourceMap”选项指示编译器是否生成 sourceMap 文件。

    以前的配置仅提供配置 TypeScript 的基本简介。 有关其他选项的信息，请参阅 tsconfig.json。

生成应用程序

  1. 将 TypeScript (.ts) 或 TypeScript JSX (.tsx) 文件添加到项目，然后添加 TypeScript 代码。 TypeScript 的简单示例如下：

    let message: string = 'Hello World';
console.log(message);

  2. 在 package.json 中，使用以下脚本添加对 Visual Studio build 和 clean 命令的支持。

    "scripts": {
  "build": "tsc --build",
  "clean": "tsc --build --clean"
},

    若要使用第三方工具（如 webpack）进行生成，可以将命令行生成脚本添加到 package.json 文件：

    "scripts": {
   "build": "webpack-cli app.tsx --config webpack-config.js"
}

    有关将 webpack 与 React 和 webpack 配置文件结合使用的示例，请参阅使用 Node.js 和 React 创建 Web 应用。

    有关将 Vue.js 与 TypeScript 结合使用的示例，请参阅创建 Vue.js 应用程序。

  3. 如果需要配置选项（如启动页、Node.js 运行时路径、应用程序端口或运行时参数），请右键单击解决方案资源管理器中的项目节点，然后选择“属性”。

    注意

    配置第三方工具时，Node.js 项目不会使用“工具”>“选项”>“项目和解决方案”>“Web 包管理”>“外部 Web 工具”下配置的路径。 这些设置用于其他项目类型。

  4. 选择“生成”>“生成解决方案”。

    应用在运行应用时自动生成。 但是，在生成过程中，可能会发生以下情况：

    如果生成了源映射，请打开在“outDir”选项中指定的文件夹，并找到生成的 *.js 文件以及生成的 *js.map 文件。

    调试需要源映射文件。

运行应用程序

有关在编译后运行应用的说明，请参阅创建 Node.js 和 Express 应用。

自动化生成任务

可以使用 Visual Studio 中的任务运行程序资源管理器来帮助自动执行第三方工具（例如 npm 和 webpack）的任务。

相关内容

属性、React、Angular、Vue