面试题：TypeScript相对路径导入与绝对路径导入的应用场景对比

Question

阐述在大型前端TypeScript项目中，相对路径导入和绝对路径导入分别适用于哪些场景，各有什么优缺点，并举例说明如何根据项目结构和需求选择合适的导入方式。

Answer 1

相对路径导入

• 适用场景：在小型模块之间的局部引用，比如一个组件内部引用其相关的子组件、工具函数等。例如在一个 components 目录下，Button 组件需要引用同目录下的 ButtonStyles.css，相对路径导入很方便。
• 优点：
  • 直观反映模块间的相对位置关系，在同一目录或相近层级目录的模块引用时，代码简洁易懂。比如 import ButtonStyles from './ButtonStyles.css';，一看就知道样式文件就在当前目录。
  • 不受项目整体目录结构调整的影响，只要模块间相对位置不变，导入路径无需更改。
• 缺点：
  • 路径深度增加时，代码可读性变差。例如 import SomeComponent from '../../../components/SomeComponent';，多层级的 ../ 使路径冗长且难以维护。
  • 不利于模块化复用，如果模块被移动到不同目录结构下，相对路径需大量调整。
• 示例：假设项目结构如下：

src
├── components
│   ├── Button
│   │   ├── Button.tsx
│   │   └── ButtonStyles.css

在 Button.tsx 中导入 ButtonStyles.css：

import ButtonStyles from './ButtonStyles.css';

绝对路径导入

• 适用场景：在大型项目中，不同层级模块间频繁引用，特别是跨多个目录层级的引用。比如在服务层引用工具函数，而工具函数在项目根目录下的 utils 目录。
• 优点：
  • 路径简洁清晰，无论模块在项目中的层级多深，都从项目根目录出发，可读性好。例如 import { formatDate } from '@utils/dateUtils';，直接表明 dateUtils 在 utils 目录下。
  • 方便模块复用和重构，模块移动时，只要其相对于项目根目录的逻辑位置不变，导入路径无需更改。
• 缺点：
  • 配置相对复杂，需要在构建工具（如Webpack）或TypeScript配置文件（tsconfig.json）中设置别名等相关配置。
  • 对项目目录结构有较强依赖，如果项目根目录结构改变，可能需要调整导入路径。
• 示例：假设项目结构如下：

src
├── components
│   ├── Button
│   │   └── Button.tsx
├── utils
│   └── dateUtils.ts

在 Button.tsx 中导入 dateUtils.ts：

1. 在 tsconfig.json 中配置别名：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@utils/*": ["utils/*"]
    }
  }
}

2. 在 Button.tsx 中导入：

import { formatDate } from '@utils/dateUtils';

根据项目结构和需求选择

• 小型项目：如果项目规模较小，模块层级简单，相对路径导入足以满足需求，因其简洁直观，无需额外配置。
• 大型项目：对于大型前端项目，模块众多且层级复杂，绝对路径导入优势明显。通过配置别名，使导入路径简洁易维护，方便模块复用和项目重构。例如在一个大型电商项目中，products 模块可能需要引用多个层级之外的 api 服务模块，使用绝对路径导入能清晰表明引用关系。