面试题：TypeScript模块解析策略之路径映射

Question

在TypeScript中，如何通过配置实现模块路径的自定义映射？例如，将src/utils目录下的模块，在引入时使用@utils作为前缀来代替完整路径，描述具体的配置步骤。

Answer 1

1. 在项目根目录找到 tsconfig.json 文件：如果没有，则创建一个。
2. 在 tsconfig.json 中添加或修改以下配置：

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

• baseUrl 设置为 . 表示以项目根目录为基础路径。
• paths 字段用于定义路径映射，@utils/* 表示使用 @utils 前缀来匹配路径，["src/utils/*"] 是实际的目标路径。

3. 对于某些构建工具（如Webpack）：还需要额外配置以支持这种路径映射。例如，对于Webpack项目，需要安装并配置 @angular - cli/webpack 或 ts - loader 等相关工具，确保它们识别这种自定义路径映射。以 @angular - cli/webpack 为例，在 webpack.extra.js 文件中添加如下配置：

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@utils': path.resolve(__dirname, 'src/utils')
        }
    }
};

这样就可以在TypeScript代码中使用 @utils 前缀来引入 src/utils 目录下的模块了，例如：import { someFunction } from '@utils/someModule';。