熟能生巧，轻松配置create-react-app Typescript路径别名，助你畅快开发！

前端

2024-02-01 01:28:36

开发项目中，项目很大，分很多个子目录。路径引用多了自然就杂乱，不利于维护与阅读。当项目庞大时，引用起来就会更加费劲，改动起来也更加麻烦。所以，我们需要用更科学的方式去整理管理这些路径。

通过配置typescript路径别名，我们可以使用缩短的路径来引用其他文件或模块，从而简化代码、提高可读性和维护性。下面，我们将介绍如何在 create-react-app 中配置 TypeScript 路径别名。

安装 TypeScript

首先，需要安装 TypeScript。如果你还没有安装，可以在终端中运行以下命令：
```
npm install -g typescript
```
创建 TypeScript 项目

接下来，创建一个 TypeScript 项目。你可以使用 create-react-app 来快速创建一个新的 React 项目。在终端中运行以下命令：
```
npx create-react-app my-app --template typescript
```
打开 tsconfig.json 文件

在项目的根目录下，打开 tsconfig.json 文件。这个文件是 TypeScript 的配置文件，用于配置 TypeScript 编译器。
添加路径别名

在 tsconfig.json 文件中，找到 "compilerOptions" 对象，并在其中添加 "paths" 属性。paths 属性是一个对象，用于配置路径别名。键是缩短的路径，值是实际的路径。

例如，要将 "src/components" 目录缩写为 "@components"，可以在 tsconfig.json 文件中添加以下代码：
```
{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/components/*"]
    }
  }
}
```
使用路径别名

现在，你就可以在 TypeScript 代码中使用路径别名了。例如，要引用 "src/components/Button.tsx" 文件，可以使用以下代码：
```
import Button from "@components/Button";
```
这样，就可以使用缩短的路径来引用其他文件或模块了。
处理潜在的冲突

如果两个路径别名指向同一个实际路径，可能会发生冲突。为了避免冲突，可以使用 "exclude" 属性来排除某些路径。例如，要排除 "src/components/Button.tsx" 文件，可以在 tsconfig.json 文件中添加以下代码：
```
{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/components/*"],
      "~Button.tsx": ["!src/components/Button.tsx"]
    }
  }
}
```
这样，就可以避免冲突了。