KnowHub

キーワードを宣言する

導入

declare キーワードは、特定の型が存在し、現在のファイルで使用できることをコンパイラーに伝えるために使用されます。

その主な機能は、現在のファイルが他のファイルによって宣言された型を使用できるようにすることです。たとえば、スクリプトで外部ライブラリによって定義された関数を使用する場合、コンパイラは外部関数の型定義を認識しないため、エラーを報告します。この場合、スクリプト内で declare キーワードを使用することができます。コンパイラに外部関数の型定義を伝えます。この場合、単一のスクリプトをコンパイルしても、外部型の使用によるエラーは発生しません。

宣言キーワードでは以下の型を記述できます。

・変数（const、let、varコマンド宣言）

  • typeまたはinterfaceコマンドで宣言された型
  • クラス
  • 列挙型
  • 関数
  • モジュール
  • 名前空間

declare キーワードの重要な特徴は、特定の実装を指定せずに、特定の型が存在することだけをコンパイラーに通知することです。たとえば、関数の実装を指定せずに関数の型のみを記述することは、「declare」を使用しない限り不可能です。

cancel は、既存の変数とデータ構造を記述するためにのみ使用でき、新しい変数とデータ構造を宣言するためには使用できません。さらに、すべての宣言ステートメントがコンパイルされたファイルに現れるわけではありません。

変数を宣言する

declare キーワードは、外部変数の型の説明を与えることができます。

たとえば、現在のスクリプトは、別のスクリプトで定義されたグローバル変数「x」を使用します。

x = 123; // エラー

上の例では、変数 x が別のスクリプトによって定義されており、現在のスクリプトはその型を認識していないため、コンパイラはエラーを報告します。

この時点で、declare コマンドを使用してそのタイプを指定すると、エラーは報告されません。

let x:number; を宣言します。
x = 1;

宣言キーワードが変数の特定の型を指定しない場合、変数の型は「any」になります。

let x を宣言します。
x = 1;

上の例では、変数 x の型は any です。

次の例は、ブラウザのグローバル オブジェクト document を使用したスクリプトです。

var ドキュメントを宣言します。
document.title = 'こんにちは';

上記の例では、declare は変数 document の型が外部で定義されている (具体的には TypeScript 組み込みファイル lib.d.ts で定義されている) ことをコンパイラーに伝えます。

TypeScript が document の外部定義を見つけられない場合、そのタイプは any であるとみなされます。

宣言キーワードは型の説明を与えるためにのみ使用されることに注意してください。これは純粋な型コードであり、変数の初期値を設定することはできません。つまり、値を含めることはできません。

// エラーを報告する
let x:number = 1; を宣言します。

上記の例では、declare によって変数の初期値が設定され、エラーが報告されます。

関数を宣言する

宣言キーワードは、外部関数の型の説明を与えることができます。

以下に例を示します。

関数sayHello(を宣言
  名前: 文字列
）：空所;

SayHello('張三');

上記の例では、declare コマンドは sayHello() の型の説明を与え、この関数が外部ファイルによって定義されているため、ここで関数を直接使用できることを示しています。

この別個の関数タイプ宣言ステートメントは、declare コマンドの後にのみ使用できることに注意してください。 TypeScript は、別個の関数型宣言ステートメントをサポートしない一方で、declare キーワードの後に​​関数の特定の実装を続けることはできません。

// エラーを報告する
関数sayHello(
  名前:文字列
）：空所;

foo = 'バー' とします。

関数sayHello(名前:文字列) {
  「こんにちは」+ 名前を返します。
}

上記例では、関数の型宣言のみを記述するとエラーとなります。

クラスを宣言する

宣言は、次のように記述されたクラス型の説明を与えます。

クラス動物を宣言 {
  コンストラクター(名前:文字列);
  食べる():ボイド;
  sleep():void;
}

次に、より複雑な例を示します。

クラス C を宣言する {
  // 静的メンバー
  パブリック静的s0():文字列;
  プライベート静的 s1:文字列;

  //プロパティ
  パブリック a:数値;
  プライベート b:番号;

  //コンストラクタ
  コンストラクター(引数:数値);

  // 方法
  m(x:数値, y:数値):数値;

  // アクセサ
  c():数値を取得します。
  set c(値:数値);

  // インデックス署名
  [インデックス:文字列]:任意;
}

同様に、宣言後に Class の特定の実装や初期値を指定することはできません。

モジュールを宣言、名前空間を宣言

変数、関数、クラスをグループ化したい場合は、モジュールまたは名前空間を指定して宣言を使用できます。

名前空間 AnimalLib を宣言 {
  クラス動物{
    コンストラクター(名前:文字列);
    食べる():ボイド;
    sleep():void;
  }

  type 動物 = '魚' |
}

// または
モジュールAnimalLibを宣言 {
  クラス動物{
    コンストラクター(名前:文字列);
    食べる(): 無効;
    sleep(): 無効;
  }

  type 動物 = '魚' |
}

上記の例では、declare キーワードはモジュールまたは名前空間の型の説明を示します。

モジュールの宣言と名前空間の宣言では、export キーワードを追加するかどうかを指定できます。

名前空間 Foo を宣言する {
  エクスポート変数 a: ブール値;
}

モジュール 'io' を宣言します {
  エクスポート関数 readFile(filename:string):string;
}

上記の例では、export キーワードが名前空間とモジュールで使用されています。

以下の例は、現在のスクリプトがメソッド makeGreeting() と属性 numberOfGreetings を持つ外部ライブラリ myLib を使用していることを示しています。

let result = myLib.makeGreeting('Hello');
console.log('ようこそ: ' + 結果);

let count = myLib.numberOfGreetings;

myLib の型記述は次のように書くことができます。

名前空間 myLib を宣言 {
  関数 makeGreeting(s:string): 文字列;
  グリーティングの番号を数値にします。
}

declare キーワードのもう 1 つの用途は、外部モジュールにプロパティとメソッドを追加するときに、新しい部分の型の説明を与えることです。

import { Foo as Bar } from 'moduleA';

モジュール 'moduleA' を宣言します {
  インターフェース Foo {
    カスタム： {
      prop1: 文字列;
    }
  }
}

上記の例では、インターフェイスである型 Foo をモジュール moduleA からインポートし、名前を Bar に変更し、declare キーワードを使用して属性 custom を Foo に追加します。ここで注意する必要があるのは、インターフェース Foo の名前が Bar に変更されていますが、型を拡張する場合、同じ名前のインターフェースは自動的に型宣言をマージするため、元のインターフェース Foo は依然として拡張されるということです。

別の例を示します。プロジェクトには複数のモジュールがあり、1 つのモジュールで別のモジュールのインターフェイスを型拡張できます。

// a.ts
エクスポートインターフェイス A {
  x: 数値。
}

//b.ts
'./a' から { A } をインポートします。

モジュール './a' を宣言 {
  インターフェース A {
    y: 数値。
  }
}

const a:A = { x: 0, y: 0 };

上記の例では、スクリプト「a.ts」はインターフェース「A」を定義し、スクリプト「b.ts」はこのインターフェースに属性「y」を追加します。 declare module './a' {} は a.ts でモジュールの型を宣言することを意味し、同名のインターフェースは自動的にマージされるので拡張型に相当します。

この構文を使用してモジュール タイプを拡張する場合は、次の 2 つの点に注意してください。

(1) declare module NAME 構文内のモジュール名 NAME は、インポートおよびエクスポートのモジュール名の規則と同じであり、現在のファイルにモジュールをロードするステートメントと同じように記述する必要があります (上の例では、一貫性を保つために「import { A } from ' ./a」を使用しています。

(2) 新しいトップレベルタイプを作成することはできません。つまり、拡張できるのは「a.ts」モジュール内の既存の型のみであり、インターフェイス「B」を新たに定義するなど、新しいトップレベルの型を追加することはできません。

(3) デフォルトの「default」インターフェースは拡張できません。export コマンドによって出力された名前付きインターフェースのみを拡張できます。これは、型拡張を実行するときに、出力インターフェイス名に依存する必要があるためです。

一部のサードパーティ モジュールでは、元の作成者がインターフェイス タイプを提供していない場合は、スクリプトの先頭に次のコマンド行を追加できます。

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

// 例
モジュール「hot-new-module」を宣言します。

上記のコマンドを追加すると、型宣言がなくても外部モジュールをコンパイルできるようになります。ただし、このモジュールからインポートされるインターフェースはすべて「any」タイプになります。

宣言モジュールで記述されるモジュール名にはワイルドカード文字を使用できます。

モジュール 'my-plugin-*' を宣言 {
  インターフェース PluginOptions {
    有効: ブール値;
    優先順位: 番号;
  }

  関数初期化(オプション: PluginOptions): void;
  エクスポート = 初期化;
}

上記の例では、モジュール名 my-plugin-* は、my-plugin- で始まるすべてのモジュール名 (my-plugin-logger など) に適応することを意味します。

グローバルを宣言する

JavaScript エンジンのネイティブ オブジェクトにプロパティとメソッドを追加する場合は、「declare global {}」構文を使用できます。

輸出 {};

グローバルを宣言 {
  インターフェース文字列 {
    toSmallString(): 文字列;
  }
}

String.prototype.toSmallString = ():string => {
  //具体的な実装
  戻る '';
};

上記の例では、toSmallString() メソッドが JavaScript ネイティブの String オブジェクトに追加されます。 declare global は、この新しいメソッドの型の説明を与えます。

この例の最初の行にある空のエクスポート ステートメント export {} により、コンパイラはこのスクリプトをモジュールとして扱うように強制されます。これは、declare global をモジュール内で使用する必要があるためです。

次の例では、プロパティ myAppConfig をウィンドウ オブジェクト (タイプ インターフェイス Window) に追加します。

輸出 {};

グローバルを宣言 {
  インターフェース ウィンドウ {
    myAppConfig:オブジェクト;
  }
}

const config = window.myAppConfig;

declare global は既存のオブジェクトの型の説明を拡張することしかできず、新しいトップレベルの型を追加することはできません。

列挙型を宣言する

declare キーワードでは enum 型の記述例を以下に示します。以下の記述方法が可能です。

enum E1 {を宣言します
  あ、
  B、
}

enum E2 を宣言 {
  A = 0、
  B = 1、
}

const enum E3 を宣言 {
  あ、
  B、
}

const enum E4 を宣言 {
  A = 0、
  B = 1、
}

宣言モジュールは型宣言ファイルに使用されます

各モジュール スクリプトに対して .d.ts ファイルを定義し、スクリプトで使用されるすべての型定義をこのファイルに入れることができます。ただし、より便利なアプローチは、プロジェクト全体に対して大きな .d.ts ファイルを定義し、このファイル内で declare module を使用して各モジュール スクリプトのタイプを定義することです。

以下の例は、node.d.ts ファイルの一部です。

モジュール「url」を宣言 {
  インターフェイスの URL をエクスポート {
    プロトコル?: 文字列;
    ホスト名?: 文字列;
    パス名?: 文字列;
  }

  エクスポート関数 parse(
    urlStr: 文字列、
    parseQueryString?、
    スラッシュはホストを示しますか?
  ): URL;
}

モジュール「パス」を宣言 {
  エクスポート関数 Normalize(p: string): string;
  エクスポート関数 join(...パス: any[]): 文字列;
  エクスポート変数 sep: 文字列;
}

上記の例では、url と path は別個のモジュール スクリプトですが、それらのタイプは node.d.ts ファイルで定義されています。

使用する場合は、独自のスクリプト内でトリプル スラッシュ コマンドを使用して、この型宣言ファイルをロードします。

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

上記のコマンド行を使用しない場合、スクリプトで外部モジュールを使用する場合は、スクリプト内で宣言コマンドを使用して外部モジュールのタイプを個別に指定する必要があります。

参考リンク

作者: wangdoc

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

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

前の章次の章