グローバル .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`への1つ以上の代入
  • `document`や`window`のようなDOMプリミティブが存在するという仮定

次のものは見られません

  • `require`や`define`のようなモジュールローダーのチェックまたは使用
  • `var fs = require("fs");`形式のCommonJS/Node.jsスタイルのインポート
  • `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ドキュメントはオープンソースプロジェクトです。プルリクエストを送信して、これらのページの改善にご協力ください by sending a Pull Request

このページへの貢献者
MHMohamed Hegazy (53)
OTOrta Therox (13)
1+

最終更新日: 2024年3月21日