導出/導入模塊不能正常工作打字稿

Question

我/在此模塊中的文件夾模式稱爲區area_getter.ts：

export module Area { 
    interface iGetAreas { 
     _areasList: Array <any> ; 
     _areas: KnockoutObservableArray <string> ; 
     getAreas(geonameId: string): void; 
    } 



    export abstract class AreaGetter implements iGetAreas { 
     _areasList: Array <any> = []; 
     _areas = ko.observableArray([]); 
     _selectedAreaName: KnockoutObservable <string> ; 
     _selectedAreaGeonameId: KnockoutObservable <string> ; 
     _type: Area.Type; 

     constructor(type: Area.Type) { 
      this._type = type; 
      this._selectedAreaGeonameId = ko.observable(''); 
      this._selectedAreaName = ko.observable(''); 
      this._selectedAreaName.subscribe((newValue) => { 
       console.log(newValue); 
       console.log(this._selectedAreaGeonameId() + "  " + this._selectedAreaName()); 
      }); 
     } 

     getAreas = (geonameId: any): void => { 
      this.showLoadingIcon(); 
      this._areasList = []; 
      $.ajax({ 
       url: `http://api.geonames.org/children?geonameId=${geonameId}&username=elion` 
      }).then((allAreasXML) => { 
       this.hideLoadingIcon(); 
       var allAreasJSON = xml2json(allAreasXML); 
       var allAreas = JSON.parse(allAreasJSON); 
       if (allAreas.geonames.length) { 
        for (var index = 1; index < allAreas.geonames.length - 1; index++) { 
         this._areasList.push(allAreas.geonames[index].geoname); 
        } 
       } else { 
        if (allAreas.geonames.geoname) { 
         this._areasList.push(allAreas.geonames.geoname); 
        } else { 
         this._areasList.push({ 
          name: 'Any', 
          geonameId: 0 
         }); 
        } 
       } 
       this._areas(this._areasList); 

       if (this._type === Area.Type.Region) { 
        this._initiateRegionSelect(); 
       } 
      }); 
     } 

      _initiateRegionSelect =() => { 
      $('#region-select').multiselect({ 
       buttonWidth: '100%', 
       buttonContainer: '<div style="height: 64px;" />', 
       buttonClass: 'none', 
       nonSelectedText: "Select Region", 
       onChange: (option, checked) => { 
        var values = []; 
        $('#region-select option').each(function() { 
         if ($(this).val() !== option.val()) { 
          values.push($(this).val()); 
         } 
        }); 
        $('#region-select').multiselect('deselect', values); 
        $('#region-select').next().removeClass("open").addClass("closed"); 
        this._selectedAreaGeonameId(option.val()); 
        this._selectedAreaName(option.text()); 
       } 
      }); 
     } 

      showLoadingIcon =() => { 
      if (this._type === Area.Type.Town) { 
       $("#town-div span.multiselect-selected-text").css("visibility", "hidden"); 
       $("#town-icon").addClass('special'); 
       $("#town-icon").css("background", "url(assets/gifs/ajax-loader.gif) no-repeat"); 
       $("#town-icon").css("background-size", "100%"); 
      } else if (this._type === Area.Type.Region) { 
       $("#region-div span.multiselect-selected-text").css("visibility", "hidden"); 
       $("#region-icon").addClass('special'); 
       $("#region-icon").css("background", "url(assets/gifs/ajax-loader.gif) no-repeat"); 
       $("#region-icon").css("background-size", "100%"); 
      } else if (this._type === Area.Type.Suburb) { 
       $("#suburb-div span.multiselect-selected-text").css("visibility", "hidden"); 
       $("#suburb-icon").addClass('special'); 
       $("#suburb-icon").css("background", "url(assets/gifs/ajax-loader.gif) no-repeat"); 
       $("#suburb-icon").css("background-size", "100%"); 
      } 
     } 

      hideLoadingIcon =() => { 
      if (this._type === Area.Type.Town) { 
       $("#town-div span.multiselect-selected-text").css("visibility", "visible"); 
       $("#town-icon").removeClass('special'); 
       $("#town-icon").css("background", "transparent"); 
       $("#town-icon").css("background-size", "100%"); 
      } else if (this._type === Area.Type.Region) { 
       $("#region-div span.multiselect-selected-text").css("visibility", "visible"); 
       $("#region-icon").removeClass('special'); 
       $("#region-icon").css("background", "transparent"); 
       $("#region-icon").css("background-size", "100%"); 
      } else if (this._type === Area.Type.Suburb) { 
       $("#suburb-div span.multiselect-selected-text").css("visibility", "visible"); 
       $("#suburb-icon").removeClass('special'); 
       $("#suburb-icon").css("background", "transparent"); 
       $("#suburb-icon").css("background-size", "100%"); 
      } 
     } 
    } 

    export class MultipleSelectAreaGetter extends AreaGetter { 
     _selectedAreas = ko.observableArray([]); 
    } 

    export class SingleSelectAreaGetter extends AreaGetter { 



    } 

    export enum Type { 
     Region, 
     Town, 
     Suburb 
    } 
} 

後來，當我嘗試view_models/search_view_model.ts使用它：

class SearchFilterViewModel { 
    _regionGetter: Area.SingleSelectAreaGetter; 
    _townGetter: SingleSelectAreaGetter; 
    _suburbGetter: MultipleSelectAreaGetter; 
    _categories: KnockoutObservableArray<Category>; 
    _selectedCategories: KnockoutObservableArray<Category>; 

    constructor() { 
     this._categories = ko.observableArray([ 
      new Category("Vegan Meat", 1), 
      new Category("Vegan Dairy", 2), 
      new Category("Confectionary", 3), 
      new Category("Baking", 4), 
      new Category("Dessert", 5), 
      new Category("Restaurants", 6), 
      new Category("Grocers", 7) 
     ]); 
     this._selectedCategories = ko.observableArray([]); 
     this._regionGetter = new Area.SingleSelectAreaGetter(Area.Type.Region); 
     this._townGetter = new SingleSelectAreaGetter(Type.Town); 
     this._suburbGetter = new MultipleSelectAreaGetter(Type.Suburb); 
     this._regionGetter.getAreas("2186224"); 
     //this._regionGetter._selectedAreaGeonameId.subscribe(this._townGetter.getAreas.bind(this._townGetter)); 
     //this._townGetter._selectedArea.subscribe(this._suburbGetter.getAreas.bind(this._suburbGetter)); 
    } 
} 

它不識別「區域」。

如何讓search_view_model識別Area模塊？

我會做類似import { Area } from "./models/area_getter";嗎？

這在進口聲明說

cannot find module Area

這裏的錯誤是我的文件夾結構：

tsconfig.json：

{ 
    "compileOnSave": true, 
    "compilerOptions": { 
     "target": "es5", 
     "noImplicitAny": false, 
     "module": "system", 
     "moduleResolution": "node", 
     "sourceMap": false, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "removeComments": true, 
     "outDir":"js/" 
    }, 
    "exclude": [ 
    "bower_components", 
    "node_modules", 
    "wwwroot" 
    ] 
} 

Answer 1

嘗試

1. 取出「輸出模塊區{」
2. 進口面積=要求（「./款/ area_getter」）

，消除了明確的模塊名稱，並讓您的進口中的名字。

所以F1：

export interface iGetAreas { 
} 

export abstract class AreaGetter implements iGetAreas { 
} 

export class MultipleSelectAreaGetter extends AreaGetter { 
} 

export class SingleSelectAreaGetter extends AreaGetter { 
} 

F2：

import Area = require("./f1"); 

class SearchFilterViewModel { 
    _regionGetter: Area.SingleSelectAreaGetter; 
    _townGetter: Area.SingleSelectAreaGetter; 
    _suburbGetter: Area.MultipleSelectAreaGetter; 
}