React 使用TypeScript时customize-cra配置别名无效的解决办法

想用TypeScript做一个个人的项目，结果在启动的时候就遇到了问题，customize-cra配置路径别名的时候总是报错，网上搜的都是旧版的，官网也只有JS的配置。后来在这个issues下找到了答案，再这记录一下。

首先在根目录下新建config-overrides.js：

//引入需要的组件
const {
  override,
  addWebpackAlias,
} = require('customize-cra');

然后写入配置：

const path = require('path');

module.exports = override(
  addWebpackAlias({
    // eslint-disable-next-line no-useless-computed-key
    ["@"]: path.resolve(__dirname, "src"),
  }),
);

网上的教程都到此为止。时机后面应该还有一步。

在根目录下新建paths.json（叫什么名无所谓，和接下来的配置保持一致就行）：

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

然后在tsconfig.json里加入：

"extends": "./paths.json"

重启项目

import Hello from "@/components/Hello";

不再报错，配置成功。