Question

我刚刚开始使用Typescript转换一些现有的Angular代码，而且我遇到了第一道障碍。我无法通过以下方式进行编译，但我无法查看错误，所以希望有人能帮助我。

错误：

Function declared a non-void return type, but has no return expression. Line 41 Col 102

Could not find symbol '$resource'. Line 49 Col 38

代码：

/// <reference path="../dt/angular/angular.d.ts" />
/// <reference path="../dt/angular/angular-resource.d.ts" />


var chartAPI = angular.module('chartAPI', ['ngResource', 'ngCookies']);

// Config
chartAPI.config(['$resourceProvider', '$locationProvider', '$httpProvider', function ($resourceProvider, $locationProvider, $httpProvider) {
    // Don't strip trailing slashes from calculated URLs
    $resourceProvider.defaults.stripTrailingSlashes = false;
    // Enable HTML5 - needs HTML5 doc
    //$locationProvider.html5Mode(true);
    // Ensure CSRF token is sent in $http requests
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
    $httpProvider.defaults.withCredentials = true;
}]);

interface IDRFPagedResult extends ng.resource.IResource<IDRFPagedResult> {
    count: number;
    next: string;
    previous: string;
    results: Array<any>;
}

interface IViewAsUser extends ng.resource.IResource<IViewAsUser> {
    id: number;
    first_name: string;
    last_name: string;
    email: string;
}

interface IViewAsUserList extends IDRFPagedResult {
    results: Array<IViewAsUser>;
}

interface IViewAsUserListResource extends IViewAsUserList {
    list() : IViewAsUserList;
}

chartAPI.factory('ViewAsUserList', ['$resource', function ($resource: ng.resource.IResourceService): IViewAsUserListResource => {

    var queryAction: ng.resource.IActionDescriptor = {
        method: 'GET',
        params: {},
        isArray: false
    };

    return <IViewAsUserListResource> $resource('/rest/v1/view-as-user/', {}, {
        list: queryAction
    });
}]);

Answer 1

这一行有一个语法问题：

chartAPI.factory('ViewAsUserList', ['$resource', function ($resource: ng.resource.IResourceService): IViewAsUserListResource => {

特别是这部分：

 function ($resource: ng.resource.IResourceService): IViewAsUserListResource => {

您无法将function与=>组合在一起 - 可以写function (args) { ... }或(args) => { ... }。编译器试图将函数体解释为函数类型文字的一部分。

Answer 2

我还建议你看一下这篇文章

AngularJS + TypeScript – using $resource to talk to a WebApi backend

要看，要声明我们的资源，我们需要一些不同的接口结构。这应该是一些项目

interface IDRFPagedResult {
    id: number;
    first_name: string;
    last_name: string;
    email: string;
}

然后我们定义：IDRFPagedResourceDef - 一个简单的界面，只扩展IDRFPagedResult 上的资源（主要参见IResource<>）：

 interface IDRFPagedResourceDef extends ng.resource.IResource<IDRFPagedResult> {
 }

最后资源定义上的资源类IDRFPagedResource IDRFPagedResourceDef （主要参见IResourceClass<>）

interface IDRFPagedResource extends ng.resource.IResourceClass<IDRFPagedResource> {
}

最后，引用的资源工厂定义：

export class ResourceBuilder{

    static $inject = ['$resource'];

    constructor(private $resource: ng.resource.IResourceService) {
    }

    public getDRFPagedResource(): IDRFPagedResource {
        return  this.$resource('/rest/v1/view-as-user/', {}, {
           // extend here, e.g. 
           // list: queryAction
       });
    }
}

建议阅读article以查看所有操作

typescript函数声明了非void类型但没有返回表达式

2 个答案:

AngularJS + TypeScript – using $resource to talk to a WebApi backend