【问题标题】:Export a TypeScript module with classes from different files使用来自不同文件的类导出 TypeScript 模块
【发布时间】:2016-10-24 11:22:50
【问题描述】:

关于如何在单独的文件中拆分带有类的 TypeScript 模块有几个问题,但到目前为止还没有解决方案适用于我的问题。

我有一个模块 (store),其中包括两个类 (Person & SerialisedRecord)。当两个类都在一个文件中时,编译和导出工作正常。

现在我想为每个类创建一个文件(Person.tsSerialisedRecord.ts),遵循我已经拥有的相同导出模式。但我不知道如何实现这一点。

这是我最初的情况:

store.ts

export module store {

  export class Person {
    public fullName: string = '';

    constructor(firstName: string, lastName: string) {
      this.fullName = `${firstName} ${lastName}`;
    }
  }

  export class SerialisedRecord {   
    constructor(public serialised: string, public id: string) {}
  }

}

当我将 store.ts 编译为 store.js (ES5) 时,我得到了我想要的(一个 SystemJS 模块在一个模块中导出两个类):

System.register([], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var store;
    return {
        setters:[],
        execute: function() {
            (function (store) {
                var Person = (function () {
                    function Person(firstName, lastName) {
                        this.fullName = '';
                        this.fullName = firstName + " " + lastName;
                    }
                    return Person;
                }());
                store.Person = Person;
                var SerialisedRecord = (function () {
                    function SerialisedRecord(serialised, id) {
                        this.id = id;
                        this.serialised = serialised;
                    }
                    return SerialisedRecord;
                }());
                store.SerialisedRecord = SerialisedRecord;
            })(store = store || (store = {}));
            exports_1("store", store);
        }
    }
});

现在我尝试这样做:

export module store {
  export {Person} from "./Person";
  export {SerialisedRecord} from "./SerialisedRecord";
}

但它没有告诉我:

错误 TS1194:命名空间中不允许导出声明。

你能告诉我我做错了什么吗?

这是我的 tsconfig.json

{
  "compilerOptions": {
    "module": "system",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "noImplicitReturns": true,
    "removeComments": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "typings/browser",
    "typings/browser.d.ts"
  ]
}

【问题讨论】:

    标签: class typescript module export systemjs


    【解决方案1】:

    如果你去掉 store 模块,效果会很好:

    store.ts:

    export { Person } from "./Person";
    export { SerialisedRecord } from "./SerialisedRecord";
    

    index.ts:

    import { Person, SerialisedRecord } from "./store";
    
    let p = new Person("first", "last");
    

    编辑

    如果你必须保持命名空间结构,你可以试试这样的:

    import Person from "./Person";
    import SerialisedRecord from "./SerialisedRecord";
    
    export default {
        store: {
            Person,
            SerialisedRecord
        }
    }
    

    【讨论】:

    • 但是我的SystemJS模块不包含exports_1("store", store);,这意味着我的命名空间store在加载我的模块时将不可用。
    • 如果里面什么都没有,为什么还要它?
    • 我希望它能够将我的应用程序构建到 JS 命名空间中,例如 module.storemodule.notificationmodule.audio 等。
    • 但是,当所有脚本都加载到同一个全局命名空间中时,这种方法是有意义的,但是当您使用模块系统时,它就不那么有意义了。但请检查我修改后的答案。
    • 好的,这行得通! :) 非常重要的是PersonSerialisedRecord 使用export default class,如export default class Person
    猜你喜欢
    • 1970-01-01
    • 2014-01-27
    • 2018-05-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-11-06
    • 1970-01-01
    相关资源
    最近更新 更多