Question

我是Typescript（1.8）的新手。我正在将为角度1.4编写的项目转换为打字稿。

我做的其中一件事是创建一个D3Service，它以异步方式加载d3.js库并使其在promise中可用。

这是我转换为打字稿的代码：

namespace D3Provider{

    export class D3Service{
        static $inject = ['$document', '$window', '$q', '$rootScope','$timeout'];

        public d3: ng.IPromise<{}>;

        constructor(
            private $document: ng.IDocumentService, 
            private $window: ng.IWindowService, 
            private $q: ng.IQService, 
            private $rootScope: ng.IScope, 
            private $timeout: ng.ITimeoutService){
                var d = $q.defer();
                this.d3=d.promise;
                function onScriptLoad() {
                // Load client in the browser
                $timeout(function(){
                    $rootScope.$apply(function () {
                        d.resolve($window['d3']);
                    });
                });
            }
            var scriptTag = $window.document.createElement('script');
            scriptTag.type = 'text/javascript';
            scriptTag.async = true;
            scriptTag.charset="utf-8"
            scriptTag.src = 'bower_components/d3/d3.min.js';
            scriptTag.onload = onScriptLoad;

            var s = $document[0].getElementsByTagName('body')[0];
            s.appendChild(scriptTag);
        }
    }
    angular.module('d3', [])
    .service('d3Service', D3Service);
}

public d3属性包含一个包含window.d3值的承诺。

我已经下载了{/ 3}}，可以在../../ typings / modules / d3 / index.d.ts中找到

在代码中我尝试了以下内容：

/// <reference path="../../typings/modules/d3/index.d.ts" />

import * as d3lib from 'd3';
...
public d3: ng.IPromise<d3lib>;

编译器然后抱怨：错误TS2304：找不到名称＆＃39; d3lib＆＃39;。

Answer 1

或者，你可以让你的诺言无效（称之为 ready 或类似的东西），当它被解析时 - 你可以访问d3作为全局变量/名称空间。

public ready: ng.IPromise<void>;

...

var d = $q.defer();
this.ready = d.promise;
var scriptTag = $window.document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.async = true;
scriptTag.charset="utf-8"
scriptTag.src = 'bower_components/d3/d3.min.js';
scriptTag.onload = () => d.resolve();
var s = $document[0].getElementsByTagName('body')[0];
s.appendChild(scriptTag);

然后你可以使用它：

d3Service.ready.then(() => {
   //d3 can be used here 
});

此外，无需$timeout和$scope.$apply

是否可以将所有模块导入分配为返回类型？

1 个答案: