打字稿:注入通用&获取ES6模块名称

时间:2016-02-16 16:21:19

标签: javascript angularjs generics typescript ecmascript-6

我正在尝试使用以下方法构建通用存储库:

  • 打字稿
  • ES6
  • Angular 1.x

但我无法弄清楚我应该如何注入实体然后获取其模块名称。

我想获得名称的原因: 是因为我遵循一个命名约定,其中一个名为order-count.ts的文件应该呈现URL' / order / count'

这可以用Typescript / Javascript解决吗?

这就是我所拥有的:

阶module.ts

import {App} from '../../App';
import {OrderService} from './order-service';

const module: ng.IModule = App.module('app.order', []);

module.service('orderService', OrderService);

阶service.ts

import {CrudService} from '../../shared/services/crud-service'
import {OrderCount} from '../order/entities/order-count';

export class OrderService {
    // @ngInject
    constructor(private crudService: CrudService<OrderCount>) {
        this.crudService = crudService;
    }

    getOrders() {
        var promise = this.crudService.getAll();

        promise.then(response => {
            console.log(response, 'success');
        }, error => {
            console.log(error, 'failed');
        });
    }
}

阶count.ts

import {Entity} from '../../../shared/models/entity';

export class OrderCount extends Entity {
    storeId: string;
    storeName: string;
}

entity.ts

export interface IEntity {
    id: number;
}

entity.ts

import {IEntity} from '../../module/contracts/entities/entity';

export class Entity implements IEntity {
    new() { }
    id: number;
}

污物-service.ts

'use strict';
import { Entity } from '../models/entity';
import { EndpointService } from './endpointService';

export class CrudService<TEntity extends Entity> {
    private baseCallPath: string;
    private entity: { new (): Entity };

    // @ngInject
    constructor(private endpointService: EndpointService, private $http: ng.IHttpService) {
        this.baseCallPath = new this.entity().constructor.name.replace('-', '/');
    }

    getAll(): ng.IHttpPromise<any> {
        return this.handleResponse(
            this.$http.get(this.endpointService.getUrl(this.baseCallPath)),
            'getAll'
        );
    }

    handleResponse(promise: ng.IHttpPromise<any>, callerMethodName: string): ng.IHttpPromise<any> {
        return promise.success((data: any) => {
            Array.prototype.push.apply(this.baseCallPath, data);
        }).error((reason: any) => {
            console.log(this.baseCallPath + callerMethodName, 'ERROR', reason);
        });
    }
}

端点service.ts

export class EndpointService {
    private baseUri: string = 'http://localhost:3000/api/';

    getUrl(moduleName: string): string {
        return this.baseUri + moduleName;
    }
}

2 个答案:

答案 0 :(得分:1)

This link可能有助于使用Typescript

实现通用存储库

答案 1 :(得分:0)

关于使用类名作为值,您可以检查this relevant question

可以检索并用作Foo.namethis.constructor.name的好东西。不好的是,它在每个浏览器中都不可用,应该是polyfilled。另一个坏处是缩小功能不会保存其原始名称。

使用Foo.name = 'Foo'对其定义注释函数并坚持使用预先制作的属性会不会很棒?并不是的。 Function.nameoriginally non-configurable,因此它在多种浏览器中都是只读的。

如果您不打算完全避免最小化,或者您不太喜欢配置minifier以保留类名(解决方案因设计错误),请不要使用{{1对于类似的东西。

Angular中可扩展ES6 / TS类的典型案例是

Function.name
export class Foo {
  static _name = 'Foo';
}

export default angular.module('app.foo', [])
  .factory('Foo', Foo)
  // if DRY is a must,
  // .factory(Foo._name, Foo)
  .name;
import { Foo } from './foo';

export class Bar extends Foo {
  static _name = 'Bar';
}

export default angular.module('app.bar', []).factory('Bar', Bar).name;

因此Angular模块和类的导出应该齐头并进,它们是不可互换的。