通过

使用 npm 编译 TypeScript 代码

使用 TypeScript npm 包将 TypeScript 支持添加到基于 JavaScript 项目系统（JSPS）的项目，或 .esproj。 从 Visual Studio 2019 开始，建议使用 npm 包而不是 TypeScript SDK。 TypeScript npm 包在不同的平台和环境之间提供更大的可移植性。

重要

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

使用 npm 添加 TypeScript 支持

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

  1. 检查是否需要为 Visual Studio 或 Node.js 运行时安装任何开发工作负载。

    对于使用 JavaScript 项目系统（JSPS）创建的项目，或 .esproj，无需其他工作负载。 你只需安装 npm（https://www.npmjs.com/），它包含在 Node.js中。

  2. 如果项目尚未包含该项目，请安装 TypeScript npm 包。

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

    在 输出 窗口中检查 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/**/*"
  ]
}

    在此示例中：

    • 包括 告知编译器在何处查找 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 生成和清理命令的支持。

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

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

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

  3. 如果需要配置生成和部署选项（例如应用 URL 或运行时命令），请右键单击解决方案资源管理器中的项目节点，然后选择 “属性”。

    注意

    配置第三方工具时，使用 JavaScript 项目系统（JSPS）或 .esproj 的项目不使用工具选项>项目和解决方案>Web 包管理>外部 Web 工具>配置的路径。 这些设置用于其他项目类型。

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

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

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

    调试需要源映射文件。

运行应用程序

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

自动化生成任务

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

相关内容

属性、React、Angular、Vue

  • Last updated on