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に絵文字表現を挿入する方法

序文今日、オープンソース プロジェクトのフィードバック フォームを設計していたところ、絵文字表現を挿...

ウェブデザイン必携ハンドブック 216 ウェブセーフカラー

Web ページ上の色の表現は、さまざまな要因によって影響を受けます。Web ページで非常に美しい配色...

MySQL 全体または単一のテーブルデータのエクスポート

単一のテーブルをエクスポートするmysqldump -u ユーザー -p db名 テーブル名 >...

Ubuntu 18.04で国内ソースを変更する方法の例

Ubuntu はソースが中国からなのでダウンロード速度が比較的遅いです。CentOS と異なり、yu...

vue3 統合 API における vue2 の $refs の代替方法についての簡単な説明

vue2 プロジェクト開発の経験があれば、$refs に精通しているでしょう。 vue3 の急激なア...

HTML+CSS+JS でキャンバスがマウスの小さな円に追従する特殊効果のソースコードを実現

効果(ソースコードは最後にあります): 成し遂げる: 1. タグを定義します。 <h1>...

Windows システムに MySQL を素早くインストールして展開する方法 (グリーンの無料インストール バージョン)

まずは緑色の無料インストール版のMySQLをダウンロードします。任意のフォルダに入れて構いません。今...

Linux curl フォームのログインまたは送信と Cookie の使用に関する詳細な説明

序文この記事では主に、curl を介してフォーム送信ログインを実装する方法について説明します。単一の...

VMware ワークステーションの仮想マシンの互換性の問題に対する解決策

VMware ワークステーションの仮想マシンの互換性の問題を解決するにはどうすればよいですか?ノート...

Vueを使用して手書き署名機能を実装する

個人的な実装のスクリーンショット:インストール: npm インストール vue-esign --sa...

CSS 等高レイアウトの一般的な方法

等高レイアウト同じ親コンテナー内の同じ高さの子要素のレイアウトを指します。等高レイアウトの実装の観点...

CSS継承方法

次の背景画像を持つ div があるとします。 次の反射効果を作成します。 方法はたくさんありますが、...

Docker で PostgreSQL を実行し、いくつかの接続ツールを推奨する

1 はじめに PostgreSQL は、非常に充実した機能を備えたフリーソフトウェアのオブジェクトリ...

MySQLにおける静的変数の役割の詳細な説明

MySQLにおける静的変数の役割の詳細な説明静的変数の使用 静的変数サンプルコード: 関数テスト()...