Question

我在Visual Studio 2015中使用TypeScript 2.1.5。该项目配置为使用＆＃34; ES 2015＆＃34;模块系统和ECMAScript 6。

我尝试使用Angular Local Storage模块，该模块由DefinitelyTyped as定义：

declare module 'angular' {
    export namespace local.storage {
        interface ILocalStorageService { 
        }
    }
}

在我的一项服务中，我想导入该界面，以便我可以使用它，如下所示：

module Foooooo.Services {
    export class FooService {
        constructor(private localStorageService: local.storage.ILocalStorageService) {

        }
    }
}

在倾注文档之后，我已经尝试了所有我能想到的事情：

import local from "angular";                           // bzzzzzt
import * as ang from "angular";                        // causes all of my other interfaces to no longer resolve
import { local } from "angular";                       // doesn't compile
import { ILocalStorageService } from "angular";        // other interfaces don't resolve anymore
import { local.ILocalStorageService } from "angular";  // nopenope
import ILocalStorageService = require("angular");      // error: not compatible with ECMAScript 6 or higher

如何正确导入？

Answer 1

您可以看到我的解决方案here。运行npm install，然后npm run build，亲眼看看它是否正确编译。

有两种方法可以解决这个问题。您可以使用模块（以前称为＆＃34;外部模块＆＃34;）或命名空间（以前称为＆＃34;内部模块＆＃34;）。每个方法的回购中都有2个*.ts个文件和相应的名称。

在module.ts中，您明确import 2个依赖关系：angular和angular-local-storage。 angular-local-storage是"side effect" import，因为它会修补angular而不会导出任何新内容。在import 'angular-local-storage'之后，importedAngular（包含export angular的任何内容的变量）现在知道angular-local-storage所提供的额外属性/方法。< / p>

在namespace.ts中，您在问题中显示的示例只有轻微的变化。由于angular exports a global type angular（与script标签一起使用），您可以使用该类型。这种全局类型已经被修补了＃34; by angular-local-storage因为＆＃34;内部模块＆＃34; /名称空间位于＆＃34;项目＆＃34; （具有tsconfig.json的任何目录），TypeScript将在编译时包含所有d.ts个文件，当然还有d.ts个文件中的一个（即@types/angular-local-storage内部）＆＃34;增强＆＃34; angular全局类型。实际上，如果删除@types/angular-local-storage内的node_modules，则namespace.ts的编译将失败。

您应该更喜欢模块化方法而不是命名空间方法，因为那里的许多软件包都不提供UMD全局类型，导致后一种方法失败。

需要有关TypeScript模块/名称空间导入

1 个答案: