TypeScript从CDN加载jQuery及jQueryUI报错问题求助

我之前也碰到过一模一样的情况——用CDN加载jQueryUI，明明装了类型定义，TypeScript却一直报红。其实核心问题在于jQueryUI是挂载在jQuery全局对象上的扩展，不是独立的ES模块，再加上类型配置没跟上，才会出问题。下面一步步给你捋清楚解决办法：

1. 先确认CDN的加载顺序（最容易忽略的基础） #

首先要保证HTML里的CDN脚本是先加载jQuery，再加载jQueryUI，因为jQueryUI完全依赖jQuery才能把自身方法挂载到$对象上：

<!-- 先加载jQuery（注意版本要和你装的@types/jquery@2对应） -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<!-- 再加载jQueryUI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

顺序反了的话，就算类型定义配对了，运行时也会直接报错。

2. 调整TypeScript的引入方式 #

你之前用import * as ui from 'jqueryui'是错的，因为jQueryUI不是独立模块，它不会导出单独的ui对象，而是直接给$打补丁。正确的做法是：

• 保留jQuery的正常引入：import * as $ from 'jquery';
• 用类型声明让TypeScript知道$上已经扩展了jQueryUI的方法：

要么在你的TS文件顶部加一句：

// 告诉TypeScript加载jQueryUI的类型定义，合并到jQuery上
import 'jqueryui';

要么如果项目里有全局类型声明文件（比如typings.d.ts），可以在里面加：

/// <reference types="jqueryui" />

这样TypeScript就会自动把jQueryUI的类型合并到jQuery的类型里，你用$.ui或者$(element).draggable()这类方法时就不会报类型错误了。

3. 检查tsconfig.json的关键配置 #

确保你的tsconfig.json里正确包含了两个库的类型定义，比如：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "lib": ["DOM", "ES6"],
    "types": ["jquery", "jqueryui"], // 必须同时包含这两个
    "typeRoots": ["node_modules/@types"], // 可选，默认就是这个路径，确保类型能被找到
    "moduleResolution": "node", // 让TS按Node.js的模块规则查找类型
    "allowJs": true,
    "strict": false // 如果严格模式太苛刻，暂时关闭来排查问题
  }
}

如果改了配置后还是报错，试试重启TypeScript语言服务（比如VSCode里按Ctrl+Shift+P，选TypeScript: Restart TS Server），有时候类型定义的更新需要重启服务才能识别。

4. 验证是否生效 #

最后写一段测试代码试试：

$(function() {
  $("#test-box").draggable(); // 这里如果不报错，就说明类型配置成功了
});

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