名前空間を用いたタイプスクリプトコードの編成

執筆Emmanuel John ✏️

導入

企業のソフトウェアのサードパーティライブラリを使用すると、我々はしばしば世界的な名前空間のコンポーネント間の名前の衝突を引き起こし、汚染されたグローバル名前空間の問題に遭遇する.したがって、変数、オブジェクト、およびクラスが一意に識別されるように、名前空間を使用してコードのブロックを整理する必要があります.
この記事では、あなたがそれらを必要とするとき、名前空間を議論します、そして、どのようにあなたのtypescriptコードの組織を強化するためにそれらを使用するべきです.

必要条件

活字の知識

JavaScriptとの親密性

名前空間とは

名前空間は、グローバルスコープ内のコンポーネント間の命名競合を避けるために、変数、関数、インターフェイス、またはクラスがローカルスコープ内で一緒にグループ化されるようにコードを整理するパラダイムです.これは世界的な公害を減らす最も一般的な戦略の一つです.
中modules また、コード構成のために使われます、名前空間は簡単な実現のために使いやすいです.モジュールは、強力なコード分離、バンドルの強力なサポート、コンポーネントの再エクスポート、および名前空間が提供しないコンポーネントの名前変更のようないくつかの追加の利点を提供します.

なぜ名前空間が必要なのか？

名前空間には以下の利点があります.

コード再利用性-コード再利用性のための名前空間の重要性を理解できません

Bloatedグローバルスコープ-名前空間は、グローバルスコープ内のコードの量を減らす

サードパーティライブラリ-サードパーティライブラリに依存しているウェブサイトの増加に伴い、コードとサードパーティライブラリ間の同じ名前の競合を防ぐために名前空間を使用してコードを保護することが重要です

分散開発-一般的になっている分散開発では、公害はほとんど避けられないです.なぜなら、開発者は共通の変数やクラス名を使うのがずっと簡単だからです.これは世界的な範囲の名前衝突と汚染に終わります

名前空間を用いた設計問題

暗黙の依存順序

いくつかの外部ライブラリを使用している間、名前空間を使用すると、コードとこれらのライブラリ間の依存関係の暗黙の実装が必要になります.依存関係がエラーがちである場合があるので、これは彼らが正しくロードされるように、依存関係を管理するストレスに終わります.
このような状況で自分自身を見つける場合は、モジュールを使用してストレスを保存します.

ノード。アプリケーション

For Node.js applications, modules are recommended モジュールは、ノード内のカプセル化とコードの組織化のための事実上の標準です.

JavaScriptのコンテンツインポート

SystemjsとAMDのようないくつかのモジュールローダが非Javascriptコンテンツをインポートすることができるので、非JavaScriptコンテンツを扱うときに、モジュールはモジュール空間上で推奨されます.

レガシーコード

もはや設計されていないが継続的にパッチされたコードベースで動作する場合、名前空間を使用してモジュールを使用することを推奨します.
また、古いJavaScriptコードを移植するとき、名前空間は便利になります.

型スクリプト内の名前空間の探索

ここで、私たちには、スクリプトの名前空間が何であるか、そしてなぜ我々がそれらを必要とするかについての共有理解があります.
typescriptがJavaScriptのスーパーセットであるなら、それはJavascriptからその名前空間概念を得ます.
デフォルトでは、JavaScriptは名前空間を実装する必要がないので、名前空間を実装します.

var Vehicle;
(function (Vehicle) {
    let name = "car";
})(Vehicle || (Vehicle = {}));

これは、名前空間を定義するためのコードです.一方、タイプスクリプトは異なることをします.

単一ファイルの名前空間

タイプスクリプトでは、名前空間はnamespace キーワードは、選択の名前に続きます.
単一のtypescriptファイルには、必要に応じて多くの名前空間を持つことができます.

namespace Vehicle {}
namespace Animal {}

我々が見ることができるように、typescript名前空間はIIFEを使用している名前空間のJavaScript実現に比べて構文的なケーキの部分です.
関数、変数、およびクラスは、次のように名前空間内で定義できます.

namespace Vehicle {
  const name = "Toyota"
  function getName () {
      return `${name}`
  }
}
namespace Animal {
  const name = "Panda"
  function getName () {
      return `${name}`
  }
}

上記のコードでは、衝突なしで同じ変数と関数名を使用できます.

名前空間外の関数、変数、オブジェクト、およびクラスへのアクセス

名前空間以外の関数やクラスにアクセスするにはexport キーワードは、関数名またはクラス名の前に次のように追加する必要があります.

namespace Vehicle {
  const name = "Toyota"
  export function getName () {
      return `${name}`
  }
}

我々がそれを省略しなければならないという通知export 名前空間の外でアクセスできないので、変数を持つキーワード.
今、我々はアクセスすることができますgetName 以下のように機能します:

Vehicle.getName() //Toyota

入れ子型名前空間を用いたコードの整理

TypeScriptでは、ネストされた名前空間を使用してコードを整理できます.
ネストした名前空間を次のように作成できます.

namespace TransportMeans {
  export namespace Vehicle {
    const name = "Toyota"
    export function getName () {
        return `${name}`
    }
  }
}

注意export 前のキーワードVehicle 名前空間.これにより、名前空間はTransportMeans 名前空間.
また、名前空間の深い入れ子を行うこともできます.
ネストされた名前空間は次のようにアクセスできます.

TransporMeans.Vehicle.getName() // Toyota

名前空間エイリアス

深く入れ子になった名前空間の場合、名前空間の別名は、物事をきれいに保つために便利です.
名前空間エイリアスは次のようにimportキーワードを使用して定義されます.

import carName= TransporMeans.Vehicle;
carName.getName(); //Toyota

マルチファイル名前空間

名前空間は複数のtypescriptファイル間で共有できます.これは可能ですreference タグ.
以下を考慮して

//constant.ts
export const name = "Toyota"

//vehicle.ts
<reference path = "constant.ts" />
export namespace Vehicle {
  export function getName () {
      return `${name}`
  }
}

ここで、我々は参照しなければならなかったconstant.ts アクセスするファイルname :

//index.ts
<reference path = "constant.ts" />
<reference path = "vehicle.ts" />
Vehicle.getName() // Toyota

我々が最も高いレベル名前空間で我々の引用を始めた方法に注意してください.これはマルチファイルインターフェイスで参照を扱う方法です.typemcriptはファイルをコンパイルする際にこの順序を使います.
コンパイラは、複数のファイルタイプライブラリをコンパイルするために、以下のコマンドで単一のJavaScriptファイルにコンパイルできます.

 tsc --outFile index.js index.ts

このコマンドを使用すると、typescriptコンパイラはindex.js .

結論

スケーラブルで再利用可能なタイプスクリプトアプリケーションを構築するために、私たちのアプリケーションの組織と構造を改良するので、typescript名前空間は便利です.
この記事では、名前空間を探索することができました.チェックアウトTypeScript Handbook: Namespaces 名前空間の詳細については.

あなたのウェブアプリにフル可視性

LogRocket フロントエンドアプリケーションを監視するソリューションを再生する場合は、自分のブラウザで起こった問題を再生することができます.代わりに、エラーが発生したり、スクリーンショットやログのダンプのユーザーを求めるのを推測するのではなく、LogRocketすぐに何が間違って理解するためにセッションをリプレイすることができます.これは、フレームワークに関係なく、任意のアプリケーションを完全に動作し、RedUx、VUEX、およびNGRX/ストアからの追加のコンテキストを記録するプラグインがあります.
ログのReduxのアクションと状態に加えて、ログログオンレコードコンソールログ、JavaScriptのエラー、StackTrart、ヘッダー/本文、ブラウザのメタデータ、およびカスタムログを使用してネットワークのリクエスト/応答.また、DOMは、最も複雑な単一ページのアプリのピクセル完璧なビデオを再現、ページ上のHTMLとCSSを記録するために楽器を計る.
Try it for free .