代码之家 › 专栏 › 技术社区 › Jeremy

带有私有属性的Typescript类

typescript2.0 typescript

Jeremy · 技术社区 · 7 年前

在一个js文件中,我构建了一个库,其中包含我可能需要在不同页面上使用的常用函数。我通过模拟名称空间方案来组织函数,并且我还使用了一种模式来尽可能地隐藏我不想直接使用的私有属性和函数。

这是模式

var mynamespace = (function () {

    var private = {
        funcX: function (): any {..},
    };

    var public =
        {
            subnamespace1: {
                func1: function (ctl: HTMLElement): boolean {...},
            },

            subnamespace2: {

                func2: function (sender: any, args: any): void {...},

                func3: function (sender: any, args: any): void {
                    private.funcx();
                },
            }
        };

    return public;

})();

只要页面包含js,我就可以轻松执行库中的任何函数:

mynamespace.subnamespace2.func2(x,y);

到目前为止,这已经很好地工作了,但是我第一次尝试使用TypeScript,我正在寻找实现一个类似的模式。我希望这个库是用typescript构建的,但是页面可能只使用js,而不是typescript。

我第一次尝试就是这么做。。。

namespace mynamespace {
    namespace subnamespace1 {
        export function func1(): boolean {...}
    }
    namespace subnamespace2 {
        export function func2(): boolean {...}
        export function func3(): boolean {...}
    }
}

...这不起作用,因为我无法访问子命名空间

所以我试过这个。。。

namespace mynamespace {
    export class subnamespace1 {
        func1(): boolean {...}
    }
    export class subnamespace2 {
        func2(): boolean {...}
        func3(): boolean {...}
    }
}

...这不起作用,因为虽然我可以访问子名称空间,但无法访问函数。

有没有可能以与我最初的javascript模式类似的方式构建Typescript来输出js,或者实现同样的功能?

1 回复 | 直到 7 年前

Titian Cernicova-Dragomir 7 年前

可以使用名称空间方法,只需导出子名称空间

namespace mynamespace {
  function funcX(): boolean { return false; }
  namespace private {
    export function funcPrivate(): boolean { return false; }
  }

  export namespace subnamespace1 {
    export function func1(): boolean { return funcX(); }
  }
  export namespace subnamespace2 {
    export function func2(): boolean { return private.funcPrivate(); }
    export function func3(): boolean { return true; }
  }
}

mynamespace.subnamespace1.func1(); // ok in both js and ts
mynamespace.subnamespace2.func2(); // ok in both js and ts
mynamespace.funcX() // not accesible
mynamespace.private.funcPrivate() // not accesible

名称空间解决方案不会输出与手写版本完全相同的js(它更多地依赖于函数闭包),但功能应该是相同的。

如果生成相同的JS模式对您很重要,那么您可以继续使用添加了TS类型的JS版本。没有理由不起作用:

var mynamespace = (function () {

    var private = {
        funcX: function (): any {},
    };

    var public =
        {
            subnamespace1: {
              func1: function (ctl: HTMLElement): boolean { return true;},
            },

            subnamespace2: {

                func2: function (sender: any, args: any): void { },

                func3: function (sender: any, args: any): void {
                    private.funcX();
                },
            }
        };

    return public;

})();
mynamespace.subnamespace1.func1(null); // ok in both js and ts
mynamespace.subnamespace2.func2(null, null); // ok in both js and ts