在Visual Studio 2022的ASP.NET Core 6.0中如何实现TypeScript即时编译？

下面是几种能实现保存TS文件后自动编译为JS的配置方案，按需选择即可：

方法一：通过Visual Studio内置配置开启保存时编译 #

• 右键项目，选择「属性」
• 切换到「生成」选项卡，找到「TypeScript编译」区域
• 勾选「保存时编译」选项（可保留「编译OnBuild」选项，兼顾生成时编译）
• 保存项目设置后，修改TS文件并保存，对应的JS文件会自动同步更新

方法二：用tsconfig.json开启watch模式 #

• 在项目根目录创建或修改tsconfig.json，添加以下核心配置（可根据项目需求调整其他参数）：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "outDir": "./wwwroot/js", // 指定JS输出目录，需匹配项目静态文件路径
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["./wwwroot/ts/**/*"], // 指定要监听的TS文件范围
  "watch": true // 开启监听模式，自动检测文件变更并编译
}

• 打开Visual Studio的终端或包管理器控制台，进入项目根目录执行命令：tsc，此时编译器会持续监听TS文件，保存修改后立即编译

方法三：绑定任务运行器自动启动watch #

• 右键项目，选择「任务运行器资源管理器」
• 点击「绑定」→「项目打开」，将tsc -w命令绑定到项目打开事件，每次启动项目时自动开启监听
• 也可以直接在终端运行tsc -w，保持窗口打开即可持续生效

注意事项 #

• 确保Visual Studio已安装TypeScript SDK，可通过「工具」→「获取工具和功能」→「单个组件」中勾选TypeScript相关组件安装
• 若使用ASP.NET Core热重载，需保证JS输出目录在静态文件范围内，避免手动刷新页面
• 若项目已有tsconfig.json，直接修改watch参数为true即可，无需重复创建

内容的提问来源于stack exchange，提问作者Aliq Qim