面试题：TypeScript 模块化编程中 import 和 export 的作用域与重命名问题

Question

假设在一个 TypeScript 项目中有多个模块，部分模块存在同名成员。请描述如何通过 import 和 export 的重命名功能解决命名冲突，并且解释 import 和 export 语句所涉及的作用域相关知识。

Answer 1

通过 import 和 export 的重命名功能解决命名冲突

1. export 重命名： 在导出模块成员时，可以使用 as 关键字进行重命名。例如，假设我们有一个模块 moduleA.ts 如下：

   // moduleA.ts
   export const commonName = 'original value in moduleA';
   export const renamedCommonName = commonName;
   

   这里将 commonName 以 renamedCommonName 的名字再次导出，避免直接导出同名的 commonName 与其他模块冲突。
2. import 重命名： 在导入模块成员时，同样可以使用 as 关键字。比如有另一个模块 moduleB.ts 也有一个同名的 commonName，我们在导入 moduleA 时可以这样做：

   // main.ts
   import { renamedCommonName as moduleACommonName } from './moduleA';
   import { commonName as moduleBCommonName } from './moduleB';
   

   这样就通过重命名，在当前作用域中区分了来自不同模块的同名成员。

import 和 export 语句所涉及的作用域相关知识

1. 模块作用域：
   • export：export 语句将模块内的变量、函数、类等成员暴露出去，使其在模块外部可见。这些被导出的成员处于模块作用域，模块作用域限制了它们的直接访问范围，只有通过 import 语句才能在其他模块中使用。例如，在 moduleA.ts 中定义并导出的 commonName，在 moduleA.ts 外部不能直接访问，必须通过 import 导入。
   • import：import 语句将其他模块的成员引入到当前模块作用域中。导入的成员只在当前导入的模块内部有效，不会污染全局作用域。例如，在 main.ts 中导入 moduleA 的 renamedCommonName 并命名为 moduleACommonName，这个 moduleACommonName 只在 main.ts 这个模块作用域内有效，其他模块无法直接访问它，除非再次通过 import 从 main.ts 导出（如果 main.ts 做了相应导出操作）。
2. 局部作用域与模块作用域关系： 在模块内部，除了模块作用域，也有局部作用域。例如函数内部定义的变量就处于局部作用域，局部作用域变量的生命周期和可见性仅限于函数内部。而通过 export 导出的成员，它们的作用域是模块作用域，在模块外部通过 import 导入后，其作用域转换为导入模块的模块作用域，与局部作用域相互独立。例如：

   // moduleC.ts
   function localFunction() {
     let localVar = 'local value';
     // localVar 只能在 localFunction 内部访问
   }
   export const moduleLevelVar = 'exported value';
   // moduleLevelVar 可以通过 import 在其他模块访问