angular - 使用 TypeScript、Angular 2 和 SystemJS 进行基于接口(interface)的编程

Question

我目前正在尝试清理一些代码，以便针对接口(interface)而不是针对实现进行编程，但不知道如何去做。

更具体地说，我正在使用:* TypeScript 1.5.0 beta -> 转译为 ES5/commonjs* SystemJS加载模块

我目前尝试如下使用外部模块:

posts.service.ts 文件:

///<reference path="../../../typings/tsd.d.ts" />
///<reference path="../../../typings/typescriptApp.d.ts" />
...
export interface PostsService{ // 1
    fetchPosts(): Rx.Observable<any>;
}
export var PostsService:PostsServiceImpl; // 2
...
export class PostsServiceImpl implements PostsService { // 3
    ...
    constructor(){
        console.log('Loading the Posts service');
}
...
fetchPosts(): Rx.Observable<any>{ 
   ...
}

并且该模块被导入到 posts.ts 中:

    ///<reference path="../../../typings/tsd.d.ts" />
    ///<reference path="../../../typings/typescriptApp.d.ts" />

    import {PostsService, PostsServiceImpl} from 'components/posts/posts.service';

    @Component({
    selector: 'posts',
    viewInjector: [
        //PostsServiceImpl
        //PostsService
        bind(PostsService).toClass(PostsServiceImpl)
    ]
})
...
export class Posts {
    private postsServices: PostsService;

    constructor(postsService: PostsService) {
        console.log('Loading the Posts component');
        this.postsServices = postsService;
        ...
    }

    ...
}

上面的代码编译正确，但基本上我的问题归结为 Angular 不会在 Posts 组件中注入(inject) PostsServiceImpl 的实例。

当然只是因为我没有找到正确的方法来声明/导出/导入所有内容

如果没有 export interface PostsService ...，我会收到 TS 编译错误，因为我在 posts Controller 中使用了它。

没有 export var PostsService:PostsServiceImpl; 我在 @View 装饰器的 viewInjector 中得到 TS 编译错误

在生成的 js 代码中，我只找到 exports.PostsService; 是因为导出变量而添加的...我知道接口(interface)在运行时会消失。

所以我有点迷失在这一切中。关于如何使用基于接口(interface)的编程 w/TypeScript 和 Angular 2，有什么实用的想法吗？

Answer 1

Any practical ideas how I can use interface based programming w/ TypeScript & Angular 2

接口(interface)在运行时被删除。事实上装饰器也不支持接口(interface)。因此，您最好使用运行时确实存在的东西(即实现)。