如何结合Spring Thymeleaf将TypeScript编译为JavaScript？

1. 先搞定环境依赖 #

首先得装Node.js（自带npm），TypeScript的编译器tsc依赖Node环境运行：

• 装完Node后，打开终端全局安装TypeScript：

  npm install -g typescript
  

• 验证安装成功，终端输入：

  tsc -v
  

  能显示版本号就说明没问题。

2. 配置TypeScript编译规则 #

进入你的TypeScript文件所在目录（/d/Project_MIS/AppsListing/AppsListing/src/main/resources/typeScript/），终端运行：

tsc --init

这会生成tsconfig.json配置文件，修改几个关键参数适配你的需求：

• target: 设为"ES6"（浏览器兼容性好，新手够用）
• jsx: 因为你的文件是.tsx（带JSX语法），设为"react-jsx"（直接转成可执行的JS）
• outDir: 设为"./"，让编译后的JS和TS文件在同一个目录（删掉该配置也默认同目录）
• include: 指定要编译的文件，比如["./remoteMenu.tsx"]
• strict: 新手可以先设为false，避免严格类型检查带来的额外报错

修改后的核心配置示例：

{
  "compilerOptions": {
    "target": "ES6",
    "jsx": "react-jsx",
    "outDir": "./",
    "strict": false
  },
  "include": ["./remoteMenu.tsx"]
}

3. 编译TypeScript文件 #

在typeScript目录下，终端运行：

tsc

立刻就能生成对应的remoteMenu.js文件，和TS文件同目录。

如果想让编译器自动监听TS文件修改，改完自动重新编译，用：

tsc --watch

这个命令会一直运行，只要你修改remoteMenu.tsx，就会自动更新JS文件。

4. 结合Spring的注意事项 #

• Spring启动后，src/main/resources下的文件会被打包到classpath中。要确保前端HTML的引用路径正确：
  比如你的HTML如果在src/main/resources/templates下，../typeScript/remoteMenu.js的相对路径可能出错，建议把TS文件移到src/main/resources/static/typeScript目录下，编译后的JS也在这里，HTML里用绝对路径引用更可靠：

  <script src="/typeScript/remoteMenu.js"></script>
  

• Spring Boot默认会把static目录下的内容作为静态资源根路径，上面的绝对路径能保证任何位置的HTML都能找到JS文件。

5. 可选：用npm脚本简化操作 #

如果觉得每次敲tsc麻烦，在项目根目录（或typeScript目录）初始化npm：

npm init -y

打开生成的package.json，在scripts里添加：

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

之后编译只需运行：

npm run build

自动监听修改则用：

npm run watch

内容的提问来源于stack exchange，提问作者Mango Play