全局 .d.ts

全局库

全局库是指可以从全局作用域访问的库(即无需使用任何形式的 import)。许多库只是公开一个或多个全局变量以供使用。例如,如果您使用的是 jQuery,则可以通过简单地引用 $ 变量来使用它。

ts
$(() => {
console.log("hello!");
});

您通常会在全局库的文档中看到有关如何在 HTML 脚本标签中使用该库的指南。

html
<script src="http://a.great.cdn.for/someLib.js"></script>

如今,大多数流行的全局可访问库实际上都是作为 UMD 库编写的(见下文)。UMD 库文档很难与全局库文档区分开来。在编写全局声明文件之前,请确保该库实际上不是 UMD 库。

从代码中识别全局库

全局库代码通常非常简单。一个全局的“Hello, world”库可能看起来像这样

js
function createGreeting(s) {
return "Hello, " + s;
}

或者像这样

js
window.createGreeting = function (s) {
return "Hello, " + s;
};

在查看全局库的代码时,您通常会看到

  • 顶层 var 语句或 function 声明
  • 一个或多个对 window.someName 的赋值
  • 假设存在 DOM 原语,如 documentwindow

不会看到

  • 检查或使用模块加载器,例如requiredefine
  • CommonJS/Node.js 风格的导入,形式为var fs = require("fs");
  • 调用define(...)
  • 描述如何require或导入库的文档

全局库示例

由于将全局库转换为 UMD 库通常很容易,因此很少有流行库仍然以全局样式编写。但是,体积小且需要 DOM(或没有依赖项)的库可能仍然是全局的。

全局库模板

您可以在下面看到一个 DTS 示例

ts
// Type definitions for [~THE LIBRARY NAME~] [~OPTIONAL VERSION NUMBER~]
// Project: [~THE PROJECT NAME~]
// Definitions by: [~YOUR NAME~] <[~A URL FOR YOU~]>
/*~ If this library is callable (e.g. can be invoked as myLib(3)),
*~ include those call signatures here.
*~ Otherwise, delete this section.
*/
declare function myLib(a: string): string;
declare function myLib(a: number): number;
/*~ If you want the name of this library to be a valid type name,
*~ you can do so here.
*~
*~ For example, this allows us to write 'var x: myLib';
*~ Be sure this actually makes sense! If it doesn't, just
*~ delete this declaration and add types inside the namespace below.
*/
interface myLib {
name: string;
length: number;
extras?: string[];
}
/*~ If your library has properties exposed on a global variable,
*~ place them here.
*~ You should also place types (interfaces and type alias) here.
*/
declare namespace myLib {
//~ We can write 'myLib.timeout = 50;'
let timeout: number;
//~ We can access 'myLib.version', but not change it
const version: string;
//~ There's some class we can create via 'let c = new myLib.Cat(42)'
//~ Or reference e.g. 'function f(c: myLib.Cat) { ... }
class Cat {
constructor(n: number);
//~ We can read 'c.age' from a 'Cat' instance
readonly age: number;
//~ We can invoke 'c.purr()' from a 'Cat' instance
purr(): void;
}
//~ We can declare a variable as
//~ 'var s: myLib.CatSettings = { weight: 5, name: "Maru" };'
interface CatSettings {
weight: number;
name: string;
tailLength?: number;
}
//~ We can write 'const v: myLib.VetID = 42;'
//~ or 'const v: myLib.VetID = "bob";'
type VetID = string | number;
//~ We can invoke 'myLib.checkCat(c)' or 'myLib.checkCat(c, v);'
function checkCat(c: Cat, s?: VetID);
}

TypeScript 文档是一个开源项目。帮助我们改进这些页面通过发送拉取请求

此页面的贡献者
MHMohamed Hegazy (53)
OTOrta Therox (13)
1+

上次更新:2024 年 3 月 21 日