通过

使用 npm 转译 TypeScript 代码

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

重要

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

使用 npm 添加 TypeScript 支持

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

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

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

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

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

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

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

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

    Visual Studio将 tsconfig.json 文件添加到项目根目录中。 可以使用此文件来配置 tsc（TypeScript 编译器） 的选项 ，该编译器将 TypeScript 转译为 JavaScript。

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

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

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

    在此示例中：

    • 包括 告知编译器在何处查找 TypeScript （*.ts） 文件。
    • outDir 选项指定 tsc（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 或运行时命令），请右键单击解决方案资源管理器中的项目节点，然后选择 Properties。

    注意

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

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

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

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

    调试需要源映射文件。

运行应用程序

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

自动化生成任务

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

  • NPM 任务运行程序 - 添加了对 package.json中定义的 npm 脚本的支持。 支持 yarn。
  • Webpack 任务运行程序 - 添加了对 Webpack 的支持。

相关内容

属性、React、Angular、Vue

  • Last updated on