jquery 的 types 文件源码解读

最近，想为自己的js库，写一个 types.d.ts 文件，方便公司项目中使用，所以看一下 jQuery 的实现
更新于: 2022-08-19 10:49:02

安装

npm i -D @types/jquery

项目结构

.
├── JQuery.d.ts
├── JQueryStatic.d.ts
├── LICENSE
├── README.md
├── dist
│   └── jquery.slim.d.ts
├── index.d.ts
├── legacy.d.ts
├── misc.d.ts
└── package.json

package.json

  • types: index.d.ts 这里是文件的 entry
{
    "name": "@types/jquery",
    "version": "3.5.14",
    "description": "TypeScript definitions for jquery",
    "main": "",
    "types": "index.d.ts",
    "typeScriptVersion": "3.8"
}

index.d.ts

  • types: 这里的文件，直接是来源 node_modules/@types/sizzle 这个包
  • path="xx"，这里指的是文件路径(当前就是指的文件目录)，或者目录路径(这点我没测试过)?
  • export = jQuery: 兼容各种场景的 import ，而不需要 default 的导出方式
/// <reference types="sizzle" />
/// <reference path="JQueryStatic.d.ts" />
/// <reference path="JQuery.d.ts" />
/// <reference path="misc.d.ts" />
/// <reference path="legacy.d.ts" />

export = jQuery;

jQuery 这个来源哪里?

misc.d.ts: 各种杂项，工具之类，提供者

...
declare const jQuery: JQueryStatic;
declare const $: JQueryStatic;
...

JQueryStatic.d.ts 这个文件才是核心

对应 jQuery 的常用方法，成员，对象

  • jQuery.ajaxSettings
  • jQuery.fx
  • jQuery.ready
interface JQueryStatic {
    /**
     * @see \`{@link https://api.jquery.com/jquery.ajax/#jQuery-ajax1 }\`
     * @deprecated ​ Deprecated. Use \`{@link ajaxSetup }\`.
     */
    ajaxSettings: JQuery.AjaxSettings;
    Animation: JQuery.AnimationStatic;
    Callbacks: JQuery.CallbacksStatic;
    fx: JQuery.Effects;
    ready: JQuery.Thenable<JQueryStatic>;
    // ...
}

参考