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;
    }
}

Angular + Typescript代码约定

2 个答案: