导出/导入模块不起作用打字稿

Question

我在文件夹 models/area_getter.ts 中有一个名为 Area 的模块：

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 识别区域模块？

我会做类似import { Area } from "./models/area_getter"; 的事情吗？

这在import语句中有一个错误说

找不到模块区域

这是我的文件夹结构：

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. import Area = require("./models/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;
}