TypeScript名前空間の説明

TypeScript名前空間の説明

序文:

TypeScript 1.5 より前では、ES6 のモジュールはまだ正式な標準ではなかったため、 namespace内部モジュールと呼ばれていました。ES6 が仕様を提案したとき、TypeScript 1.5 では正式に名前空間に変更され、 namespaceを使用して定義されました。

1. 定義と使用

1.1 定義

名前空間の定義は、変数、インターフェース、クラス、メソッドなどを定義できるオブジェクトを定義することと同じです。ただし、export キーワードを使用してこのコンテンツが外部から参照可能であることを指定しないと、外部からアクセスすることはできません。

次に、通常の検証用の .ts ファイルを定義します。実装コードは次のとおりです。

// 検証.ts
// namespace namespace Validation { を通じて Validation という名前の名前空間を作成します。
    // 正規表現を定義する const isLetterReg = /^[A-Za-z]+$/
    // ここで正規表現を定義します。前のものとの違いは、この正規表現が export const isNumberReg = /^[0-9]+$/ を通じてエクスポートされることです。
    // メソッドをエクスポートする export const checkLetter = (text: any) => {
        isLetterReg.test(テキスト) を返します
    }
}

上記のコードでは、 Validationという名前空間を定義し、その中に 2 つのプロパティと 1 つのメソッドを定義し、1 つのプロパティと 1 つのメソッドをエクスポートします (名前空間のエクスポートでは export キーワードが使用されます)。

1.2 使用

ファイル内の名前空間のコンテンツを使用するには、外部名前空間が使用されている場所に/// <reference path=“namespace.ts”/>を使用して導入します。先頭の 3 つのスラッシュ /// に注意し、次に path 属性で現在のファイルに対する名前空間ファイルの相対パスを指定します。具体的なコードは次のとおりです。

// インデックス.ts
/// <参照パス='validation.ts' />
isLetter = Validation.checkLetter('text') とします。
const reg = Validation.isNumberReg
console.log(文字です)
コンソール.log(reg)

最初の行の/// <reference path='validation.ts' />に注意してください。文法構造が間違っていてはいけません。間違っているとコンパイルが失敗します。

コンパイルコマンドは次のとおりです。

tsc --outFile src/index.js index.ts


outFileパラメータは出力ファイルを1つのファイルにマージするために使用されます

コンパイルされた index.js ファイルは次のとおりです。

// namespace var Validation を使用して、Validation という名前の名前空間を作成します。
(関数 (検証) {
    // 正規表現を定義します var isLetterReg = /^[A-Za-z]+$/;
    // ここで正規表現を定義します。前のものとの違いは、この正規表現がエクスポートを通じてエクスポートされることです。Validation.isNumberReg = /^[0-9]+$/;
    // メソッドをエクスポートする Validation.checkLetter = function (text) {
        isLetterReg.test(テキスト) を返します。
    };
})(検証 || (検証 = {}));
/// <参照パス='validation.ts' />
var isLetter = Validation.checkLetter('text');
var reg = Validation.isNumberReg;
console.log(文字数);
コンソールにログ出力します。

2. 複数のファイルに分割する

開発内容が増え続けるにつれて、同じ名前空間を複数のファイルに分割して個別にメンテナンスできるようになります。複数のファイルに分割しても、それらは 1 つの名前空間に属します。

サンプルコードは次のとおりです。

文字検証.ts

// 文字検証.ts
名前空間検証 {
    エクスポート const isLetterReg = /^[A-Za-z]+$/
    エクスポート const checkLetter = (テキスト: 任意) => {
        isLetterReg.test(テキスト) を返します
    }
}

数値検証.ts

// 数値検証.ts
名前空間検証 {
    エクスポート const isNumberReg = /^[0-9]+$/
    エクスポート const checkNumber = (テキスト: 任意) => {
        isNumberReg.test(テキスト) を返します。
    }
}

インデックス.ts

// インデックス.ts
/// <参照パス="./LetterValidation.ts"/>
/// <参照パス="./NumberValidation.ts"/>
isLetter = Validation.checkLetter('text') とします。
const reg = Validation.isNumberReg
console.log(文字です)

コマンドラインを使用してコンパイルします。

tsc --outFile src/index.js index.ts


最終的にコンパイルされた index.js コードは次のようになります。

// 文字検証.ts
var 検証;
(関数 (検証) {
    Validation.isLetterReg = /^[A-Za-z]+$/;
    Validation.checkLetter = 関数 (テキスト) {
        Validation.isLetterReg.test(text) を返します。
    };
})(検証 || (検証 = {}));
// 数値検証.ts
var 検証;
(関数 (検証) {
    Validation.isNumberReg = /^[0-9]+$/;
    Validation.checkNumber = 関数 (テキスト) {
        Validation.isNumberReg.test(text) を返します。
    };
})(検証 || (検証 = {}));
/// <参照パス="./LetterValidation.ts"/>
/// <参照パス="./NumberValidation.ts"/>
var isLetter = Validation.checkLetter('text');
var reg = Validation.isNumberReg;
console.log(文字数);

コンパイル結果から、最初にLetterValidation.tsファイルを導入し、次にNumberValidation.tsファイルを導入したことがわかります。最終的なコンパイル結果も、導入した順序でコンパイルされています。

3. エイリアス

エイリアスは、名前空間の操作を簡素化する方法です。構文は、import キーワードを使用することです。使用方法は次のとおりです。

インポートq = xyz


このメソッドは、親モジュールのimport x = require('name')構文と混同しないように注意してください。ここでの構文は、指定されたシンボルのエイリアスを作成します。このメソッドは、モジュールにインポートされたオブジェクトを含む任意の識別子のエイリアスを作成するために使用できます。

// 名前空間を定義する namespace Shapes {
    // 名前空間にサブ名前空間を定義してエクスポートする export namespace Polygons {
        エクスポートクラス Triangle {}
        クラス Square をエクスポートします {}
    }
}
// インポート構文を使用してエクスポートされたサブ名前空間の名前を polygons に変更します
インポートポリゴン = Shapes.Polygons
// エクスポートされた名前空間から Square クラスをインスタンス化します。let sq = new polygons.Square()

この例から、 importキーワードを使用して名前空間内の出力要素のエイリアスを定義すると、より深いレベルで属性を取得するコストを削減できることがわかります。

TypeScript名前空間に関するこの記事はこれで終わりです。TypeScript 名前空間の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • TypeScript名前空間の簡単な分析
  • TypeScript 名前空間のマージの説明

<<:  IE6 で JS エラーが発生し、CSS が適用されない HTML エンコードの問題の解決策

>>:  CSS3 のディスプレイのグリッドレイアウトとフレックスレイアウトの詳細な説明

推薦する

MySQL 8.0 の降順インデックス

序文インデックスが順序付けられていることは誰もが知っていると思いますが、MySQL の以前のバージョ...

Linux で jar パッケージを起動してバックグラウンドで実行する方法

jar パッケージを実行する Linux コマンドは次のとおりです。方法1: java -jar s...

HTML(CSSスタイル仕様)を読む必要があります

CSS スタイル仕様1. クラスセレクター2. タグセレクター3. IDセレクター4. CSSスタイ...

XHTML: フレーム構造タグ

フレーム構造タグ <frameset></frameset>フレームを使用す...

Vue で AES.js を使用する詳細な手順

AES暗号化の使用データ転送の暗号化と復号化処理 --- AES.js最初のステップ: vue に ...

MySQL インデックスの失敗を引き起こす一般的な書き込み方法の概要

序文最近、古いプロジェクトから残ったいくつかの SQL 最適化の問題に対処するのに忙しくしています。...

Zabbixのカスタム監視項目とトリガーについて

目次1. 監視ポート関係の説明操作する2. 監視サービス関係の説明操作する3. テンプレートのインポ...

シェルを使用して複数のサーバーでバッチ操作を実行する方法

目次SSHプロトコルパスワード接続プロセスsshツールssh公開鍵ログインバッチ操作複数サーバーファ...

React 関数コンポーネントのパフォーマンス最適化のアイデアの詳細な説明

最適化のアイデア最適化には主に 2 つの方向があります。再レンダリングの回数を減らします。 Reac...

JSはショッピングカート内の商品の合計金額の計算を実現します

JSはショッピングカート内の商品の合計金額を計算して参考とします。具体的な内容は以下のとおりです。質...

スライダー効果を実装するミニプログラム

この記事の例では、スライディングブロック効果を実現するための小さなプログラムの具体的なコードを参考ま...

Linux でファイルのユーザーとグループを変更する方法

Linux では、ファイルが作成されると、そのファイルの所有者はファイルを作成したユーザーになります...

Linux CentOS 6.5 ifconfig が IP を照会できない問題の解決方法

最近、何人かの友人から、仮想マシンに CentOS をインストールした後、ifconfig コマンド...

MySQLクエリ条件の一般的な使用法の詳細な説明

この記事では、例を使用して、MySQL クエリ条件の一般的な使用方法を説明します。ご参考までに、詳細...

jQueryはドロップダウンメニューのスライド効果を実現します

Web ページを作成するときに、クールでスムーズなドロップダウン メニューが必要になることがあります...