当然可以把TypeScript和jQuery结合用在你的JSP项目里！你之前没成功大概率是配置或者编译环节没踩对要点，我给你详细捋捋可行的方案，再说说如果不想用TS的替代思路：

1. 先搭好TypeScript环境 #

如果你的项目还没初始化npm，先在项目根目录跑：

npm init -y

然后安装TypeScript和jQuery的类型定义文件（这步很关键，不然TS识别不了jQuery的API）：

npm install typescript @types/jquery --save-dev

2. 配置TS编译规则 #

在项目根目录新建tsconfig.json，核心配置要注意输出路径和类型检查：

{
  "compilerOptions": {
    "target": "ES6", // 要是需要兼容旧浏览器可以改成ES5
    "module": "ESNext",
    "outDir": "src/main/webapp/js", // 编译后的JS要放到JSP能访问到的静态资源目录，比如webapp下的js文件夹
    "strict": true, // 开启严格类型检查，实现你要的类型安全
    "esModuleInterop": true // 解决模块导入兼容问题
  },
  "include": ["src/ts/**/*"] // 指定你的TS源码存放目录
}

3. 写TS代码并编译 #

比如在src/ts/main.ts里写结合jQuery的代码：

// 可以用模块导入jQuery，或者直接用全局的$（只要jQuery在前面引入）
import $ from 'jquery';

$(document).ready(() => {
  // 给元素指定类型，获得更精准的类型提示
  const $button = $('#myButton') as JQuery<HTMLButtonElement>;
  $button.click(() => {
    alert('TypeScript + jQuery 在JSP里跑起来啦！');
  });
});

然后在命令行跑tsc，TS就会把代码编译到你配置的outDir目录里。

4. 在JSP中引入编译后的JS #

注意要先引入jQuery，再引入编译后的TS代码：

<!-- 先引入jQuery，可以用CDN或者本地文件 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 引入编译后的JS文件 -->
<script src="${pageContext.request.contextPath}/js/main.js"></script>

如果觉得TS的编译流程有点繁琐，也可以用下面的方式达到目的：

1. 用JSDoc实现类型提示与检查 #

给你的jQuery代码加上JSDoc注释，搭配VS Code这类编辑器就能获得类型提示，还能开启JS的类型检查：

/**
 * 处理按钮点击事件
 * @param {JQuery<HTMLButtonElement>} $button 目标按钮的jQuery对象
 */
function handleButtonClick($button) {
  $button.click(() => {
    // 编辑器会自动提示jQuery的方法，还能检查类型错误
  });
}

$(document).ready(() => {
  const $myButton = $('#myButton');
  handleButtonClick($myButton);
});

再在项目根目录新建jsconfig.json开启JS的严格类型检查：

{
  "compilerOptions": {
    "checkJs": true,
    "strict": true
  },
  "include": ["src/main/webapp/js/**/*"]
}

2. 用Babel转译ES6+代码 #

如果需要兼容旧浏览器，又想写ES6+语法，可以用Babel把代码转译为ES5：
先安装依赖：

npm install @babel/core @babel/cli @babel/preset-env --save-dev

新建.babelrc配置文件：

{
  "presets": ["@babel/preset-env"]
}

然后跑转译命令：

npx babel src/js --out-dir src/main/webapp/js

最后在JSP里引入转译后的JS文件就行。

你之前没成功大概率是这几个原因：

• 没装@types/jquery，导致TS识别不了$的类型；
• 编译后的JS路径不对，JSP找不到文件；
• jQuery的引入顺序在TS编译后的JS之后，导致$未定义。

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