编译 TypeScript 代码（Node.js）

使用 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中。

   对于较旧的项目类型（.njsproj），需要安装 Node.js 开发工作负载和 Node.js 运行时。

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/**/*"
     ]
   }
   

   在此示例中：

   • 包括 告知编译器在何处查找 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. 如果需要配置选项（如启动页、Node.js 运行时、应用程序端口或运行时参数的路径），请在解决方案资源管理器中右键单击项目节点，然后选择 属性。

   注意

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

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

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

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

   调试需要源映射文件。

运行应用程序

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

自动化生成任务

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

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

相关内容

属性、React、Angular、Vue