为打字稿添加路径别名答案

【问题标题】：Add path alias for typescript为打字稿添加路径别名
【发布时间】：2021-06-24 08:50:55
【问题描述】：

我使用 create-react-app 作为脚手架，使用 tsconfig-paths 作为我的 tsconfig 的扩展，因为 create-react-app 在运行时会删除我的路径。我已经使用这个设置一年了，我对它没有任何问题，但是最近当我从头开始创建一个项目时，它不再工作了

tsconfig.json：

{
  "extends": "./tsconfig-paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "types": [
      "cypress"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "downlevelIteration": true
  },
  "include": [
    "src"
  ]
}

tsconfig-paths.json:

{
    "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
            "components/*": ["./components/*"],
            "constants/*": ["./constants/*"],
            "pages/*": ["./pages/*"],
            "assets/*": ["./assets/*"],
            "actions/*": ["./actions/*"],
            "reducers/*": ["./reducers/*"],
            "layouts/*": ["./layouts/*"],
            "routes/*": ["./routes/*"],
            "utils/*": ["./utils/*"],
            "theme/*": ["./theme/*"],
            "api": ["./api"],
            "hooks": ["./hooks"],
            "formdocuments/*": ["./formdocuments/*"],
      "enums/*": ["./enums/*"]
        }
    }
}

脚本：

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
},

【问题讨论】：

标签： reactjs typescript tsconfig craco tsconfig-paths

【解决方案1】：

您必须先安装craco-alias。你必须有craco.config.js 文件。文件应该是这样的：

// craco.config.js
const CracoAlias = require('craco-alias')
module.exports = {
    plugins: [
        {
            plugin: CracoAlias,
            options: {
                source: 'tsconfig',
                // baseUrl SHOULD be <specified></specified>
                // plugin does not take it from tsconfig
                baseUrl: './src',
                /* tsConfigPath should point to the file where "baseUrl" and "paths" 
              are specified*/
                tsConfigPath: './tsconfig.paths.json',
            },
        },
    ],
}

然后您必须在项目的根目录中创建tsconfig.paths.json 文件。该文件具有路径别名，例如：

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

在项目根目录下创建的tsconfig.json文件中，必须扩展tsconfig.paths.json。

tsconfig 文件有以下内容：

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

假设你有components 文件夹，里面有Sample/index.tsx 目录。您可以通过

导入示例组件

import Sample from '@components/Sample'

【讨论】：