TypeScript - 限制通过导入来自 src 目录之外的 create-react-app

在使用 create-react-app 创建一个新的 React 应用时，项目中所有的组件和模块都存在于名为 src 的目录下。这也是默认设置，因此，在 index.js 中，我们可以使用如下代码来引入 App 组件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

这种默认设置在大多数情况下都是非常有用的，但是如果你不小心在项目中引入了来自 src 目录之外的模块或者组件，很容易会遇到 TypeScript 报错。

这种报错通常看起来像这样：

Module not found: Can't resolve 'path/to/module' in 'C:\path\to\project\src'

而在 TypeScript 中，这种报错通常会变成：

Module not found: Error: Can't resolve './path/to/module' in 'C:\path\to\project\src'

这是因为 TypeScript 会强制执行一个限制，确保在项目的 src 目录下只能导入来自这个目录或者其子目录的模块或者组件。

虽然这一限制有助于确保项目的整洁和可维护性，但是在某些特定情况下，我们需要引入来自 src 目录之外的模块或者组件。在这种情况下，可以使用不同的方法来跳过 TypeScript 的限制：

1. 通过绝对路径引入模块

在项目中，我们可以使用绝对路径来引入模块或者组件。例如，如果我们想要引入名为 MyModule 的模块，而这个模块存在于项目根目录下的 modules 文件夹中，我们可以使用如下代码：

import MyModule from '/modules/MyModule';

这里，我们使用了绝对路径 /modules/MyModule，这个路径表示项目根目录下的 modules 文件夹中的 MyModule 模块。通过这种方式，我们可以引入任何位于项目根目录之外的模块或者组件，而不需要担心 TypeScript 报错。

2. 声明模块或者组件

另一种跳过 TypeScript 限制的方法是声明模块或者组件。如果我们想要在 TypeScript 代码中使用来自 src 目录之外的模块或者组件，那么我们可以为这个模块或者组件创建一个声明文件。例如，如果我们想要使用名为 external_module 的模块，我们可以创建一个名为 external_module.d.ts 的文件，并编写如下代码：

declare module 'external_module';

这里，我们使用 declare 关键字来声明这个模块，并指定其模块名为 external_module。这样一来，在 TypeScript 代码中就可以直接使用这个模块了，而不需要担心 TypeScript 报错。

3. 配置 TypeScript 选项

最后一种跳过 TypeScript 限制的方法是更改 TypeScript 的配置选项。如果我们想要允许 TypeScript 导入来自项目根目录之外的模块或者组件，我们可以在 tsconfig.json 文件中添加如下代码：

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

这里，我们在 compilerOptions 字段中添加了 baseUrl 和 paths 两个选项。baseUrl 表示项目根目录，而 paths 则用来指定导入不同路径的模块时，编译器应该依据哪些别名去寻找真正的绝对路径。这样一来，我们就可以轻松地导入来自项目根目录之外的模块或者组件了。

总结

以上三种方法都可以用来跳过 TypeScript 限制，允许我们在项目中导入来自 src 目录之外的模块或者组件。然而，这些方法都不是无条件可用的，应该尽可能地保持项目结构的清晰和简单。合理使用这些方法即可在确保项目可维护性的同时，满足特定的项目需求。