TypeScript學習筆記（七） - 命名空間

本篇將介紹TypeScript的命名空間，並簡單說明一下與模塊的區別。

在之前的例子里，有如下一段代碼，通過修改這段代碼來演示命名空間的用法。

interface Animal {
    name: string;
    eat(): void;
}

class Dog implements Animal {
    name: string;
    constructor(theName: string) {
        this.name = theName;
    }

    eat() {
        console.log(`${this.name} 吃狗糧。`);
    }
}

class Cat implements Animal {
    name: string;
    constructor(theName: string) {
        this.name = theName;
    }

    eat() {
        console.log(`${this.name} 吃貓糧。`);
    }
}

一、命名空間的聲明

同Java的包、.Net的命名空間一樣，TypeScript的命名空間可以將代碼包裹起來，只對外暴露需要在外部訪問的對象。命名空間內的對象通過export關鍵字對外暴露。

將上面的例子進行修改

namespace Biology {
    export interface Animal {
        name: string;
        eat(): void;
    }

    export class Dog implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 吃狗糧。`);
        }
    }

    export class Cat implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 吃貓糧。`);
        }
    }
}


let dog: Biology.Animal;
dog = new Biology.Dog('狗狗');
dog.eat();

通過namespace關鍵字聲明命名空間，通過export導出需要在外部使用的對象。在命名空間外部需要通過“完全限定名”訪問這些對象。

 

二、命名空間的引用

通常情況下，聲明的命名空間代碼和調用的代碼不在同一個文件里

biology.ts

namespace Biology {
    export interface Animal {
        name: string;
        eat(): void;
    }

    export class Dog implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 吃狗糧。`);
        }
    }

    export class Cat implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 吃貓糧。`);
        }
    }
}

app.ts

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

let dog: Biology.Animal;
dog = new Biology.Dog('狗狗');
dog.eat();

通過reference注釋引用命名空間，即可通過“完全限定名”進行訪問。

更有甚者，相同的命名空間會聲明在不同的文件中

namespace Biology {
    export interface Animal {
        name: string;
        eat(): void;
    }
}

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

namespace Biology {
    export class Dog implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 吃狗糧。`);
        }
    }
}

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

namespace Biology {
    export class Cat implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 吃貓糧。`);
        }
    }
}

// app.ts

/// <reference path="biology.ts" />
/// <reference path="cat.ts" />
/// <reference path="dog.ts" />


let dog: Biology.Animal;
dog = new Biology.Dog('狗狗');
dog.eat();

let cat: Biology.Animal;
cat = new Biology.Cat('喵星人');
cat.eat();

編譯之后，每一個文件都將編譯成對應的一個JavaScript文件，使用時需要將這些文件都引用進來。通過如下命令，可以將有相同命名空間的文件編譯到一個JavaScript文件中，這樣在引用時只需要一個文件即可。

tsc --outFile js\biology.js ts\biology.ts ts\dog.ts ts\cat.ts

將biology.ts、dog.ts、cat.ts編輯到一個JavaScript文件biology.js文件內，編譯后的文件內容如下

/// <reference path="biology.ts" />
var Biology;
(function (Biology) {
    var Dog = (function () {
        function Dog(theName) {
            this.name = theName;
        }
        Dog.prototype.eat = function () {
            console.log(this.name + " \u5403\u72D7\u7CAE\u3002");
        };
        return Dog;
    }());
    Biology.Dog = Dog;
})(Biology || (Biology = {}));
/// <reference path="biology.ts" />
var Biology;
(function (Biology) {
    var Cat = (function () {
        function Cat(theName) {
            this.name = theName;
        }
        Cat.prototype.eat = function () {
            console.log(this.name + " \u5403\u732B\u7CAE\u3002");
        };
        return Cat;
    }());
    Biology.Cat = Cat;
})(Biology || (Biology = {}));

 

三、命名空間的別名

在引用命名空間時，可以通過import關鍵字起一個別名

// app.ts

/// <reference path="biology.ts" />
/// <reference path="cat.ts" />
/// <reference path="dog.ts" />

import bio_other = Biology;     // 別名

let dog: bio_other.Animal;
dog = new bio_other.Dog('狗狗');
dog.eat();

let cat: bio_other.Animal;
cat = new bio_other.Cat('喵星人');
cat.eat();

 

四、命名空間與模塊

命名空間：代碼層面的歸類和管理。將有相似功能的代碼都歸一到同一個空間下進行管理，方便其他代碼引用。更多的是側重代碼的復用。

模塊：一個完整功能的封裝，對外提供的是一個具有完整功能的功能包，需要顯式引用。一個模塊里可能會有多個命名空間。