Angular + Typescript 代码约定

Question

我在我的项目中使用了 Angularjs + Typescript 的组合。我正在寻找一个好的代码约定。这两种技术分别有一些很好的例子。例如，我在使用 TypeScript 时遵循这个：

https://github.com/Platypi/style_typescript#introduction

但是找不到适合 Angularjs + Typescript 组合的好方法。更具体一点，例如，我需要一个关于如何使用 typescript 语法等编写指令的约定。

我找不到任何关于该主题的好文章。如果有人可以分享有关该主题的内容，那就太好了。谢谢！

Answer 1

我在编写angularjs + typescript时遵循this项目结构。

由于指令实际上是工厂函数，因此编写指令将以相同的方式完成：

module Directives{
  export function MyDirective(optionalService): ng.IDirective{
     var myDirective = {};
     myDirective.restrict = 'A';
     myDirective.link = function(scope, elem){};
     //etc
     return myDirective;
  }
  MyDirective.$inject = ["optionalService"];
}

app.directive("myDirective", Directives.MyDirective);

Answer 2

如果你使用 Angular1.5+ 可以遵循 Angular2 组件风格：

class DemoController implements ng.IComponentController {
    public static $inject = [
        'Service1',
    ];
    constructor(private Service1: IService1) {
        //
    }

    public $onInit(): void {
        // ---
    }

    public $postLink(): void {
        // ---
    }

    // ---
}

export const DemoComponent = {
    selector: 'demoComponent',
    bindings: {
        prop1: '<',
        prop2: '<',
    },
    controller: DemoController,
    templateUrl: require('./your-tpl.html'),
};

在你的模块的某个地方，你可以注册这个组件：

.component(DemoComponent.selector, DemoComponent)

对于创建指令，这种代码风格也很不错：

export class MyDemoDirective implements ng.IDirective {
    public restrict: string;

    public static $inject: string[] = [
        'Service1',
        'Service2',
    ];

    constructor(private Service1: IService1, private Service2: IService2) {
        this.restrict = 'A';
        // ---
    }

    public link(...) {
        // ---
    }

    public static factory(): ng.IDirectiveFactory {
        const directive = (Service1: IService1, Service2: IService2) => {
            return new MyDemoDirective($filter, User);
        };
        return directive;
    }
}