面试题：TypeScript命名空间与模块的交互

命名空间转ES6模块交互

命名空间类型在ES6模块中使用：

在命名空间代码中，将需要在模块中使用的类型导出。假设命名空间代码如下（以TypeScript为例，JavaScript类似思路）：

// namespaceCode.ts
namespace MyNamespace {
    export class MyClass {
        public value: number;
        constructor(val: number) {
            this.value = val;
        }
    }
}
// 将命名空间导出
export = MyNamespace;

在ES6模块中导入使用：

// es6Module.ts
import MyNamespace from './namespaceCode';
const myInstance = new MyNamespace.MyClass(10);
console.log(myInstance.value);

ES6模块函数在命名空间中调用：

在ES6模块中导出函数：

// es6ModuleFunction.ts
export function myModuleFunction(): string {
    return 'This is from ES6 module';
}

在命名空间中导入并使用。由于命名空间不是ES6模块，不能直接使用import，可以通过全局变量模拟。假设在HTML中先引入ES6模块编译后的脚本：

<script type="module" src="es6ModuleFunction.js"></script>
<script src="namespaceWithFunctionCall.js"></script>

命名空间代码如下：

// namespaceWithFunctionCall.ts
namespace MyNamespace {
    export function callModuleFunction(): void {
        const result = (window as any).myModuleFunction();
        console.log(result);
    }
}

ES6模块转命名空间交互

ES6模块类型在命名空间中使用：

在ES6模块中导出类型：

// es6ModuleType.ts
export class MyES6Class {
    public data: string;
    constructor(data: string) {
        this.data = data;
    }
}

在命名空间中使用，同样通过全局变量方式。在HTML中先引入ES6模块编译后的脚本：

<script type="module" src="es6ModuleType.js"></script>
<script src="namespaceUsingES6Type.js"></script>

命名空间代码：

// namespaceUsingES6Type.ts
namespace MyNamespace {
    export function useES6Type(): void {
        const myES6Instance = new (window as any).MyES6Class('Hello from namespace');
        console.log(myES6Instance.data);
    }
}

命名空间函数在ES6模块中调用：

在命名空间中导出函数：

// namespaceFunction.ts
namespace MyNamespace {
    export function myNamespaceFunction(): number {
        return 42;
    }
}
export = MyNamespace;

在ES6模块中导入使用：

// es6ModuleUsingNamespaceFunction.ts
import MyNamespace from './namespaceFunction';
const result = MyNamespace.myNamespaceFunction();
console.log(result);

星途面试题库

面试题：TypeScript命名空间与模块的交互

知识考点

面试题答案

命名空间转ES6模块交互

ES6模块转命名空间交互