TypeScript 名前空間と TypeScript モジュール

目次

1. TypeScript 名前空間

1. TypeScript 名前空間の作成と簡単な使用

2. ネストされた名前空間の簡単な使用

2. TypeScript モジュール

1. TypeScript モジュールの作成と簡単な使用


1. TypeScript 名前空間

1. TypeScript 名前空間の作成と簡単な使用

名前空間は主に名前の重複の問題を解決します. 名前空間は識別子の可視範囲を定義します. 識別子は複数の名前空間で定義できます.異なる名前空間でのその意味は無関係です. このようにして、任意の識別子を新しい名前空間で定義でき、既存の定義が他の名前空間にあるため、既存の識別子と競合しません。

speak.ts ファイルを作成する

namespace Speak { 
    export interface peopleSpeak { 
        speakFun():any; 
    }
}

名前空間のクラスとインターフェースを外部から呼び出す必要がある場合は、 クラスとインターフェースにexport キーワードを追加する必要があります

2. 名前空間は別の TypeScript ファイルにあり、トリプル スラッシュ /// で参照できます。構文は次のとおりです。

/// <reference path = "speak.ts" /> 

speak1.ts ファイルを作成する

/// <reference path = "speak.ts" /> 
namespace Speak { 
    export class SpeakHello implements peopleSpeak { 
        public speakFun() { 
            console.log("Hello"); 
        }  
    }
}

speak2.ts ファイルを作成する

/// <reference path = "speak.ts" /> 
namespace Speak { 
    export class SpeakTs implements peopleSpeak { 
        public speakFun() { 
            console.log("ts"); 
        } 
    } 
}

oneSpeak.ts ファイルを作成する

/// <reference path = "speak.ts" />   
/// <reference path = "speak1.ts" /> 
/// <reference path = "speak2.ts" />  
function drawAllShapes(speak:Speak.peopleSpeak) { 
    speak.speakFun(); 
} 
drawAllShapes(new Speak.SpeakHello()); //Hello
drawAllShapes(new Speak.SpeakTs()); //ts

2. ネストされた名前空間の簡単な使用

名前空間はネストをサポートし、別の名前空間で名前空間を定義でき、エクスポートを使用して名前空間をエクスポートできます

oneNest.ts ファイルを作成する

namespace XiaoGuai { 
    export namespace Sam { 
       export class Speak { 
          public speakTs(oneStr: string) { 
             return oneStr; 
          } 
       } 
    } 
 }

oneSpeak.ts ファイルを作成する

/// <reference path = "oneNest.ts" />
let oneStr = new XiaoGuai.Sam.Speak(); 
console.log(oneStr.speakTs("hello ts")); //hello ts

2. TypeScript モジュール

1. TypeScript モジュールの作成と簡単な使用

モジュールは、グローバル スコープではなく、独自のスコープで実行されます。モジュールで定義された変数、関数、およびクラスは、モジュールの外では見えません。使用する場合は、 export を使用してそれらをエクスポートできますそして、 import を介して他のモジュールによってエクスポートされた変数、関数、クラスなどをインポートします。2 つのモジュール間の関係は、ファイル レベルでインポートとエクスポートを使用して確立されます。

モジュールは、モジュール ローダーを使用して他のモジュールをインポートします。実行時のモジュール ローダーの役割は、このモジュールのコードを実行する前に、このモジュールのすべての依存関係を見つけて実行することです。Node.js 用の CommonJS や Web アプリケーションを提供するための Require.js など。

hello.ts ファイルを作成する

export interface peopleSpeak {
    speakFun(): any;
}

helloClass.ts ファイルを作成する

import hello = require("./hello"); 
export class helloClass implements hello.peopleSpeak { 
   public speakFun() { 
      console.log("hello"); 
   } 
}

doHello.ts ファイルを作成する

import hello = require("./hello"); 
import helloClass = require("./helloClass"); 

function doHelloFun(helloClass: hello.peopleSpeak) {
    helloClass.speakFun(); 
 } 
  
 doHelloFun(new helloClass.helloClass()); //hello

ご不明な点がございましたら、以下にコメントしてください。回答させていただきます。

おすすめ

転載: blog.csdn.net/samxiaoguai/article/details/128443033