类型记录全限定命名空间与导入有什么区别？

Question

嗨，我在理解类型记录中的命名空间方面有一些问题.这两者之间有什么区别：

export class FileBrowser {
    ...
    attached() {
        let elem = $("#file-manager");
        elem.dxFileManager({
            name: "fileManager",
            fileProvider: new DevExpress.fileProvider.RemoteFileProvider({
            })           
        });
    }
}

这是：

import RemoteFileProvider from 'devextreme/ui/file_manager/file_provider/remote';

export class FileBrowser {
    ...
    attached() {
        let elem = $("#file-manager");
        elem.dxFileManager({
            name: "fileManager",
            fileProvider: new RemoteFileProvider({                
            })           
        });
    }
}

因此，在第一个(编译，但不工作！)我使用完全限定的命名空间名称指定RemoteFileProvider，而不导入它。在第二个(起作用的)中，我使用导入，然后在没有完全限定的情况下引用RemoteFileProvider。

第一批代码确实没有问题地编译，但是在运行时抛出：

Uncaught (承诺中) TypeError:无法读取未定义的属性“RemoteFileProvider”

而第二个则是完美无缺的。

更新声明如下：

declare module DevExpress {...}
declare module DevExpress.fileProvider {
    ...
    export class RemoteFileProvider extends FileProvider {
        ...
    }
}

Answer 1

第一个示例假设您已经声明了一个全局命名空间，如下所示：

namespace DevExpress {
    export namespace fileProvider {
        export class RemoteFileProvider {
            constructor(someProp: {}) {}
        }
    }
}

此命名空间嵌入到脚本文件中(而不是带有import/export的模块)，可在全局JS范围内使用，并且可以直接使用(不需要import编辑)。您还可以使用window或globalThis来访问RemoteFileProvider。

new window.DevExpress.fileProvider.RemoteFileProvider(/*your args*/)
// or
new globalThis.DevExpress.fileProvider.RemoteFileProvider(/*your args*/)           

在第二个示例中，RemoteFileProvider是模块remote的默认export成员，具有绝对路径'devextreme/ui/file_manager/file_provider/remote'。

export default class RemoteFileProvider {
    constructor(someProp: {}) {}
}

第一次编译代码没有问题，但是在运行时抛出.而第二个则是完美无缺的。

这听起来像是您的命名空间定义有缺陷(请参阅上面的名称空间作为适当的示例)，或者您将RemoteFileProvider错误地分配到全局范围。这也可能是一个提示，说明您已经声明了一个环境名称空间declare namespace DevExpress (或类似的)，因此编译器声明没有运行时等效的代码。