在 TypeScript 中，我们经常需要使用 import 语句来引入其他模块的代码。然而，当我们在不同的文件夹下编写代码时，可能会遇到路径问题，导致 import 语句无法正确引入模块。本文将介绍 TypeScript 中 import 文件时的路径问题解决方案。
相对路径和绝对路径
在 TypeScript 中，我们可以使用相对路径或绝对路径来引入其他模块的代码。
相对路径是相对于当前文件的路径，例如：
import { foo } from './foo'; // 引入当前文件夹下的 foo.ts 文件
import { bar } from '../bar'; // 引入上级文件夹下的 bar.ts 文件绝对路径是相对于项目根目录的路径，例如：
import { foo } from '/src/foo'; // 引入项目根目录下的 src 文件夹中的 foo.ts 文件
import { bar } from '/src/utils/bar'; // 引入项目根目录下的 src 文件夹中的 utils 文件夹中的 bar.ts 文件路径问题
在实际开发中，我们可能会遇到路径问题，例如：
import { foo } from './src/foo'; // 报错：无法找到模块 './src/foo'
import { bar } from '/utils/bar'; // 报错：无法找到模块 '/utils/bar'这是因为 TypeScript 在编译时会将 import 语句转换为 require 语句，而 require 语句只支持相对路径和绝对路径，不支持根据 tsconfig.json 中的 baseUrl 配置来解析路径。
解决方案
为了解决路径问题，我们可以在 tsconfig.json 中添加 baseUrl 和 paths 配置。
-- -------------------- ---- -------
-
------------------ -
---------- ----
-------- -
--------- ----------
----------- ---------------
-
-
-baseUrl 配置表示项目根目录的路径，默认为 "."，paths 配置表示模块名和模块路径的映射关系。例如，"@src/" 表示以 "@src/" 开头的模块名对应的路径为 "src/"，"@utils/" 表示以 "@utils/" 开头的模块名对应的路径为 "src/utils/"。
这样配置后，我们就可以使用模块名来引入其他模块的代码了，例如：
import { foo } from '@src/foo'; // 引入项目根目录下的 src 文件夹中的 foo.ts 文件
import { bar } from '@utils/bar'; // 引入项目根目录下的 src 文件夹中的 utils 文件夹中的 bar.ts 文件示例代码
下面是一个示例代码，演示了如何使用路径配置来解决路径问题。
-- -------------------- ---- ------- -- ---------- ------ ----- --- - ------ -- ---------------- ------ ----- --- - ------ -- ------------ ------ - --- - ---- ----------- ------ - --- - ---- ------------- ---------------- -----
总结
本文介绍了 TypeScript 中 import 文件时的路径问题解决方案。通过配置 baseUrl 和 paths，我们可以使用模块名来引入其他模块的代码，解决路径问题。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6516607895b1f8cacdeb56b5