我目前正在尝试清理代码,以便针对接口而不是实现进行编程,但无法弄清楚如何做到。
更具体地说,我正在使用: * 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组件中无法注入PostsServiceImpl的实例。
当然,这只是因为我没有找到正确的声明/导出/导入方式。
如果没有“export interface PostsService...”,我在posts控制器中使用该服务将会得到TS编译错误。
如果没有“export var PostsService: PostsServiceImpl;”,我将在@View装饰器的viewInjector中得到TS编译错误。
在生成的JS代码中,我只发现“exports.PostsService;”,这是由于导出变量而添加的。我知道接口在运行时消失了。
所以,我有点迷失在所有这些之中。有什么实用的想法可以让我在TypeScript和Angular 2中使用基于接口的编程吗?