如何在Next.js TypeScript项目中添加jquery.easing的.d.ts声明

步骤1：安装依赖（未安装时执行） #

先确保项目已安装jquery和jquery.easing：

npm install jquery jquery.easing --save
# 或使用yarn
yarn add jquery jquery.easing

步骤2：创建类型声明文件 #

在项目中新建一个.d.ts类型声明文件，推荐放在src/types目录下（无types目录则先创建），文件名可设为jquery-easing.d.ts。

在该文件中添加以下内容：

declare module 'jquery.easing';

步骤3：配置TypeScript识别声明文件 #

打开项目根目录的tsconfig.json，找到include数组，确保其包含声明文件的路径。例如声明文件在src/types下，就添加对应路径：

{
  "include": [
    "src/**/*",
    "src/types/**/*.d.ts"
  ]
}

若声明文件直接放在项目根目录，则添加"*.d.ts"到include数组中。

步骤4：在组件中正确导入使用 #

在.tsx组件里，先导入jquery再导入jquery.easing（插件依赖jquery全局实例）：

import $ from 'jquery';
import 'jquery.easing';

// 示例使用方式
$('.target-element').animate({ scrollTop: 0 }, 1000, 'easeInOutQuad');

完成以上操作后，TypeScript就不会再报找不到jquery.easing模块的错误了。

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