KnowHub

d.ts 型宣言ファイル

導入

単独で使用されるモジュールは、通常、別個の型宣言ファイル (宣言ファイル) を提供します。このファイルには、このモジュールの外部インターフェイスのすべての型が記述されます。これは、モジュールのユーザーがインターフェイスを理解するのに便利であり、またコンパイラがチェックするのにも便利です。ユーザーの使い方は正しいでしょうか？

型宣言ファイルには型コードのみが含まれ、特定のコード実装は含まれません。ファイル名は通常、「[モジュール名].d.ts」の形式になります。ここで、「d」は宣言を表します。

たとえば、モジュールのコードは次のようになります。

const maxInterval = 12;

関数 getArrayLength(arr) {
  arr.length を返します。
}

module.exports = {
  getArrayLength、
  最大間隔、
};

その型宣言ファイルは次のように記述できます。

エクスポート関数 getArrayLength(arr: any[]): 数値;
エクスポート定数 maxInterval: 12;

型宣言ファイルでは、export = コマンドを使用して外部インターフェイスを出力することもできます。以下は、moment モジュールの型宣言ファイルの例です。

モジュール 'moment' を宣言します {
  関数 moment(): 任意;
  エクスポート = 瞬間;
}

上記の例では、モジュール「moment」内に関数「moment()」があり、「export =」は「module.exports」がこの関数を出力することを意味しています。

型宣言ファイル内のモジュール出力は、export = を使用する以外に、exportdefault を使用して表現することもできます。

//モジュール出力
module.exports = 3.142;

//出力ファイルを入力します
// 書き方その１
const pi:数値を宣言します。
デフォルトの pi をエクスポートします。

//書き方２
const pi:数値を宣言します。
エクスポート=pi;

上記の例では、モジュールは整数を出力するため、「export default」または「export =」を使用してこの値を出力できます。

以下に、型宣言ファイルの使用方法の簡単な例を示します。型宣言ファイル types.d.ts があります。

// タイプ.d.ts
エクスポート インターフェイスの文字 {
  キャッチフレーズ?: 文字列;
  名前: 文字列;
}

その後、このファイルで宣言された型を TypeScript スクリプトにインポートできます。

// インデックス.ts
import { Character } from "./types";

エクスポート const 文字:Character = {
  キャッチフレーズ: 「やったー！」、
  名前：「サンディ・チークス」、
};

型宣言ファイルはプロジェクトの tsconfig.json ファイルに含めることもできます。この場合、コンパイラーはプロジェクトをパッケージ化するときに、各スクリプトに型宣言ファイルをロードすることなく、自動的に型宣言ファイルをコンパイルに追加します。たとえば、moment モジュールの型宣言ファイルは moment.d.ts であり、moment モジュールを使用するプロジェクトはそれをプロジェクトの tsconfig.json ファイルに追加できます。

{
  "compilerOptions": {},
  「ファイル」: [
    "src/index.ts",
    「タイピング/モーメント.d.ts」
  ]
}

型宣言ファイルのソース

型宣言ファイルは主に次の 3 つのソースから取得されます。

  • TypeScript コンパイラによって自動的に生成されます。
  • TypeScript 組み込みタイプ ファイル。 ・外部モジュールの型宣言ファイルはお客様ご自身でインストールする必要があります。

自動生成

コンパイル オプション declaration が使用されている限り、コンパイラはコンパイル時に別の型宣言ファイルを自動的に生成します。

以下は、tsconfig.json ファイルでこのオプションをオンにします。

{
  "コンパイラーオプション": {
    「宣言」: true
  }
}

コマンドラインからこのオプションをオンにすることもできます。

$ tsc --宣言

組み込み宣言ファイル

TypeScript 言語をインストールすると、いくつかの組み込み型宣言ファイル (主に組み込みグローバル オブジェクト (JavaScript 言語インターフェイスおよびランタイム環境 API) の型宣言) が同時にインストールされます。

これらの組み込み宣言ファイルは、TypeScript 言語のインストール ディレクトリの lib フォルダーにあります。主なファイルのいくつかを次に示します。

  • lib.d.ts -lib.dom.d.ts
  • lib.es2015.d.ts
  • lib.es2016.d.ts
  • lib.es2017.d.ts
  • lib.es2018.d.ts
  • lib.es2019.d.ts
  • lib.es2020.d.ts
  • lib.es5.d.ts
  • lib.es6.d.ts

これらの組み込み宣言ファイルのファイル名は「lib.[description].d.ts」の形式で統一されており、「description」の部分がファイルの内容を記述します。たとえば、ファイル「lib.dom.d.ts」は DOM 構造のタイプを記述します。

開発者がグローバル オブジェクトの型インターフェイス (ES6 グローバル オブジェクトの型など) を知りたい場合は、これらの組み込み宣言ファイルを確認できます。

TypeScript コンパイラは、コンパイル ターゲット target の値に基づいて、対応する組み込み宣言ファイルを自動的にロードするため、特別な構成は必要ありません。ただし、コンパイル オプション lib を使用して、どの組み込み宣言ファイルをロードするかを指定できます。

{
  "コンパイラーオプション": {
    "lib": ["dom", "es2021"]
  }
}

上記の例では、lib オプションは 2 つの組み込み型宣言ファイル dom と es2021 をロードすることを指定しています。

コンパイル オプション noLib は、組み込み宣言ファイルのロードを無効にします。

外部型宣言ファイル

外部のサードパーティ コード ライブラリがプロジェクトで使用されている場合は、このライブラリの型宣言ファイルが必要です。

この時、３つの状況に分けられます。

(1) このライブラリには型宣言ファイルが付属しています。

一般に、このライブラリのソース コードに [vendor].d.ts ファイルが含まれている場合、それには型宣言ファイルが付属します。 「vendor」はライブラリの名前を表します。たとえば、「moment」ライブラリには「moment.d.ts」が付属しています。このライブラリを使用するには、その型宣言ファイルを個別にロードする必要がある場合があります。

(2) このライブラリには付属していませんが、コミュニティによって作成された型宣言ファイルを見つけることができます。

サードパーティのライブラリが型宣言ファイルを提供していない場合でも、コミュニティがそれを提供することがよくあります。 TypeScript コミュニティは主に DefinitelyTyped リポジトリ を使用します。ここにはさまざまな型宣言ファイルが送信され、数千のサードパーティ ライブラリがすでに含まれています。

これらの宣言ファイルは、@types 名前空間の下で npm への別個のライブラリとして公開されます。例えば、jQueryの型宣言ファイルは@types/jqueryというライブラリとして公開されており、利用する際にはこのライブラリをインストールするだけで済みます。

$ npm install @types/jquery --save-dev

上記のコマンドを実行すると、@types/jquery ライブラリがプロジェクトの node_modules/@types/jquery ディレクトリにインストールされます。その中の index.d.ts ファイルは jQuery の型宣言ファイルです。型宣言ファイルが index.d.ts でない場合は、package.json の types または typings フィールドに型宣言ファイルのファイル名を指定する必要があります。

TypeScript はモジュールを node_modules/@types ディレクトリに自動的にロードしますが、この動作はコンパイル オプション typeRoots を使用して変更できます。

{
  "コンパイラーオプション": {
    "typeRoots": ["./typings", "./vendor/types"]
  }
}

上記の例は、TypeScript が node_modules/@types ディレクトリに移動するのではなく、現在の tsconfig.json と同じレベルにある typings および vendor/types サブディレクトリに移動して型モジュールをロードすることを示しています。

デフォルトでは、TypeScript は typeRoots ディレクトリ内のすべてのモジュールを自動的にロードします。コンパイル オプション types でどのモジュールをロードするかを指定できます。

{
  "コンパイラーオプション": {
    "タイプ" : ["jquery"]
  }
}

上記の設定では、types 属性は配列であり、メンバーはロードされる型モジュールです。複数のモジュールをロードするために、この配列には複数のメンバーが含まれます。各型モジュールは typeRoots ディレクトリに独自のサブルーチンを持ちます。目次。この場合、TypeScript は自動的に jquery サブディレクトリに移動し、jQuery 型宣言ファイルを読み込みます。

(3) 型宣言ファイルが見つからないため、自分で記述する必要があります。

サードパーティのライブラリには型宣言ファイルがない場合があり、ライブラリの完全な型の説明を行うのは困難です。この場合、関連するオブジェクトの型が「any」であることを TypeScript に伝えることができます。たとえば、jQueryを使用したスクリプトは次のように記述できます。

var $:any を宣言します

// または
type JQuery = any を宣言します。
var $:JQuery を宣言します。

上記のコードは、jQuery の $ オブジェクトが外部からインポートされ、その型が any であることを示しています。これは、TypeScript がそれを型チェックする必要がないことを意味します。

以下の書き方で外部モジュール全体のタイプをanyに設定することもできます。

モジュール「モジュール名」を宣言します。

上記のコマンドを使用すると、指定されたモジュールのすべてのインターフェイスが「any」タイプとして扱われます。

キーワードを宣言する

型宣言ファイルには型の説明のみが含まれ、特定の実装は含まれていないため、型を記述するために宣言ステートメントを使用するのが非常に適しています。 Declare キーワードの具体的な使用方法については、「declare キーワード」の章を参照してください。ここでは、型宣言ファイルでの使用方法について説明します。

型宣言ファイルでは、変数の型の説明に declare コマンドを使用する必要があります。そうしないと、変数宣言ステートメントが値に関連するコードであるため、エラーが報告されます。

let foo:string を宣言します。

インターフェースは完全な型コードであるため、インターフェースの型に「declare」があるかどうかは関係ありません。

インターフェース Foo {} // 正しい
インターフェース Foo {} // 正しいものを宣言します

型宣言ファイルでは、ユーザー スクリプトが型を入力するために明示的に 'export' コマンドを使用しない限り、最上位の 'export' コマンドを使用することも、使用しないこともできます。

エクスポートインターフェイス データ {
  バージョン: 文字列;
}

以下に型宣言ファイルの例をいくつか示します。まず、moment モジュールの型記述ファイル moment.d.ts を見てください。

モジュール 'moment' を宣言します {
  エクスポート インターフェイス モーメント {
    フォーマット(フォーマット:文字列): 文字列;

    追加（
      金額: 数値、
      単位: '日' | '年'
    ）： 一瞬;

    減算(
      金額:数値、
      単位: '日' | '年' |
    ）： 一瞬;
  }

  関数 moment(
    入力?: 文字列 |
  ）： 一瞬;

  デフォルトの瞬間をエクスポートします。
}

上記の例では、デフォルトのインターフェース moment() がどのように記述されているかに注目してください。

以下はD3ライブラリの型宣言ファイルD3.d.tsです。

名前空間 D3 を宣言 {
  エクスポート インターフェイス セレクター {
    選択: {
      (セレクタ: 文字列): 選択;
      (要素: EventTarget): 選択;
    };
  }

  エクスポート インターフェイス イベント {
    x: 数値。
    y: 数値。
  }

  エクスポート インターフェイス Base extends セレクター {
    イベント: イベント;
  }
}

変数 d3 を宣言します: D3.Base;

モジュールのリリース

現在のモジュールに独自の型宣言ファイルが含まれている場合は、package.json ファイルに「types」フィールドまたは「typings」フィールドを追加して、型宣言ファイルの場所を示すことができます。

{
  "名前": "すごい",
  "著者": "ヴァンディレイ工業",
  "バージョン": "1.0.0",
  "メイン": "./lib/main.js",
  "タイプ": "./lib/main.d.ts"
}

上の例では、「types」フィールドは型宣言ファイルの場所を示します。

なお、型宣言ファイルの名前が「index.d.ts」でプロジェクトのルートディレクトリにある場合は、「package.json」に指定する必要はありません。

場合によっては、型宣言ファイルが npm モジュールとして個別に公開されることがあります。その場合、ユーザーはモジュールを同時にロードする必要があります。

{
  "名前": "browserify-typescript-extension",
  "著者": "ヴァンディレイ工業",
  "バージョン": "1.0.0",
  "メイン": "./lib/main.js",
  "タイプ": "./lib/main.d.ts",
  "依存関係": {
    "ブラウザ": "最新",
    "@types/browserify": "最新",
    "タイプスクリプト": "次へ"
  }
}

上の例は、browserify モジュールを必要とするモジュールの package.json ファイルです。後者の型宣言ファイルは別のモジュール @types/browserify であるため、そのモジュールもロードする必要があります。

トリプルスラッシュコマンド

型宣言ファイルの内容が非常に大きい場合は、複数のファイルに分割することができ、エントリ ファイルはトリプル スラッシュ コマンドを使用して他の分割ファイルをロードします。

たとえば、エントリ ファイルは main.d.ts で、内部のインターフェイスは interfaces.d.ts で定義され、関数は functions.d.ts で定義されます。次に、main.d.ts でトリプル スラッシュ コマンドを使用して、次の 2 つのファイルをロードできます。

/// <参照パス="./interfaces.d.ts" />
/// <参照パス="./functions.d.ts" />

トリプル スラッシュ コマンド (///) は、コンパイラの動作を指定するために使用される TypeScript コンパイラ コマンドです。ファイルの先頭でのみ使用できます。それ以外の場所で使用した場合は、通常のコメントとして扱われます。さらに、ファイル内でトリプル スラッシュ コマンドが使用されている場合、トリプル スラッシュ コマンドの前に使用できるのは、単一行のコメント、複数行のコメント、およびその他のトリプル スラッシュ コマンドのみです。それ以外の場合は、トリプル スラッシュ コマンドも次のように扱われます。普通のコメント。

型宣言ファイルの分割に加えて、トリプル スラッシュ コマンドを通常のスクリプトで使用して型宣言ファイルをロードすることもできます。

トリプル スラッシュ コマンドには主に 3 つのパラメータが含まれており、3 つの異なるコマンドを表します。

  • パス
  • 種類 -lib

これらについては、以下で順番に説明します。

/// <参照パス="" />

/// <reference path="" /> は最も一般的な 3 つのスラッシュ コマンドで、コンパイル中にどのファイルを含める必要があるかをコンパイラーに指示します。これは、現在のスクリプトが依存するタイプ ファイルを宣言するためによく使用されます。

/// <参照パス="./lib.ts" />

カウント = add(1, 2); とします。

上の例は、現在のスクリプトが add() の定義を含む ./lib.ts に依存していることを示しています。現在のスクリプトがコンパイルされると、./lib.ts もコンパイルされます。コンパイルされた製品には 2 つの JS ファイルが含まれます。1 つは現在のスクリプトで、もう 1 つは ./lib.js です。

以下の例は、Node.js 型宣言ファイルに依存する現在のスクリプトです。

/// <参照パス="node.d.ts"/>
import * を "url" から URL としてインポートします。
let myUrl = URL.parse("https://www.typescriptlang.org");

コンパイラは、前処理フェーズ中に 3 つのスラッシュで参照されるすべてのファイルを検索し、コンパイル リストに追加して、一緒にコンパイルします。

path パラメータは、インポートされたファイルのパスを指定します。パスが相対パスの場合、計算は現在のスクリプトのパスに基づいて行われます。

このコマンドを使用する場合、注意すべき点が 2 つあります。

  • path パラメータは既存のファイルを指している必要があります。ファイルが存在しない場合は、エラーが報告されます。
  • path パラメータは現在のファイルを指すことはできません。

デフォルトでは、トリプルスラッシュコマンドによって導入された各スクリプトは、別個の JS ファイルにコンパイルされます。コンパイル後にマージされたファイルを 1 つだけ生成したい場合は、コンパイル オプション outFile を使用できます。ただし、「outFile」コンパイル オプションは、CommonJS モジュールと ES モジュールのマージをサポートしていません。コンパイル パラメータ「module」の値が None、System、または AMD に設定されている場合にのみ、ファイルにコンパイルできます。

コンパイル パラメータ noResolve がオンになっている場合、三重スラッシュ ディレクティブは無視されます。これを通常のコメントとして扱い、コンパイルされた製品では変更しないでください。

/// <参照タイプ="" />

types パラメーターは、現在のスクリプトが DefinitelyTyped タイプ ライブラリ (通常は node_modules/@types ディレクトリにインストールされる) に依存していることをコンパイラーに伝えるために使用されます。

types パラメータの値はタイプ ライブラリの名前であり、これは node_modules/@types ディレクトリにインストールされるサブディレクトリの名前です。

/// <reference type="node" />

上記の例では、この 3 つのスラッシュ コマンドは、コンパイル中に Node.js タイプ ライブラリを追加することを意味します。追加される実際のスクリプトは、node_modules ディレクトリ内の @types/node/index.d.ts です。

ご覧のとおり、このコマンドの機能は import コマンドと似ています。

このコマンドは、型宣言ファイル (.d.ts ファイル) を手書きする場合にのみ必要であることに注意してください。つまり、通常の .ts スクリプト ファイルでは使用できません。このコマンドを記述する必要はありません。通常の .ts スクリプトの場合は、tsconfig.json ファイルの types 属性を使用して、依存するタイプ ライブラリを指定できます。

/// <reference lib="" />

/// <reference lib="..." /> コマンドを使用すると、スクリプト ファイルに組み込み lib ライブラリを明示的に含めることができます。これは、lib 属性を使用して で lib ライブラリを指定するのと同じです。 tsconfig.json ファイル。

前に述べたように、TypeScript ソフトウェア パッケージをインストールすると、いくつかの組み込み型宣言ファイル、つまり組み込み lib ライブラリが同時にインストールされます。これらのライブラリ ファイルは TypeScript インストール ディレクトリの lib フォルダにあり、JavaScript 言語とエンジンの標準 API が記述されています。

ライブラリ ファイルは修正されておらず、TypeScript のバージョンがアップグレードされると更新されます。ライブラリファイルは一律に「lib.[description].d.ts」という命名方法を使用しており、/// <reference lib="" /> の lib 属性の値がライブラリファイルの description 部分になります。ライブラリ ファイル名。たとえば、lib="es2015" はライブラリ ファイル lib.es2015.d.ts をロードすることを意味します。

/// <reference lib="es2017.string" />

上記の例では、「es2017.string」に対応するライブラリファイルは「lib.es2017.string.d.ts」です。

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章