前端 TypeScript 面试题, TypeScript 中如何定义和导入模块?
前端 TypeScript 面试题, TypeScript 中如何定义和导入模块?
QA
Step 1
Q:: TypeScript 中如何定义和导入模块？
A:: 在 TypeScript 中，模块是使用 export 和 import 关键字来定义和导入的。一个模块可以通过 export 导出一个或多个成员（如变量、函数、类等），其他模块则可以使用 import 导入这些成员。
示例：
// math.ts
export function add(x: number, y: number): number {
return x + y;
}
// main.ts
import { add } from './math';
console.log(add(2, 3)); // 输出: 5
在这里，math.ts 是一个模块，add 函数通过 export 导出，而在 main.ts 中通过 import 导入并使用。
Step 2
Q:: TypeScript 的模块系统与 JavaScript 的模块系统有什么区别？
A:: TypeScript 的模块系统是基于 ECMAScript 模块标准的扩展，它与 JavaScript 的模块系统（ESM）兼容。主要区别在于 TypeScript 可以在编译时进行类型检查，而 JavaScript 只能在运行时捕获错误。TypeScript 支持的模块系统包括 ECMAScript 模块（ESM）和 CommonJS（Node.js 的模块系统）。另外，TypeScript 允许开发者使用命名空间（namespace）来组织模块内的代码。
Step 3
Q:: TypeScript 如何处理模块的循环依赖？
A:: TypeScript 在处理模块的循环依赖时，会确保所有依赖项在模块加载之前都被解析。当遇到循环依赖时，TypeScript 会尽量保持代码的执行顺序，并确保模块中的变量在访问时已经初始化。虽然 TypeScript 可以处理简单的循环依赖，但复杂的循环依赖可能导致问题，建议在设计模块时尽量避免循环依赖。
Step 4
Q:: 如何在 TypeScript 中使用第三方模块？
A:: 在 TypeScript 中使用第三方模块通常需要以下几个步骤：
1. 安装模块：使用 npm 或 yarn 安装第三方模块，例如 npm install lodash。
2. 安装类型定义文件：如果模块没有内置的 TypeScript 类型定义，可以通过 npm install @types/lodash 安装社区维护的类型定义文件。
3. 导入模块：在 TypeScript 文件中使用 import 语句导入模块。
示例：
import _ from 'lodash';
const numbers = [1, 2, 3, 4, 5];
console.log(_.shuffle(numbers)); // 打乱数组顺序
Step 5
Q:: TypeScript 模块的 export default 与 export 有什么区别？
A:: export 可以导出多个命名的成员，而 export default 只能导出一个默认成员。导入时，export 导出的成员需要使用解构语法，export default 导出的成员可以直接导入。
示例：
// module.ts
export const a = 1;
export const b = 2;
export default function() {
console.log('default export');
}
// main.ts
import defaultFunc, { a, b } from './module';
defaultFunc(); // 输出: default export
console.log(a, b); // 输出: 1 2