在 TypeScript 模块/命名空间导入方面需要帮助答案

【问题标题】：Need assistance with TypeScript module/namespace import在 TypeScript 模块/命名空间导入方面需要帮助
【发布时间】：2017-07-15 15:17:43
【问题描述】：

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

我正在尝试使用由 DefinitelyTyped as 定义的 Angular 本地存储模块：

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

如何正确导入？

【问题讨论】：

标签： typescript typescript2.0 definitelytyped

【解决方案1】：

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

有两种方法可以解决这个问题。您可以使用模块（以前称为“外部模块”）或名称空间（以前称为“内部模块”）。每种方法的 repo 中有 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 的额外属性/方法。

在namespace.ts 中，与您在问题中显示的示例相比只有轻微的变化。因为angular exports a global type angular（用于script 标签），你可以只使用那个类型。这个全局类型已经被angular-local-storage“打补丁”了，因为对于“项目”中的“内部模块”/命名空间（任何带有tsconfig.json的目录），TypeScript 将在编译时包含所有d.ts文件，当然还有一个在那些d.ts 文件中（即在@types/angular-local-storage 中）“增强”了angular 全局类型。事实上，如果你删除node_modules里面的@types/angular-local-storage，namespace.ts的编译就会失败。

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

【讨论】：