Typescript 路径映射机制

Typescript 路径映射机制

你好朋友，

在本文中，我想向您介绍可能对您有用的 Typescript 功能之一。正如你在标题中看到的，我们将要讨论的主题是路径映射。首先，为了理解这个概念，我们需要知道为什么会出现这个概念。如果我们知道问题所在，我们就很容易掌握解决方案并将这种结构应用到我们的生活中。

文件、模块、组件等导入它是我们在项目中经常使用的操作之一。当然，随着项目的发展，与许多其他问题一样，这个问题的事情开始变得丑陋。让我逐项列出使工作变得丑陋的要点。

1- 相对路径，即相对文件位置或目录，开始变得相当复杂。为了在应用程序目录中找到您要查找的文件，您需要向上 3-5 层并向下 3-5 层。这会严重浪费时间，无法找到您正在寻找的文件并导致各种混乱。

2-假设您对文件的位置进行了一些更改。哈，这意味着你踩到了地雷。此文件中的导入行将开始出错，更糟糕的是，应用程序中使用此文件的其他文件将开始出错。特别是如果你在像 Angular 这样的框架中工作，你会开始收到诸如“组件 x 不是已知元素”之类的错误。出现此错误的原因是其中一个导入在其中一个模块的某处爆炸并浪费了，并且它下面的所有组件也变得无法被 Angular 读取。这就是为什么您会看到以前识别的组件、指令、模块开始在意想不到的地方出现错误。连锁交通事故。这在某种程度上是特定于 Angular 的。在 React 中并非如此。模块对比由于它没有结构，因此您不会遇到此问题。

3- 当您尝试将某些文件设为 npm 模块时，会出现另一个问题。你做的这些事情都搞砸了。您需要彻底检查整个代码库。

所有这些情况都通过 Typescript 的路径映射机制解决。在此结构中，您将某些别名/路径分配给应用程序中的文件目录，并在任何地方调用这些别名。那么发生了什么，让我们解释一下我们上面写的问题的解决方案。

1-当您想调用您在其他地方的路径映射的文件时，您不再需要查找相对路径。正

2-当您更改文件的位置时，当然需要在路径映射中更正此更改的目录。但只要这样做就足够了。由于其他文件将使用别名目录名称调用此文件，因此它们没有变化。

3-本文中的解释与第二条大致相同。无需重复。

现在让我们谈谈这是如何完成的。首先，导航到应用程序的 tsconfig.json 文件。我们将在这里玩一些属性。第一个是 baseUrl 属性，另一个是 path 属性。

上面的代码是针对一键式复杂项目结构的。我没有举一个非常基本的例子。现在让我们逐项解释：

1-您的 baseurl 代表路径前面的公共目录。您不得使用此属性。它并不总是有效。但有时它可以让事情变得更容易。

2- 在Paths属性中，左边的键值显示你的路径的别名。您现在将在应用程序中使用此别名调用您的文件。而且到处都是一样的。不像土耳其软糖吗？

3-右边Path属性的value值指向你的文件在应用程序中的位置。最后不要挂断 index.ts，因为我给出了一个来自 Angular 项目的示例，模块等在这些 index.ts 中导出。正在发生。系统从那里获取所需的模块。

是的，让我们在这里说明一点。现在你有了一个可重用的路径。在另一篇文章中见。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/18488/45500608