基于接口编程打字稿，角2及SystemJS [英] Interface based programming with TypeScript, Angular 2 & SystemJS

问题描述

目前，我正在试图清理一些code，以程序对接口而不是对实现，但不能弄清楚如何。

要更具体，我使用：
*打字稿1.5.0测试版 - > transpiled到ES5 / CommonJS的
* SystemJS加载模块

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

posts.service.ts文件：

  ///＆lt;参考路径=../../../分型/ tsd.d.ts/＆GT;
///＆lt;参考路径=../../../分型/ typescriptApp.d.ts/＆GT;
...
导出接口PostsService {// 1
    fetchPosts（）：Rx.Observable＆LT;任何取代;
}
出口VAR PostsService：PostsServiceImpl; // 2
...
出口类PostsServiceImpl实现PostsService {// 3
    ...
    构造函数（）{
        的console.log（'载入帖子服务'）;
}
...
fetchPosts（）：Rx.Observable＆LT;＆任何GT; {
   ...
}
 

和该模块在posts.ts输入：

  ///＆lt;参考路径=../../../分型/ tsd.d.ts/＆GT;
///＆lt;参考路径=../../../分型/ typescriptApp.d.ts/＆GT;进口{PostsService，PostsServiceImpl}从组件/职位/ posts.service';
 

@Component（{
    选择：'帖子'，
    viewInjector：
        // PostsServiceImpl
        // PostsService
        绑定（PostsService）.toClass（PostsServiceImpl）
    ]
}）
...
出口类职位{
    私人postsServices：PostsService;

 构造函数（postsService：PostsService）{
    的console.log（'载入帖子组件'）;
    this.postsServices = postsService;
    ...
}...
 

}

以上code编译正确，但基本上我的问题可以归结为一个事实，即角不会在帖子组件注入PostsServiceImpl的一个实例。

当然，这只是因为我没有找到申报/导出正确的方法/导入所有

没有导出接口PostsService ... ，我得到TS编译错误，因为我在posts控制器使用它。

没有出口VAR PostsService：PostsServiceImpl; 我得到了@View装饰的viewInjector TS编译错误

在生成的JS code，我只找到<$​​ C $ C> exports.PostsService; 这是因为出口变种增加......我知道，接口在运行时消失。

所以我在这一切有点失落。任何实际想法如何，我可以使用基于接口的编程瓦特/打字稿及放大器;角2？

解决方案

  

任何实际想法如何，我可以使用基于接口的编程瓦特/打字稿及放大器;角2

界面在运行时被删除。事实上装饰不支持接口任。那么，你是使用过的东西，它在运行时存在（即实现）更好。

I'm currently trying to clean up some code in order to program against interfaces rather than against implementations but can't figure out how to.

To be more specific, I'm using: * TypeScript 1.5.0 beta -> transpiled to ES5 / commonjs * SystemJS to load the modules

I currently try to use external modules as follows:

posts.service.ts file:

///<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>{ 
   ...
}

and that module is imported in 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;
    ...
}

...

}

The above code compiles correctly, but basically my issue boils down to the fact that Angular won't inject an instance of PostsServiceImpl in the Posts component.

Of course it's simply because I don't find the correct way to declare/export/import everything

Without export interface PostsService ..., I get TS compilation errors because I use it in the posts controller.

Without export var PostsService:PostsServiceImpl; I get TS compilation errors in the @View decorator's viewInjector

In the generated js code I only find exports.PostsService; which is added because of the export var... I know that interfaces disappear at runtime.

So I'm a bit lost in all this. Any practical ideas how I can use interface based programming w/ TypeScript & Angular 2?

解决方案

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

Interfaces are erased at runtime. In fact decorators don't support interfaces either. So you are better off using something that does exist at runtime (i.e. implementations).

这篇关于基于接口编程打字稿，角2及SystemJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！