我目前正在尝试清理一些代码,以便针对接口而不是针对实现进行编程,但无法弄清楚如何实现。
更具体地说,我使用: * 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 ...
,我会收到TS编译错误,因为我在posts控制器中使用它。
没有export var PostsService:PostsServiceImpl;
我在@View装饰器的viewInjector中得到TS编译错误
在生成的js代码中,我只找到由于export var而添加的exports.PostsService;
...我知道接口在运行时会消失。
所以我有点迷失了。任何实用的想法如何使用基于接口的编程w / TypeScript&amp; Angular 2?
答案 0 :(得分:6)
任何实用的想法如何使用基于接口的编程w / TypeScript&amp; Angular 2
接口在运行时被擦除。事实上,装饰者也不支持接口。所以你最好使用在运行时存在的东西(即实现)。
答案 1 :(得分:4)
你必须记住你的类可能(并且应该)依赖于抽象,但是有一个地方你不能使用抽象:它在Angular的依赖注入。
Angular必须知道要使用的实现。
示例:
/// <reference path="../../../../../_reference.ts" />
module MyModule.Services {
"use strict";
export class LocalStorageService implements ILocalStorageService {
public set = ( key: string, value: any ) => {
this.$window.localStorage[key] = value;
};
public get = ( key: string, defaultValue: any ) => {
return this.$window.localStorage[key] || defaultValue;
};
public setObject = ( key: string, value: any ) => {
this.$window.localStorage[key] = JSON.stringify( value );
};
public getObject = ( key: string ) => {
if ( this.$window.localStorage[key] ) {
return JSON.parse( this.$window.localStorage[key] );
} else {
return undefined;
}
};
constructor(
private $window: ng.IWindowService // here you depend to an abstraction ...
) { }
}
app.service( "localStorageService",
["$window", // ... but here you have to specify the implementation
Services.LocalStorageService] );
}
因此,在测试中,您可以轻松使用模拟,因为所有控制器/服务等都依赖于抽象。但对于实际应用,角度需要实现。
答案 2 :(得分:3)
TypeScript不会为接口生成任何符号,但您需要某种符号才能使依赖注入工作。
解决方案:使用OpaqueTokens作为符号,通过provide()函数为该标记分配一个类,并在类的构造函数中使用带有该标记的Inject函数。
在这里的例子中,我假设你想在Posts组件中将PostsServiceImpl分配给PostsService,因为当代码全部在同一个地方时,它更容易解释。 provide()调用的结果也可以放在angular.bootstrap(someComponent,arrayOfProviders)的第二个参数中,或者放在层次结构中比Posts组件更高的组件的provide []数组。
在components / posts / posts.service.ts中:
import {OpaqueToken} from "@angular/core";
export let PostsServiceToken = new OpaqueToken("PostsService");
在你的构造函数中:
import {PostsService, PostsServiceImpl, PostsServiceToken} from 'components/posts/posts.service';
import {provide} from "@angular/core";
@Component({
selector: 'posts',
providers: [provide(PostsServiceToken, {useClass: PostsServiceImpl})]
})
export class Posts {
private postsServices: PostsService;
constructor(
@Inject(PostsServiceToken)
postsService: PostsService
) {
console.log('Loading the Posts component');
this.postsServices = postsService;
...
}
...
}
答案 3 :(得分:1)
在打字稿中你可以实现类。
示例强>
config.service.ts:
export class ConfigService {
HUB_URL: string;
}
export class ConfigServiceImpl implements ConfigService {
public HUB_URL = 'hub.domain.com';
}
export class ConfigServiceImpl2 implements ConfigService {
public HUB_URL = 'hub2.domain.com';
}
app.component.ts:
import { Component } from '@angular/core';
import { ConfigService, ConfigServiceImpl, ConfigServiceImpl2 } from './config.service';
@Component({
...
providers: [
{ provide: ConfigService, useClass: ConfigServiceImpl }
//{ provide: ConfigService, useClass: ConfigServiceImpl2 }
]
})
export class AppComponent {
}
然后,您可以为服务提供不同的实现。