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 のディスプレイのグリッドレイアウトとフレックスレイアウトの詳細な説明

推薦する

vscodeでnpmを使用してbabelをインストールする方法

序文前回の記事ではNode.jsのインストールと設定を紹介しました。今回はVScodeでbableを...

select @@session.tx_read_only が DB に大量に出現するのはなぜですか?

問題を見つける上位の SQL ステートメントを取得すると、DB が大量のselect @@sessi...

ミニプログラムカスタムコンポーネントの非効率的なグローバルスタイルの解決策

目次長すぎて読めないコンポーネントスタイルの分離デモテスト優先度ページの分離構成参考文献ネイティブ ...

Dockerイメージ内のファイルを表示する方法

Dockerイメージ内のファイルを表示する方法1. すでに実行中の場合すでに実行中のイメージについて...

MySQL の複数テーブル関連付け 1 対多クエリを使用して最新のデータを取得する方法の例

この記事では、MySQL で複数のテーブルを使用して 1 対多のクエリを使用して最新のデータを取得す...

JavaScript カラービューア

この記事では、カラービューアを実装するためのJavaScriptの具体的なコードを参考までに紹介しま...

ウェブページが自動的にデュアルコアブラウザの高速モードを呼び出すようにします(Webkit)

コードサンプルヘッドタグにコード行を追加します: XML/HTML コードコンテンツをクリップボード...

MySQL パーティションテーブルの制限と制約の詳細な説明

ビルドを無効にするパーティション式では、次の構成はサポートされません。ストアドプロシージャ、ストアド...

Mybatisの特殊文字処理の詳細な説明

序文: Mybatis の特殊文字処理、Mybatis の xml ファイル内の特殊文字の処理、ここ...

Navicatをサーバー上のdockerデータベースに接続する方法

dokekrでmysqlコンテナを起動するコマンドを使用します: docker run -p 330...

HTML の基礎: HTML コンテンツの詳細

まずは本体から始めましょう:ウェブページを閲覧するとき、最初に目に留まるのは通常、ページの背景です。...

XHTMLはHTMLのいくつかの廃止された要素を使用しなくなりました

CSS ウェブページレイアウトを行う場合、XHTML1.0 仕様に準拠する必要があることは誰もが知っ...

Linuxでテキスト比較を実現するコツを教えます

序文コードを書く過程で、必然的にコードに何らかの変更を加えることになります。しかし、変更を加えるとき...

HTML で JavaScript の全選択/全選択解除操作を実行するサンプル コード

コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...

MySQL で遅い SQL 文を見つける方法

MySQL で遅い SQL ステートメントを見つけるにはどうすればよいでしょうか?これは、多くの人を...