在typeScript使用namespace

今天要來講解在cocosCreator中，使用TypeScript來做namespace的實例，以及我遇到的小狀況。 以下就是實際code：
BagData.ts

export namespace BagSystem{
    export class ItemData{
        public m_strId: string = null;
        public m_strName: string = null;
        public m_numCount: number = 0;
        public m_bagType: BagType = BagType.TASK;
        public m_canUse: boolean = true;
        constructor(id: string, name: string, count: number, type:BagType){
            this.m_strId = id;
            this.m_strName = name;
            this.m_numCount = count;
            this.m_bagType = type;
        }

        public ShowItemDetail(){
            cc.log("Item: " + this.m_strId + ", " + this.m_strName);
        }
    }
    export class BagData{
        public m_Type: BagType = BagType.TASK;
        public m_aryData: string[] = [];
        public m_isAvalible: boolean = false;

        constructor(t:BagType, aryData : string[] ){
            this.m_Type = t;
            this.m_aryData = aryData;
        }

        public ShowBagDetail(){
            cc.log("Bag " + this.m_Type + ": " + this.m_aryData.length);
        }
    }
    export enum BagType{
        WEAPON = 0,
        CARD = 1,
        MEDICINE = 2,
        CLOTH = 3,
        TASK = 4
    }
}

BagManager.ts

import { BagSystem as BagSystemData } from "./BagData";
import BagData = BagSystemData.BagData;
import ItemData = BagSystemData.ItemData;
import BagType = BagSystemData.BagType;

const {ccclass, property} = cc._decorator;
export namespace BagSystem{
    @ccclass
    export class BagManager extends cc.Component {

        private m_aryBagData: BagData[] = [];
        private m_aryItemData: ItemData[] = [];

        public AddItemData(itemData: ItemData) {
            this.m_aryItemData.push(itemData);
            this.AddBagData(itemData.m_bagType, itemData.m_strId);
        }

        private AddBagData(type: BagType, item: string)
        {
            let targetBag: BagData = null;
            this.m_aryBagData.forEach(bag => {
                if (bag.m_Type == type){
                    targetBag = bag;
                    return bag;
                }
            });
            if (targetBag != null){
                targetBag.m_aryData.push(item);
            }
            else{
                this.m_aryBagData.push(new BagData(type, [item]));
            }
        }

        public ShowBag(){
            cc.log("Bag Data: " + this.m_aryBagData.length + "\nItem Data: " + this.m_aryItemData.length);
        }
    }
}

要注意的是，因為兩個script內的namespace都是BagSystem，因此會出現小蚯蚓提示你出問題：

這就是為什麼我會寫成

import { BagSystem as BagSystemData } from "./BagData";

MainManager.ts

import { BagSystem as BagSystemMain } from "./BagManager";
import { BagSystem as BagSystemData } from "./BagData";
import BagManager = BagSystemMain.BagManager;
import ItemData = BagSystemData.ItemData;
import BagType = BagSystemData.BagType;

const {ccclass, property} = cc._decorator;

@ccclass
export default class MainManager extends cc.Component {

    @property(BagManager)
    private m_BagManager: BagManager = null;

    private m_aryItem:string[] = ["Miki", "Sward", "Fish", "Tiger", "Gun", "Health", "Magic", "Fast", "Slow", "Jump", "Pants"];

    start () {
        let id: string ="";
        let c: number = 0;
        let t: BagType = BagType.TASK;
        for (let i = 0; i < this.m_aryItem.length; i++){
            let itemName:string = this.m_aryItem[i];
            id = "I000" + i.toString();
            c = Math.round(Math.random() * 100 + 1);
            t =  Math.round(Math.random() * 5);
            this.m_BagManager.AddItemData(new ItemData(id, itemName, c, t));
        }
        this.m_BagManager.ShowBag();
    }
}

一樣，要注意import的時候要重新命名namespace名稱。


結果：

CocosCreator構建ts轉為js檔案時，沒有改設置的話會把所有的ts放入同一個js內。