将Angular 1.x与Typescript结合使用时,我遇到了一些问题。
考虑此代码:
get(id): ng.IPromise<Server.MyItem> {
return this.$http.get(`${this.baseAddress}/${id}`).then(d => d.data);
}
它由tsc编译,但我收到以下错误:
输入'IPromise&lt; {}&gt;'不能指定为“IPromise”类型
我尝试使用更具体的IHttpPromise
,但它没有做技巧..
有什么想法吗?
答案 0 :(得分:3)
尝试将您的数据投射到Server.MyItem
:
get(id): ng.IPromise<Server.MyItem> {
return this.$http.get(`${this.baseAddress}/${id}`).then(d => <Server.MyItem>d.data);
}
您还可以使用该方法的通用版本:
get(id): ng.IPromise<Server.MyItem> {
return this.$http.get<Server.MyItem>(`${this.baseAddress}/${id}`).then(d => d.data);
}
答案 1 :(得分:0)
当我使用打字稿时,这就是我和我的Sr将如何实现请求。
首先,我需要从任何请求中为我的结果集提供两个接口。一个扩展IHttpPromiseCallbackArg,另一个扩展为我的自定义输出。我总是喜欢为回归的实际类型创建第三个。在这个例子中,我使用了Contacts作为我的工厂,所以我需要一个IContact接口。
interface ICallback<T> extends ng.IHttpPromiseCallbackArg<T> {
data?: T;
}
interface IOutput<T> {
Output: T,
ErrorMsg: string
}
interface IContact {
ContactID: string;
ContactLastName: string;
ContactFirstName: string;
ContactEmail: string;
ContactPhone: string;
ContactFullName: string;
ModifiedBy?: string;
ModifiedOn?: Date;
CreatedBy: string;
CreatedOn: Date;
}
然后我需要一个Notification Factory和RequestHelper Factory
export class NotificationFactory {
success = function (msg: string, title?: string): void {
this.toastr.success(msg, title);
}
error = function (msg: string, title?: string): void {
this.toastr.error(msg, title);
}
static $inject: Array<string> = ['toastr'];
constructor(private toastr: ng.toastr.IToastrService) {
return this;
}
}
export class RequestHelper {
toastSuccess = function (msg: string, title?: string): void {
this.NotificationFactory.success(msg, title);
}
toastError = function (msg: string, title?: string): void {
this.NotificationFactory.error(msg, title);
}
private success = (results: ICallback<IOutput<any>>, options: IOptions): any => {
if (results.data.ErrorMsg) {
this.NotificationFactory.error(results.data.ErrorMsg);
}
if (typeof options.callback === 'function') {
if (options.showSave && !results.data.ErrorMsg) {
this.NotificationFactory.success('Your changes have been saved.');
}
return options.callback(results.data);
}
if (options.showSave && !results.data.ErrorMsg) {
this.NotificationFactory.success('Your changes have been saved.');
}
return results.data;
}
private fail = (err: any, options: IOptions): ng.IPromise<any> => {
if (options.callingFn !== undefined) {
this.NotificationFactory.error('There was an error calling ' + options.callingFn + '. details:' + err.statusText);
}
return err;
}
makeRequest = (request: IRequest, o?: IOptions): ng.IPromise<any> => {
o = o || {};
var vm = this;
return this.$http(request).then((results: ICallback<IOutput<any>>) => {
return vm.success(results, o);
}).catch((err) => {
return vm.fail(err, o);
});
}
static $inject: Array<string> = ['$http', '$state', '$stateParams', 'NotificationFactory'];
constructor(private $http: ng.IHttpService, private $state: any, private $stateParams: IMyStateParams, private NotificationFactory: NotificationFactory) {
return this;
}
}
然后在任何工厂,我都可以注入我的Request Helper并调用'makeRequest'
export class ContactsFactory {
getData = (): ng.IPromise<IOutput<Array<IContact>>> => {
let req = { method: 'GET', url: '/Contacts/GetContacts?d=' + Date.parse(new Date().toString()).toString() };
return this.RequestHelper.makeRequest(req, { callingFn: 'ContactsFactory.getData', callback: null, showSave: false });
}
getContactByID = (id: string): ng.IPromise<IOutput<Array<IContact>>> => {
let req = { method: 'POST', url: '/Contacts/GetContactByID', data: { id: id } };
return this.RequestHelper.makeRequest(req, { callingFn: 'ContactsFactory.getContactByID', callback: null, showSave: false });
}
static $inject: Array<string> = ['RequestHelper', 'UsersFactory'];
constructor(private RequestHelper: RequestHelper, private UsersFactory: UsersFactory) {
return this;
}
}
最后我的控制器会打电话给我的工厂
export class ContactsController {
loading: boolean;
contacts: Array<IContact>;
initialize = (): void => {
this.loading = true;
this.ContactsFactory.getData().then((results) => {
this.contacts = results.Output;
this.loading = false;
});
});
}
static $inject: Array<string> = ['ContactsFactory'];
constructor(private ContactsFactory: ContactsFactory) {
this.initialize();
}
}
希望这会有所帮助。此外,我正在支持@Franks的答案,因为我正在按照他的说法输入我的请求。感谢Phxjoe的帮助,当时我的高级开发人员。