Export/Import-Modul nicht funktioniert Typoskript

Question

Ich habe dieses Modul namens Area Ordner models/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 
    } 
} 

Dann, wenn ich versuche, es in view_models/search_view_model.ts zu verwenden:

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)); 
    } 
} 

Es "Bereich" nicht erkannt.

Wie mache ich das search_view_model das Area-Modul erkennen?

Würde ich etwas tun wie import { Area } from "./models/area_getter";?

Dieser Fehler in der Import-Anweisung hat

cannot find module Area

hier sagen will, ist meine Ordnerstruktur:

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

Versuchen

1. das "Export-Modul Gebiet {"
2. Import-Bereich = require ("./ model/area_getter")

entfernen, den die expliziten Modulnamen beseitigt und können Sie es innerhalb des Imports nennen.

So 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; 
}