jQuery Validate插件在TypeScript环境下无法使用的问题求助

问题重现 #

基础jQuery代码可正常运行：

$(document).ready(function() {
    alert('hi')
})

但调用表单验证方法时触发TypeScript编译错误：

Property 'validate' does not exist on type 'JQuery'

对应的报错代码：

$(document).ready(function() {
    $("#form").validate();
})

已尝试执行命令安装类型依赖：

npm install --save @types/jquery.validation

用户提供的完整HTML及代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="/styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <title>Document</title>
</head>
<body>
    <section class="section">
        <div class="wrapper"></div>
        <form class="form__box" id="form">
            <label>Username</label>
            <input type="text" name="username">
            <label>E-mail</label>
            <input name="email" type="text">
            <label>Password</label>
            <input name="password" type="text">
            <button>SUBMIT</button>
        </form>
    </section>
    <script src="/scripts.js">   
    </script>
</body>
</html>

$(document).ready(function() {
    $("#form").validate();
})

解决方案 #

1. 安装正确的类型定义包 #

你安装的@types/jquery.validation是错误的包，jQuery Validate的官方类型定义包为@types/jquery.validate，执行以下命令修正：

npm uninstall @types/jquery.validation
npm install --save-dev @types/jquery.validate

2. 确保TypeScript识别类型定义 #

检查项目根目录的tsconfig.json，确认compilerOptions中的types数组包含jquery和jquery.validate：

{
  "compilerOptions": {
    // 其他配置...
    "types": ["jquery", "jquery.validate"]
  }
}

如果没有types字段，TypeScript会自动扫描node_modules/@types目录下的类型定义，只要包安装正确就能自动识别。

3. 手动扩展JQuery接口（备选方案） #

如果上述方法仍无效，可以在你的TypeScript文件顶部手动扩展JQuery接口，让编译器认可validate方法：

interface JQuery {
  validate(options?: Record<string, any>): any;
}

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